Mẹo với Javascript (ES6) và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn ( Phần 2)

2497

Tái cấu trúc

Tái cấu trúc là quá trình tách array hoặc object bên trái của dấu bằng. Array hoặc object có thể đến từ một biến, chức năng, hoặc phương trình.

Với việc tái cấu trúc object, các key của object có thể được liệt kê bên trong dấu ngoặc nhọn để lấy ra cặp key-value đó. Xem ví dụ để hiểu rõ hơn:

Đôi khi, bạn muốn lấy ra các giá trị nhưng gán chúng cho một biến mới. Điều này được thực hiện bằng cách sử dụng kết hợp cặp ‘key: variable’ ở bên trái dấu bằng.

Một điều khác là tái cấu trúc các object cho phép gán một giá trị cho nhiều biến.

Object Literals và thu gọn Parameters

Khi bạn đang tạo một object literal từ các biến, ES6 cho phép bạn bỏ qua key nếu nó cùng tên với biến.

Điều này cũng có thể được sử dụng kết hợp với việc tái cấu trúc để làm cho code của bạn đơn giản hơn và sạch hơn.

Nó cũng có thể được sử dụng để tái cấu trúc các object được truyền vào các function. Phương pháp 1 và 2 là cách bạn đã làm trước ES6, phương pháp 3 sử dụng tái cấu trúc và thu gọn params.

Sử dụng ES6, chúng ta có thể lấy ra giá trị của agename và company  mà không cần khai báo thêm biến.

Dynamic Property Names

ES6 thêm khả năng tạo hoặc thêm thuộc tính với các key được gán một cách linh động.

Arrow Functions =>

Arrow functions có hai lợi điểm: cấu trúc và thuộc tính this.

Chúng ta có thể có một cấu trúc đơn giản hơn nhiều so với các function truyền thống bởi vì chúng ta không cần từ khai báo từ khóa function, và tự động return kết quả sau dấu mũi tên (=>).

Nếu chức năng đòi hỏi nhiều hơn một tính toán đơn giản, dấu ngoặc nhọn có thể được sử dụng và function trả về kết quả bất kỳ từ block scope.

Một trong những khu vực hữu ích nhất của arrow function là nằm trong các hàm array như .map.forEach hay .sort.

 

Vòng lặp for … of

ES6 thêm một cách để lặp lại mỗi giá trị trong một array. Điều này khác hoàn toàn với vòng lặp for ... in đó là nó lặp trên key/index.

(Vòng lặp For..in tương tự như vòng lặp For cơ bản, nhưng có 1 điểm quan trọng là For..in có thể được dùng cho 1 biến kiểu đối tượng)

Sử dụng for … of sẽ đỡ phải thêm let val = a[idx] vào bên trong mỗi vòng lặp.

Các array, string, generator and collection đều có thể lặp trong JavaScript. Các đối tượng thường không thể lặp lại được, trừ khi bạn đã define lặp cho nó.

Number Literals

Code ES5 xử lý các định dạng số thập phân và số thập lục phân khá tốt, nhưng nó không hiểu được định dạng bát phân. Bình thường, nếu một số được bắt đầu bằng 0, thì javascript sẽ hiểu đó là hệ cơ số 8. Ví dụ 010 === 8 sẽ trả về giá trị là true. Tuy nhiên, không phải ai cũng biết đến điều đó, và cách viết 010 có thể sẽ khiến nhiều người vẫn hiểu đó là 10. Chính vì thế ở Strict Mode, nó đã bị coi là một lỗi cú pháp.

ES6 đã thêm một định dạng mới, bạn lại có thể dùng cách viết trên, với tiền tố là 0o. Tức dù là trong Strict Mode, nhưng var foo = 0o10 vẫn là một cách viết hợp lệ, và 0o10 === 8 sẽ trả ra kết quả là true.

TopDev via Freecodecamp

Phần 1 : Mẹo với ES6 và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn.

SHARE