Nhìn qua một vài điểm về Javascript ES2019
Như tiêu đề của bài viết, hôm nay mình cùng với các bạn cùng nhìn qua JavaScript 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 ...
Như tiêu đề của bài viết, hôm nay mình cùng với các bạn cùng nhìn qua JavaScript 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ì?
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 vào tháng 6/2018. Vì vậy chúng ta có thể mong đợi ECMAScript 2019 sẽ được phát hành vào mùa hè 2019.
Cùng vào vấn đề chính hôm nay nhé! 4 tính năng mà chúng ta sẽ xem qua là:
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ụ:
|
1 2 3 4 |
['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.
|
1 2 3 4 5 6 7 8 9 10 |
['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ụ:
|
1 2 3 4 5 6 7 |
['My dog', 'is awesome'].map(words => words.split(' ')) //[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ] ['My dog', 'is awesome'].flatMap(words => words.split(' ')) //[ 'My', 'dog', 'is', 'awesome' ] |
Xem thêm Prototype là gì.
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:
|
1 2 3 4 5 6 7 |
try { //... } catch (e) { //handle error } |
Giờ thậm chí chẳng cần khai báo error nữa.
|
1 2 3 4 5 6 7 |
try { //... } catch { //handle error } |
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ụ:
|
1 2 3 4 5 6 |
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 JavaScript 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ụ:
|
1 2 3 4 |
// { 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().
|
1 2 3 4 5 6 7 |
const records = [['name','Ronaldo'], ['age', 32]]; const obj = Object.fromEntries(records); // { name: 'Ronaldo', age: 32} Object.entries(obj); // [['name','Ronaldo'], ['age', 32]]; |
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ỉ? Mình thì có thắc mắc đó đấy.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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; |
Kết luận
Qua những tính năng của JavaScript 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, JavaScript 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.
Có thể bạn quan tâm:
- ES6 là gì? Những nổi bật và sự thay đổi tuyệt vời của ES6
- Mẹo với Javascript (ES6) và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn ( Phần 2)
- 12 tips hay cho JavaScript
Xem thêm việc làm JavaScript Developer trên TopDev
TopDev via anonystick.com
