Share Những tính năng mới trong ES2018

filiallion

Administrator
Staff member
Administrator
Messages
341
Points
10
Language
Tiếng Việt
Như các bạn đã biết, ECMAScript (Viết tắt là ES) là một chuẩn chung của JavaScript được phát triển và nâng cấp thường xuyên cho tới nay, qua mỗi phiên bản thì ECMAScript lại bổ sung thêm nhiều tính năng mới hỗ trợ rất tốt cho các lập trình viên. Trong các phiên bản được nâng cấp trước đây, có lẻ phiên bản ECMAScript 2015 (ES6) là bản nâng cấp lớn với nhiều sự thay đổi cho tới hiện nay. Tới thời điểm hiện tại thì ECMAScript đã ra đời phiên bản ES2018 (ES9) và bài viết này tôi sẽ giới thiệu với các bạn một số tính năng được bổ sung đáng chú ý của phiên bản này.

Vòng lặp bất đồng bộ:

Như các bạn đã biết, tại một số thời điểm trong hành trình bất đồng bộ, các bạn có thể gọi một hàm bất đồng bộ bên trong một vòng lặp đồng bộ, ví dụ:
JavaScript:
async function process(array) {
    for (let i of array) {
        await doSomething(i);
    }
}
Các vòng lặp vẫn là đồng bộ và sẽ luôn hoàn thành trước các hoạt động bất đồng bộ bên trong nó.

Trong ES2018 đã bổ sung các vòng lặp bất đồng bộ, tương tự như các vòng lặp đồng bộ mà các bạn biết ngoại trừ phương thức next trả về một Promise. Vì vậy, từ khoá await có thể được sử dụng cho vòng lặp for để chạy các hoạt đồng bất đồng bộ, ví dụ:
JavaScript:
async function process(array) {
    for await (let i of array) {
        doSomething(i);
    }
}
Finally prototype trong Promise:

Một Promise có thể thành công và đạt kết quả cuối cùng tại .then() hoặc thất bại và kích hoạt .catch(). Trong một số trường hợp các bạn muốn thực hiện một vài hành động nào đó bất kể kết quả đạt được là thành công hay thất bại thì các bạn có thể sử dụng .finally(), ví dụ:
JavaScript:
function doSomething() {
    myPromise.then()
             .catch()
             .finally(() => {
                 //Do something
             });
}
Rest và spread:

ES2015 đã bổ sung ký hiệu ba chấm (...) để chuyển đổi các tham số cuối cùng được truyền vào hàm thành một mãng như ví dụ sau:
JavaScript:
function rest(param1, param2, ...param3) {}
Với định nghĩa trên, nếu các bạn gọi hàm như sau:
JavaScript:
rest(1, 2, 3, 4, 5);
Thì giá trị các tham số của hàm rest nhận được sẽ là:
Code:
param1 = 1
param2 = 2
param3 = [3, 4, 5]
Đây là một cách viết rất thuận tiện cho việc lập trình, với ES2018 thì tính năng này còn cho phép làm việc với đối tượng, các bạn có thể tham khảo ví dụ sau:
JavaScript:
const myObject = {
    key1: 1,
    key2: 2,
    key3: 3,
    key4: 4,
    key5: 5
};

const {key1, key2, ...keyn} = myObject;
Với ví dụ trên thì giá trị của keyn sẽ là đối tượng {key3: 3, key4: 4, key5: 5}.

Các bạn thấy rằng nó giống với trường hợp mãng nhưng phải lưu ý là tính năng rest/spread chỉ có tác dụng với cấp cao nhất của đối tượng mà thôi.

Đặt tên nhóm trong biểu thức chính quy:

Trong JavaScript, các bạn đã biết có thể sử dụng biểu thức chính quy để lấy các chuỗi trùng khớp với quy tắc được định nghĩa, ví dụ:
JavaScript:
const regularDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
      match       = regularDate.exec('2018-10-26'),
      year        = match[1],//2018
      month       = match[2],//10
      day         = match[3];//26
Tuy nhiên với cách sử dụng kết quả theo chỉ mục như thế này cũng không thật sự thuận tiện trong một số trường hợp nhất là các trường hợp thay đổi, thêm, bớt thành phần trong biểu thức chính quy. ES2018 đã bổ sung thêm tên nhóm bằng cách sử dụng ký hiệu ?<Tên_nhóm>, ví dụ:
JavaScript:
const regularDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
      match       = regularDate.exec('2018-10-26'),
      year        = match.groups.year,//2018
      month       = match.groups.month,//10
      day         = match.groups.day;//26
Ngoài những bổ sung mà tôi trình bày với các bạn ở bài viết này thì chuẩn ES2018 còn bổ sung thêm nhiều tính năng hữu ích khác. Tuy nhiên, ES2018 là một phiên bản mới nên không phải tất cả các trình duyệt đều hỗ trợ, vì vậy các bạn cần cân nhắc khi sử dụng các tính năng mới bổ sung này.
 
Top