20 Kỹ thuật viết tắt trong JavaScript

Các kỹ thuật viết tắt của bất kỳ ngôn ngữ lập trình nào giúp bạn viết code sạch và tối ưu hơn. JavaScript cũng vậy.

Kỹ thuật viết tắt cải thiện khả năng đọc code của bạn và bạn có thể đạt được mục tiêu của mình với ít dòng code hơn.

Hôm nay, hãy cùng mình tìm hiểu 20 kỹ thuật viết tắt trong JavaScript để giúp bạn viết code nhanh hơn.

20 Kỹ thuật viết tắt trong JavaScript

> Lưu ý: Đây là cách code JS nhanh hơn. Còn nếu bạn muốn học lập trình web nhanh hơn thì phải xách mông lên đi học KHÓA HỌC PHPKHÓA HỌC JAVA

1. Khai báo biến trong JS

Đây là 2 cách khai báo biến. Bạn sẽ thấy rõ sự độc lạ giữa cách viết thông thường và khi vận dụng kỹ thuật viết tắt :

// Bình thường

let x;

let y = 20;

/ / Viết tắt

let x, y = 20;
 

* Ghi chú: Kỹ thuật viết tắt trong JS không có gì cao siêu cả. Chỉ là vận dụng các tính chất cơ bản của JavaScript một cách lô hỏa thuần thanh mà thôi. 😀

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

Chúng ta hoàn toàn có thể gán giá trị cho nhiều biến trong một dòng với cấu trúc mảng .


/ / Bình thường

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ử Ternary

Chúng ta hoàn toàn có thể tiết kiệm chi phí 5 dòng code ở đây với toán tử ternary ( có điều kiện kèm theo ) .


/ / Bình thường

let number = 26;

let isEven;

if (number % 2) {

    isEven = true;

} else {

    isEven = false;

}

/ / Viết tắt

let isEven = number % 2 ? true : false;
 

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

Chúng ta có thể sử dụng toán tử OR (||) để gán giá trị mặc định cho một biến trong trường hợp giá trị đó có thể rỗng.


/ / Bình thường

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 ‘;
 

5. Toán tử AND (&&)

Nếu bạn chỉ gọi một hàm khi một biến được đánh giá là true, thì với việc sử dụng toán tử AND (&&) bạn có thể thực hiện nó trong một dòng duy nhất.


/ / Bình thường

if (isLoggedin) {

    goToHomepage();

}

/ / Viết tắt

isLoggedin && goToHomepage();
 

Ở đây, trong kỹ thuật viết tắt, nếu isLoggedin trả về true, thì goToHomepage() sẽ thực thi.

6. Hoán đổi giá trị giữa 2 biến

Để hoán đổi giá trị giữa hai biến, tất cả chúng ta thường sử dụng một biến thứ ba. Nhưng trong JS, tất cả chúng ta hoàn toàn có thể hoán đổi hai biến một cách thuận tiện với phép gán cấu trúc mảng .


let x = ‘ Hello ‘, y = 55;

/ / Bình thường

const temp = x;

x = y;

y = temp;

/ / Viết tắt

[x, y] = [y, x];
 

7. Arrow Function


/ / Bình chường

function add(num1, num2) {

    return num1 + num2;

}

/ / Viết tắt

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

Các tính năng của ES6Xem thêm về Arrow Function tại bài viết

8. Template Literals

Trong JavaScript, chúng ta thường sử dụng toán tử + để nối các giá trị chuỗi với các biến.

Nhưng với phiên bản ES6, với Template Literals, chúng ta có thể làm điều đó theo cách đơn giản hơn.


/ / Bình thường

console.log(‘ Bạn có cuộc gọi nhỡ từ ‘ + number + ‘ vào ‘ + time);

/ / Viết tắt

console.log(` Bạn có cuộc gọi nhỡ từUSD {number}vàoUSD {time}`);
 

9. Chuỗi trên nhiều dòng

Đối với chuỗi nhiều dòng, chúng ta thường sử dụng toán tử + với \n.

Nhưng chúng ta có thể làm điều đó theo cách dễ dàng hơn, đẹp hơn bằng cách sử dụng dấu gạch ngược (`).


/ / Bình thường

console.log(‘ JavaScript là ngôn từ lập trình ngữ cảnh .\ n’ +

    ‘ Code JavaScript được thông dịch, đa quy mô .\ n’);

/ / Viết tắt

console.log(` JavaScript là ngôn từ lập trình ngữ cảnh .

Code JavaScript được thông dịch, đa quy mô. `);
 

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

Để kiểm tra nhiều giá trị, chúng ta có thể đặt tất cả các giá trị trong mảng và sử dụng phương thức indexOf().


/ / Bình thường

if (value === 1 || value === ‘ Một ‘ || value === 2 || value === ‘ Hai ‘) {

    / / Code làm gì đó

}

/ / Viết tắt

if ([1, ‘ Một ‘, 2, ‘ Hai ‘].indexOf(value) >= 0) {

    / / Code làm gì đó

}
 

Hàm indexOf ( ) là hàm tìm xem giá trị cần tìm nằm ở vị trí nào trong một chuỗi. Nó trả về – 1 nếu không tìm thấy .

11. Gán thuộc tính cho đối tượng

Nếu tên biến và tên key của đối tượng giống nhau thì chúng ta chỉ có thể đề cập đến tên biến trong các object literals thay vì cả key và value.

JavaScript sẽ tự động đặt key giống như tên biến và gán giá trị dưới dạng giá trị biến.


let firstname = ‘ NIIT ‘;

let lastname = ‘ ICT TP.HN ‘;

/ / Bình thường

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

/ / Viết tắt

let obj = { firstname, lastname };
 

12. Chuyển đổi chuỗi thành số

Có sẵn các phương thức có sẵn như parseIntparseFloat để giúp chúng ta chuyển một chuỗi thành số.

Nhưng cách đó khá là dài, chúng ta cũng có thể làm điều này nhanh hơn bằng cách sử dụng toán tử +


/ / Bình thường

let total = parseInt(‘ 453 ‘);

let average = parseFloat(‘ 42.6 ‘);

/ / Viết tắt

let total = +’ 453 ‘;

let average = +’ 42.6 ‘;
 

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

Để lặp lại một chuỗi trong một khoảng thời gian nhất định, bạn có thể sử dụng vòng lặp for.

Nhưng bạn cũng có thể sử dụng phương thức repeat() để thực hiện nó trên một dòng duy nhất.


/ / Bình thường

let str = ‘ ‘;

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

    str += ‘ Hello ‘;

}

console.log(str); / / Hello Hello Hello Hello Hello

/ / Viết tắt

‘ Hello ‘.repeat(5);
 

Và nếu, bạn muốn xin lỗi người yêu bằng cách gửi 100 lần “Anh xin lỗi”? Hãy thử nó với phương thức repeat(). Nếu bạn muốn lặp lại từng chuỗi trong một dòng mới, hãy thêm \n vào cuỗi chuỗi.


‘ Anh xin lỗi\ n’.repeat(100);
 

11. Tính lũy thừa

Chúng ta có thể sử dụng phương thức Math.pow() để tìm lũy thừa của một số.

Nhưng nếu chỉ đơn giản như thế thì có một cách khác ngắn hơn với hai dấu sao **.


/ / Bình thường

const power = Math.pow(5, 3); / / 125

/ / Viết tắt

const power = 5 ** 3; / / 125
 

15. Làm tròn số

Toán tử kép NOT bitwise ~~ là một thay thế cho phương thức làm tròn xuống số thập phân gần nhất Math.floor().


/ / Bình thường

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

/ / Viết tắt

const floor = ~~6.9; / / 6
 

16. Tìm min, max trong một mảng số

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.

Hoặc, 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 với một mảng nhỏ, chúng ta có thể làm đơn giản như sau:


/ / Viết tắt

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

Math.max(…arr); / / 15

Math.min(…arr); / / 2
 

17. Sử dụng vòng lặp for

Để lặp qua một mảng, chúng ta thường sử dụng vòng lặp for truyền thống.

Nhưng cách làm đó không dễ.

Thế nên, JavaScript sinh ra thêm 2 vòng lặp for như for … of và for … in.

Chúng ta có thể sử dụng vòng lặp for … of để lặp qua các mảng.

Để truy cập chỉ số index của mỗi giá trị, chúng ta có thể sử dụng vòng lặp for … in.


/ / Bình thường

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

    console.log(arr[i]);

}

/ / Viết tắt

/ / với vòng lặp for of

for (const val of arr) {

    console.log(val);

}

/ / với vòng lặp for in

for (const index in arr) {

    console.log(arr[index]);

}
 

Chúng ta cũng hoàn toàn có thể lặp qua những thuộc tính của đối tượng người tiêu dùng bằng cách sử dụng vòng lặp for … in .


let obj = {

    x: 20,

    y: 50

} ;

/ / Lặp qua những thuộc tính của đối tượng người tiêu dùng

for (const key in obj) {

    / / In ra giá trị của thuộc tính tương ứng

    console.log(obj[key]);

}
 

18. Hợp nhất mảng

Để hợp nhất mảng ta hoàn toàn có thể sử dụng toán tử Spread để hợp nhất mảng .


let arr1 = [20, 30];

let arr2 = [40, 50];

/ / Bình thường

let arr3 = arr1.concat([60, 80]);

/ / [ 20, 30, 60, 80 ]

/ / Viết tắt

let arr4 = […arr1, 60, 80];

/ / [ 20, 30, 60, 80 ]

let arr5 = […arr1, …arr2]

/ / [ 20, 30, 40, 50 ]
 

19. Sao chép sâu

Để 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 truyền giá trị thuộc tính hiện tại như sau:


let obj = {

    x: 20,

    y: {

        z: 30

}
} ;

/ / Bình thường

const makeDeepClone = (obj) => {

    let newObject = {};

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

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

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

        } else {

            newObject[key] = obj[key];

}
} ) ;

    return newObject;

}

const cloneObj = makeDeepClone(obj);
 

Nhưng như thế rất khó hiểu.

Chúng ta có thể tận dụng tính chất của JSON để sao chép sâu trên một dòng duy nhất.

Sử dụng JSON.stringify()JSON.parse()


let obj = {

    x: 20,

    y: {

        z: 30

}
} ;

/ / Viết tắt

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

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

Trước đây bạn phải sử dụng phương pháp charAt ( ) để lấy ký tự từ một chuỗi. Nhưng trong JavaScript, chuỗi cũng tương tự như như mảng .


let str = ‘ niithanoi.edu.vn ‘;

/ / Bình thường

str.charAt(0); / / n

/ / Viết tắt

str[0]; / / n
 

Tạm kết

kỹ thuật viết tắt trong JavaScript để giúp bạn tiết kiệm nhiều thời gian làm việc hơn (và khi đọc code của các cao thủ có thể hiểu được).

> Đọc thêm: Cách viết code JavaScript đẹp hơnNhư vậy, mình đã ra mắt cho bạn 20 để giúp bạn tiết kiệm chi phí nhiều thời hạn thao tác hơn ( và khi đọc code của những cao thủ hoàn toàn có thể hiểu được ). > Đọc thêm :

HỌC VIỆN ĐÀO TẠO CNTT NIIT – ICT HÀ NỘI

Học Lập trình chất lượng cao ( Since 2002 ). Học làm Lập trình viên. Hành động ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, Thành Phố Hà Nội

SĐT : 02435574074 – 0914939543

E-Mail : [email protected]

Fanpage: https://facebook.com/NIIT.ICT/

# niit # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp # python # java # php