Nội dung bài viết
Video học lập trình mỗi ngày
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.
Tham gia và đồng hành cùng mọi thành viên khác.
Facebook: Cộng đồng lập trình javascript
Facebook Cộng đồng giới thiệu bài viết, website, sản phẩm tăng traffic.
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.
Tham gia và đồng hành cùng mọi thành viên khác.
Facebook: Cộng đồng lập trình javascript
Facebook Cộng đồng giới thiệu bài viết, website, sản phẩm tăng traffic.
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
