Tính năng mới của ES2020

Tram Ho

Xin chào mọi người, năm 2020 đến rồi hãy cùng mình tìm hiểu những điều mới nhất đầu năm này nhé.

Đó là phiên bản ECMAScript mới đã được released! Một tin tốt đối với những người yêu thích ECMAScript nhỉ. Ở phiên bản ECMAScript trước, đã có nhiều tính năng thú vị và function hữu ích đã được thêm vào. Lần này chúng ta mong đợi điều gì? Hay cùng mình kiểm tra nhé.

String.protype.matchAll

Phương thức matchAll() trả về kết quả của một string với một regular expression, bao gồm cả capturing groups. Hãy xem ví dụ dưới đây để hình dung rõ hơn nhé:

Trình duyệt hỗ trợ:

  • Chrome: 73
  • Firefox: 67
  • Opera: 60

Dynamic Import

Bây giờ, bạn có thể import một file dynamically.

Trước đây chúng ta sử dụng như thế này:

Nhưng bây giờ, chúng ta có thể import một file dynamically. Và JavaScript đọc các modules ở trong file và mang chúng vào đoạn code nơi mà chúng được gọi.

Import động trả về một promise. Có nghĩa bạn có thể viết nó theo cách như này.

Trình duyệt hỗ trợ:

  • Chrome: 63
  • Firefox: 67
  • Opera: 50
  • Safari: 11.1

BigInt

Khi bạn phải nhân hai số mà chúng quá lớn đến nổi gây overflow, vậy chúng ta có cách khắc phục điều đó không?

Câu trả là có, với BigInt nó là một vị cứu tinh cho chúng ta trong trường hợp này.

Để sử dụng BigInt bằng cách gọi BigInt() với dấu ngoặc đơn hoặc 2n với ‘n’ ở cuối Number.

Bạn cũng có thể nhân, chi, công và trừ nó.

Có một lưu ý nhỏ, đối với bigN/3n trả về 3n chứ không phải 3.33333n. Bởi vì như bạn có nhận ra từ tên của nó, nó chỉ xử lý các số nguyên. Vì vậy bigN/3n tương tự như Math.floor(10/3)

Thật không may, bạn không thể sử dụng BigInt với float và cũng không thể sử dụng BigIntNumber cùng nhau.

Thay vào đó, chúng sẽ sử dụng được trong trường hợp so sánh.

Và một BigInt có thể được đánh giá như Number nếu nó có điều kiện.

Trình duyệt hỗ trợ:

  • Chrome: 67
  • Firefox: 68
  • Opera: 54

Promise.allSettled

Promise.allSettled khá giống với Promise.all, nhưng có sự khác biệt giữa chúng. Đó là Promise.all đợi cho tất cả các promises được thực hiện hoặc từ chối. Còn Promise.allSettled lại không quan tâm điều đó. Những gì nó quan tâm là tất cả các promises đã được thực hiện, bất kể trạng thái của chúng là gì. Vì vậy mọi promise đầu vào đều có thể được thực hiện hoặc từ chối, nhưng đều đó không quan trọng với Promise.allSettled. Chỉ cần tất cả chúng đã được thực hiện.

Điều này có thể khá hữu ích khi bạn muốn làm điều gì đó trước khi thực hiện một số action, ví dụ, lấy tất cả các data cần thiết trước khi người dùng nhìn thấy trang danh sách. Nhưng người dùng cũng có thể thấy các item trống bởi vì action có thể bị lỗi.

Trình duyệt hỗ trợ:

  • Chrome: 76
  • Firefox: 71

globalThis

globalThis đề cập đến bối cảnh mà bạn đang ở. Nếu bạn đang ở Browsers, globalThis sẽ là this, nếu bạn ở Node globalThis sẽ là global. Do đó bạn không cần phải suy nghĩ về các vấn đề môi trường khác nhau nữa.

Và đây là cách nó hoạt động, nhưng không nên sử dụng nó trong code của bạn nhé.

Trình duyệt hỗ trợ:

  • Chrome: 71
  • Firefox: 65
  • Safari: 12.1
  • Node: 12

Tổng kết

Có khá nhiều tính năng mới thú vị trong ES2020 ngoài những tính năng mình đã chia sẻ còn có for-in mechanics, Optional Chaining, Nullish coalescing Operator. Tuy nhiên, hầu hết một trong số chúng không hỗ trợ đối với các trình duyệt cũ và chúng không ổn định trong mọi môi trường. Vì vậy, bạn nên xem xét những môi trường mà được hỗ trợ tính năng đó.

Cảm ơn mọi người đã đọc chia sẻ của mình nhé!

Tài liệu tham khảo: https://medium.com/javascript-in-plain-english/new-features-in-es2020-you-should-check-b4974d9d7edc
https://dev.to/carlillo/es2020-features-in-simple-examples-1513

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo