8 cách để viếtJavaScript như một pro!

Tram Ho

1. Arrow functions

JS phiên bản ES6 ra mắt Arrow functions cho phép bạn viết function một cách rõ ràng và nhanh hơn! Thay vì phải khai báo function như thế này:

Thì bạn có thể khai báo tương tự với ít code hơn:

Thậm chí còn có thể rút gọn hơn nữa nếu hàm của bạn chỉ có một biểu thức:

2. Spread Operator

Spread syntax cho phép những object có thể lặp như Array hoặc String được khai báo một cách mở rộng ở trong function call hoặc trong phần tử của cú pháp khai báo mảng (array literals) hoặc Object. (nếu đọc không hiểu thì xem ví dụ sẽ hiểu ngay)

2.1. Tạo mảng mới mà nó có một phần tử là một mảng

2.2. Một cách tốt hơn để ghép mảng

2.3. Sử dụng như là tham số truyền vào function

3. Rest Operator

Rest syntax trông giống y hệt spread syntax, chỉ khác ở chỗ rest syntax được sử dụng để gộp mảng và object. Hiểu một cách khác, rest syntax là cú pháp đối nghịch với spread syntax. Spread syntax cho phép mở rộng mảng vào chính phần tử của nó, trong khi rest syntax lại gộp tất cả thành một phần tử duy nhất.

P/s: Nếu bạn vẫn chưa hiểu thì có thể hiểu theo cách của người dịch như sau:

  • Spread syntax là để truyền vào trong function

    => Sử dụng bằng function call, khai báo object, khai báo mảng, …

  • Rest syntax là để lấy tất cả các phần tử truyền vào bằng một biến duy nhất

    => Sử dụng bên trong function

Tham số cuối cùng của hàm trên được thêm tiền tố ... khiến cho tất cả các tham số còn lại được đặt vào trong cùng một mảng.

4. Fill arrays

Tạo một mảng đơn giản với một dòng code.

4.1. Mảng có 5 phần tử là chuỗi rỗng

4.2. Mảng có số từ 0 đến 4

5. Computed property names

ES6 hỗ trợ một cú pháp mới gọi là computed property names cho phép bạn đặt biểu thức trong dấu ngoặc vuông [], biểu thức ở trong đó sẽ được sử dụng như là key ở trong object đó

6. Những cách hay để console.log()

6.1. Sử dụng console.table() khi bạn có một mảng object.

=> Kết quả:

6.2. Làm kết quả in ra màn hình nổi bật hơn bằng CSS và dấu %

=> Kết quả:

6.3. Log nhiều object cùng lúc để tiết kiệm không gian và cũng để dễ đọc hơn.

=> Kết quả:

7. Object destructuring

Loại bỏ code bị lặp bằng cách destructuring thuộc tính của object mà bạn cần.

Destructure bên trong cú pháp hàm bằng cách bọc tên thuộc tính trong dấu ngoặc nhọn {}

Hoặc là truyền vào một object và khai báo tên biến trùng với tên thuộc tính của object đó. Cách này sẽ tốt hơn nếu có nhiều destructure object trong hàm.

8. Sử dụng reduce(), map()filter() thay vì những vòng lặp thông thường.

8.1. Sử dụng reduce() để tính toán giá trị của mảng.

8.2. Sử dụng map() để tạo mảng mới, cùng với đó là gọi một function cho mỗi phần tử.

8.3. Sử dụng filter() để filter mảng với một function.

Nguồn tham khảo

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo