Javascript ES2019 guide.

Như tiêu đề của bài viết, hôm nay tôi cùng với các bạn cùng nhìn qua ES2019 để xem có những tính năng nào tiếp theo của 
ECMAScript.ECMAScript là tiêu chuẩn dựa trên JavaScript và nó thường được viết tắt là ES. Có bạn nào biết phiên bản hiện tại 
của ECMAScript là bao nhiêu không?

Theo mình được biết và tham khảo thì phiên bản ECMAScript hiện tại là ES2018. Để mình nói rõ hơn một chút về cụm từ này trước
khi chúng ta tham khảo một số tính năng của ES2019.
ESNext là gì? Có bạn nào đã nghe đến cụm từ này không? ESNext là tên luôn chỉ ra phiên bản tiếp theo của JavaScript.
Phiên bản ECMAScript hiện tại là ES2018 hình như là tháng 6/2018. Vì vậy chúng có thể mong đợi ECMAScript 2019 
sẽ được phát hành vào mùa hè 2019. Một vài thông tin mình tham khảo được là như vậy.

Thôi giờ vào phần chính luôn cho khoẻ. Giờ mình sẽ liệt kê ra cho các bạn hình dung.

Review ES2018 một tý.

Rest/Spread Properties
Asynchronous iteration
Promise.prototype.finally()
Regular Expression improvements

ESNext chính là cái mà chúng ta đang nói đến.

Array.prototype.{flat,flatMap}
Optional catch binding
Object.fromEntries()
String.prototype.{trimStart,trimEnd}


1 - Array.prototype.{flat,flatMap}
flat() là một phương thức thể hiện mảng mới có thể tạo ra một mảng một chiều từ một mảng nhiều chiều.
ví dụ: 
['Ronaldo', ['Messi', 'Quang Hai']].flat()
//[ 'Ronaldo', 'Messi', 'Quang Hai' ]

thêm ví dụ nữa. để biết flat có thể add thêm số cấp bậc để có thể làm phẳng một mảng. Infinity có cấp độ không giới hạn.

['Ronaldo', ['Messi', ['Quang Hai']]].flat()
//[ 'Ronaldo', 'Messi', [ 'Quang Hai' ] ]

['Ronaldo', ['Messi', ['Quang Hai']]].flat(2)
//[ 'Ronaldo', 'Messi', 'Quang Hai' ]

['Ronaldo', ['Messi', ['Quang Hai']]].flat(Infinity)
//[ 'Ronaldo', 'Messi', 'Quang Hai' ]

Nếu bạn nào tinh ý sẽ nhớ đến map() trong javascript. Chúng ta sử dụng nó để thực thi một function trên mỗi phần tử của mảng thì
flatMap() nó có thể là sự kết hợp giữa map() và flat().
Ví dụ tiếp.

['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]

['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]

2 - Optional catch binding

Cái này thì mình nói sơ qua thôi chứ cũng chả hay ho lắm.
Lúc trước chúng ta hay làm thế này

try {
  //...
} catch (e) {
  //handle error
}

Giờ thậm chí chẳng cùng khai báo error nữa.

try {
  //...
} catch {
  //handle error
}

3 - Object.fromEntries()
entries() thì hầu như các bạn cũng đã quen thuộc rất nhiều và nó xuất hiện hình như là ES2017 thì phải.
Đó là phương thức trả về một mảng các cặp thuộc tính [khóa, giá trị] có thể đếm được của chính một đối tượng đã cho.
ví dụ:

const object1 = { foo: 'bar', baz: 42 };
console.log(Object.entries(object1));//output: [["foo", "bar"], ["baz", 42]]

console.log(Object.entries(object1)[1]);//output:["baz", 42]

Trong ES2019 đã trình làng một object mới đó là Object.fromEntries(). Chức năng này giúp dễ dàng chuyển đổi JavaScript Map 
thành JavaScript object.

Ví dụ:

// { hello: 'world', foo: 'bar' }
Object.fromEntries([['hello', 'world'], ['foo', 'bar']]);

Thêm ví dụ nữa cho có sự liên quan giữa entries(), fromEntries().

const records = [['name','Ronaldo'], ['age', 32]];
const obj = Object.fromEntries(records);
// { name: 'Ronaldo', age: 32}
Object.entries(obj);
// [['name','Ronaldo'], ['age', 32]];

4 - String.prototype.{trimStart, trimEnd}

Định nghĩa nhanh gọn, không cần nói nhiều.
trimStart() xóa khoảng trắng từ đầu chuỗi.
trimEnd() xóa khoảng trắng khỏi cuối chuỗi.
Nhưng khoan có bạn nào để ý là nó giống giống với trimRight() với trimLeft() không nhỉ? Tại hạ là đang thắc mắc á.
Ví dụ:
var greeting = "   Hello world!   ";

console.log(greeting);
// expected output: "   Hello world!   ";

console.log("output:" + greeting.trimStart() + ";", "output:" + greeting.trimLeft() + ";");
// expected output: "Hello world!   ";

console.log(greeting.trimStart() === greeting.trimLeft());
// expected output: true;

5 - Kết luận

Qua những tính năng của ES2019 mà chúng ta mới lướt qua thì mình có cảm nhận nó không thú vị như ES2015 hoặc ES2017 (async / await), 
nhưng các tính năng mới này giúp language's API một cách tròn trặn hơn. Array#flat() và Array#flatMap() 
mở rộng hỗ trợ hiện có của JavaScript để thao tác mảng có thể xâu chuỗi. Object.fromEntries () là phần bổ sung gọn gàng cho 
Object.entries ().
Nhìn chung, ES2019 là một bước nhỏ nhưng hữu ích theo đúng hướng cho JavaScript. Cảm ơn các bạn đã đọc.

Bài viết có tham khảo từ nhiều nguồn:
https://thecodebarbarian.com/whats-new-in-es2019-flat-flatmap-catch.html
https://medium.freecodecamp.org/whats-new-in-javascript-es2019-8af4390d8494
https://stackoverflow.com/questions/51550917/difference-between-javascripts-trimleft-vs-trimstart
https://medium.freecodecamp.org/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e