post
Tin tức
1412

20 Kỹ thuật Tốc ký trong JavaScript sẽ tiết kiệm thời gian của bạn

1. Khai báo biến

// Longhand

let x; cho y = 20;

// Viết tắt

let x, y = 20;

 

2. Gán giá trị cho nhiều biến

Chúng ta có thể gán giá trị cho nhiều biến trong một dòng bằng cách cấu trúc mảng.

// Longhand

let a, b, c; a = 5; b = 8; c = 12;

// Viết tắt let

[a, b, c] = [5, 8, 12];

3. Toán tử bậc ba

Chúng ta có thể lưu 5 dòng mã ở đây với toán tử bậc ba (có điều kiện).

// Longhand

let mark = 26;

cho kết quả;

if (mark> = 30) {

result = 'Pass';

} else {

result = 'Fail';

} // Viết tắt cho kết quả = mark> = 30? 'Vượt qua thất bại';

4. Gán giá trị mặc định

Chúng ta có thể sử dụng OR(||) đánh giá ngắn mạch để gán giá trị mặc định cho một biến trong trường hợp giá trị mong đợi được tìm thấy là sai.

// Longhand let imagePath;

let path = getImagePath ();

if (path! == null && path! == undefined && path! == '') {

imagePath = path;

} else {

imagePath = 'default.jpg';

}

// Viết tắt

let imagePath = getImagePath () || 'default.jpg';

>>> Tìm hiều thêm: Chương trình học lập trình từ cơ bản đến nâng cao

5. AND (&&) Đánh giá ngắn mạch

Nếu bạn đang gọi một hàm chỉ khi một biến là đúng, thì bạn có thể sử dụng AND(&&) ngắn mạch để thay thế cho điều này.

// Longhand if (isLoggedin) {

goToHomepage ();

}

// Viết tắt isLoggedin && goToHomepage ();

Tốc độ AND(&&) ngắn hữu ích hơn trong React khi bạn muốn kết xuất một thành phần có điều kiện. Ví dụ:

<div> {this.state.isLoading && <Loading />} </div>

6. Hoán đổi hai biến

Để hoán đổi hai biến, chúng ta thường sử dụng một biến thứ ba. Chúng ta có thể hoán đổi hai biến một cách dễ dàng với phép gán cấu trúc mảng.

let x = 'Hello', y = 55;

// Longhand const temp = x; x = y; y = tạm thời;

// Tốc ký [x, y] = [y, x];

7. Hàm mũi tên

// Hàm tốc ký

add (num1, num2) { return num1 + num2; }

// Viết tắt

const add = (num1, num2) => num1 + num2;

Tham khảo : Hàm Arrow trong JavaScript

8. Chữ mẫu

Sử dụng toán tử + để nối các giá trị chuỗi với các biến. Với các ký tự mẫu của ES6, chúng ta có thể làm điều đó theo cách đơn giản hơn.

// Longhand

console.log ('Bạn nhận được cuộc gọi nhỡ từ' + number + 'at' + time);

// Viết tắt

console.log (`Bạn nhận được cuộc gọi nhỡ từ $ {number} lúc $ {time} ');

9. Chuỗi nhiều dòng

Đối với chuỗi nhiều dòng, sử dụng toán tử + với chuỗi thoát dòng mới (\ n). Chúng ta có thể làm điều đó theo cách dễ dàng hơn bằng cách sử dụng dấu gạch ngược (`).

// Longhand

console.log ('JavaScript, thường được viết tắt là JS, là ngôn ngữ lập trình \ n' + 'tuân theo đặc tả ECMAScript \ n' + '. JavaScript là cấp cao, \ n' + 'thường chỉ- được biên dịch kịp thời và đa mô hình. ');

// Viết tắt

console.log (`JavaScript, thường được viết tắt là JS, là một ngôn ngữ lập trình tuân theo đặc tả ECMAScript. JavaScript là cấp cao, thường được biên dịch trong thời gian và đa mô hình.`);

10. Kiểm tra nhiều điều kiện

Để đối sánh nhiều giá trị, chúng ta có thể đặt tất cả các giá trị trong mảng và sử dụng indexOf() hoặc includes().

// Longhand

if (giá trị === 1 || giá trị === 'một' || giá trị === 2 || giá trị === 'hai') {

// Thực thi một số mã }

// Viết tắt 1

if ([1, 'one', 2, 'two']. IndexOf (value)> = 0) {

// Thực thi một số đoạn mã }

// Viết tắt 2

if ([1, 'one', 2, 'two']. Include (value)) {

// Thực thi một số đoạn mã }

11. Chuyển nhượng tài sản đối tượng

Nếu tên biến và tên khóa đối tượng giống nhau thì chúng ta chỉ có thể đề cập đến tên biến trong các ký tự đối tượng thay vì cả khóa và giá trị. JavaScript sẽ tự động đặt khóa giống như tên biến và gán giá trị dưới dạng giá trị biến.

let firstname = 'Amitav';

let lastname = 'Mishra';

// Longhand

let obj = {firstname: firstname, lastname: lastname};

// Viết tắt let obj = {firstname, lastname};

12. Chuỗi thành một số

Có sẵn các phương thức như parseIntvà parseFloatcó sẵn để chuyển đổi một chuỗi thành số. Chúng ta cũng có thể làm điều này bằng cách chỉ cần cung cấp toán tử một ngôi (+) trước giá trị chuỗi.

// Longhand

let total = parseInt ('453');

let average = parseFloat ('42 .6 ');

// Viết tắt

let total = + '453'; cho trung bình = + '42 .6 ';

13. Lặp lại một chuỗi nhiều lần

Để lặp lại một chuỗi trong một số thời gian nhất định, bạn có thể sử dụng một forvòng lặp. Nhưng sử dụng repeat()phương pháp này, chúng ta có thể làm điều đó trong một dòng duy nhất.

// Longhand

let str = ''; for (let i = 0; i <5; i ++) {

str + = 'Xin chào'; }

console.log (str); // Chào chào chào chào chào

// Viết tắt

'Xin chào' .repeat (5);

Tips: Bạn muốn xin lỗi ai đó bằng cách gửi 100 lần "xin lỗi"? Hãy thử nó với repeat()phương pháp. Nếu bạn muốn lặp lại từng chuỗi trong một dòng mới, thì hãy thêm \nvào chuỗi.

'xin lỗi \ n'.repeat (100);

14. Lũy thừa

Chúng ta có thể sử dụng Math.pow() để tìm lũy thừa của một số. Có một cú pháp ngắn hơn để làm điều đó với double asterik (**).

// Longhand

const power = Math.pow (4, 3); // 64

// Viết tắt const power = 4 ** 3; // 64

15. Toán tử kép NOT bitwise (~~)

Toán tử kép NOT bitwise là một thay thế cho Math.floor().

// Longhand

const floor = Math.floor (6.8); // 6

// Viết tắt

const floor = ~~ 6.8; // 6

Note: Phương pháp toán tử kép NOT bitwise chỉ hoạt động với số nguyên 32 bit, tức là (2 ** 31) -1 = 2147483647. Vì vậy, đối với bất kỳ số nào cao hơn 2147483647, toán tử bitwise (~~) sẽ cho kết quả sai, vì vậy khuyến khích sử dụng Math.floor() trong trường hợp như vậy.

16. Tìm số lớn nhất và số nhỏ nhất trong mảng 

Chúng ta có thể sử dụng vòng lặp for để lặp qua từng giá trị của mảng và tìm giá trị max hoặc min. Chúng ta cũng có thể sử dụng phương thức Array.reduce () để tìm số max và min trong mảng. Nhưng sử dụng toán tử spread, chúng ta có thể thực hiện nó trong một dòng duy nhất.

// Viết tắt

const arr = [2, 8, 15, 4];

Math.max (... arr); // 15

Math.min (... arr); // 2

17. Vòng lặp for

Để lặp qua một mảng, chúng ta thường sử dụng for truyền thống. Chúng ta có thể sử dụng for...of để lặp qua các mảng. Để truy cập chỉ mục của mỗi giá trị, chúng ta có thể sử dụng for...in.

cho arr = [10, 20, 30, 40];

// Longhand

for (let i = 0; i <arr.length; i ++) {

console.log (arr [i]); }

// Viết tắt

// for of loop

for (const val of arr) {

console.log (val); }

// vòng lặp

for in for (const index in arr) {

console.log (`index: $ {index} và value: $ {arr [index]}`); }

Chúng ta cũng có thể lặp qua các thuộc tính của đối tượng bằng cách sử dụng for...in.

let obj = {x: 20, y: 50};

for (khóa const trong obj) {

console.log (obj [key]); }

Tham khảo: Các cách khác nhau để lặp qua các đối tượng và mảng trong JavaScript

18. Hợp nhất các mảng

cho arr1 = [20, 30];

// Longhand let arr2 = arr1.concat ([60, 80]);

// [20, 30, 60, 80] /

/ Viết tắt let arr2 = [... arr1, 60, 80]; // [20, 30, 60, 80]

19. Nhân bản sâu đối tượng đa cấp

Để sao chép sâu một đối tượng nhiều cấp, chúng ta có thể lặp qua từng thuộc tính và kiểm tra xem thuộc tính hiện tại có chứa một đối tượng hay không. Nếu có, sau đó thực hiện một cuộc gọi đệ quy đến cùng một hàm bằng cách chuyển giá trị thuộc tính hiện tại (tức là đối tượng lồng nhau).

Chúng tôi cũng có thể làm điều đó bằng cách sử dụng JSON.stringify()và JSON.parse() nếu đối tượng của chúng tôi không chứa các hàm, không xác định, NaN hoặc Ngày dưới dạng giá trị. Nếu chúng ta có đối tượng mức đơn, tức là không có đối tượng lồng nhau nào, thì chúng ta cũng có thể nhân bản sâu bằng toán tử spread.

let obj = {x: 20, y: {z: 30}};

// Longhand const makeDeepClone = (obj) => {

let newObject = {};

Object.keys (obj) .map (key => {

if (typeof obj [key] === 'object') {

newObject [key] = makeDeepClone (obj [key]);

} else {

newObject [key] = obj [phím]; } });

trả về newObject;

}

const cloneObj = makeDeepClone (obj);

// Viết tắt

const cloneObj = JSON.parse (JSON.stringify (obj));

// Viết tắt cho đối tượng cấp đơn

let obj = {x: 20, y: 'hello'}; const cloneObj = {... obj};

Note: Kỹ thuật viết tắt ( JSON.parse(JSON.stringify(obj))) không hoạt động nếu tài sản đối tượng của bạn chứa function, undefinedhoặc NaNlà giá trị. Bởi vì khi bạn JSON.stringify đối tượng, tài sản chứa function, undefinedhoặc NaNlà giá trị sẽ bị xoá khỏi đối tượng. Vì vậy, hãy sử dụng JSON.parse(JSON.stringify(obj)) khi đối tượng của bạn chỉ chứa chuỗi và số.

Tham khảo: JSON.parse () và JSON.stringify ()

20. Lấy ký tự từ chuỗi

let str = 'jscurious.com';

// Longhand str.charAt (2); // c

// Viết tắt str [2]; // c

Một số kỹ thuật tốc ký này có vẻ không phù hợp để sử dụng trong nhiều project nhưng không tồi nếu bạn biết thêm một số kỹ thuật bổ sung. 
 

Nguồn: Amitav Mishra - Medium

Đánh giá bài viết

0

0/5 - 0 lượt bình chọn