Nội dung bài viết
Video học lập trình mỗi ngày
ES2020 là phiên bản của ECMAScript tương ứng đến năm 2020. Phiên bản này không chứa nhiều tính năng mới như ES6 (ES2015). Nhưng nhiều tính năng thú vị và hữu ích cũng đã được thêm vào. Bài viết này giới thiệu các tính năng mới của ES2020 kèm theo các ví dụ để minh hoạ. Bằng cách này, bạn có thể nhanh chóng hiểu các tính năng mới này mà không yêu cầu giải thích phức tạp.
Ở đây có 60 thủ thuật nói về những tính năng từ ES6 tới ES10 đấy, có thời gian thì lướt qua đi nhoá.
Tính năng ES2020 javascript
- Optional Chaining
- Nullish coalescing Operator
- globalThis
- Promise.allSettled
- String.prototype.matchAll
- BigInt
- for-in mechanics
- Dynamic Imports
Nullish coalescing Operator
Thật sự đây là một tính năng mà tôi (anonystick.com) mong đợi chứ không phải bây giờ ES2020 javascript mới bổ sung. Từ khi viết code để triển khai ứng dụng, có nhiều lúc tôi phải phát điên với những tình huống cũ trước và sau ES6. Nullish coalescing cũng may đến kịp thời chứ không bỏ code luôn rồi. Vì sao tôi lại nói như vậy, các bạn xem ví dụ sau sẽ rõ vì sao, và đó là bằng chứng đầy thuyết phục.
let anonystick = {
profile: {
website: 'anonystick.com',
type: 'blog javascript',
age: 0,
release: ''
}
}Khi anonystick truy vấn một thuộc tính nhất định, chúng tôi thường đặt một giá trị mặc định mà không có thuộc tính, chẳng hạn như hai cách điển hình sau:
console.log(anonystick.profile.age || 18) //18 console.log(anonystick.profile.release ? '17/07/2014' : 18) //18
WTF điều gì đã xảy ra, khi giá trị đã được thay đổi, mặc dù chúng có giá trị 0 và '' nhưng nó lại hiểu là giá trị false. Vâng đó là nhược điểm của hai cách trên. Nếu sử dụng Nullish coalescing (??) thì đây là điều tuyệt vời nhất. Hãy xem nó xử lý như thế nào với toán tử ??
console.log(anonystick.profile.age ?? 18) // 0 console.log(anonystick.profile.release ?? 18) // ''
Giờ đây, các bạn cũng nên sủ dụng nhiều hơn cho những dòng code của bạn được chính xác hơn. Đó cũng là một skill nên được up cho bản thân bạn đấy.
Optional Chaining
Tiếp tục câu chuyện về trước khi ES2020 javascript sinh ra, một ngày đẹp trời bạn có bao giờ gặp một lỗi khét tiếng như thế này không? Uncaught TypeError: Cannot read property... và khiến ứng dụng chúng ta dừng lại. Moá, thật là khủng khiếp. Để tôi đi lấy một ví dụ nữa về bằng chứng thép này, mà thôi lấy luôn ví dụ trên luôn cho mấy thằng copy bài nó sửa mệt nghỉ
let anonystick = {
profile: {
website: 'anonystick.com',
type: 'blog javascript',
age: 6,
release: '17/07/2014'
}
}Khi tôi muốn check và lấy dữ liệu của website thì trước đây tôi hay bạn cũng sẽ làm như thế này
const _website = anonystick && anonystick.profile && anonystick.profile.website; console.log(_website) // anonystick.com
Điều này có nghĩa là gì, đó là trước khi lấy được giá trị của website thì chúng ta lần lượt phải check và đảm bảo rằng anonystick && anonystick.profile không bị null or undefined. Còn bay giờ thì chúng ta có thể viết code ngắn gọn hơn nhiều khi sử dụng tính năng Optional Chaining
const _website = anonystick?.profile?.website console.log(_website) // anonystick.com
Nếu anonystick or profile có giá trị null or undefined thì nó sẽ return về undefined. Rất hay đúng không mấy dev.
Dynamic Imports
Tiếp theo một tính năng vô cùng sướng, có thể nói là quá sướng luôn. Bạn biết đây, bây giờ giao diện của người dùng ngày càng phình ra với bao nhiêu chức năng. Nhiều thời điểm ta thấy không cần load những modules cần thiết khi tải trang đầu tiên. Để users trải nghiệm ngon lành và nhanh hơn thì giờ đây chúng ta có thể sử dụng Dynamic Imports hay còn gọi là tải modules theo yêu cầu. Có thể giúp bạn cải thiện hiệu suất của ứng dụng.
el.onclick = () => {
import('/modules/my-module.js')
.then(module => {
// Do something with the module.
})
.catch(err => {
// load error;
})
}Ví dụ trên đây, là trường hợp khi người dùng click vào một chức năng gì đó thì modules này mới được kích hoạt. Quá tuyệt vời. Không tốn tài nguyên, gọi khi cần thiết, không cần phải load khi trang được tải. Tuyệt.
let module = await import('/modules/my-module.js');Chúng ta cũng có thể khai báo với Top-level await ES2020 mà chúng tôi đã giới thiệu trước đó.
Promise.allSettled
Đây là một tính năng hay nữa nhưng ở bài trước, chúng tôi đã nói rất kỹ rồi, cho nên ở bài viết này, có lẽ anonystick.com sẽ không cần nói thêm nữa. Vì đã rất rất kỹ rồi. Bạn có thể đọc về Promise allSettled vs Promise all. Ở đó bạn sẽ biết được trước khi Promise allSettled ra đời khi bạn đã khó khăn như thế nào khi sử dụng Promise all. Còn bây giờ, bye bye và hẹn gặp lại ở những bài tiếp theo. Xin chào! À nhắc các bạn, nếu có copy xin vui lòng ghi nguồn vào nhé. Công sức của tui đó.
