ECMAScript 7: những tính năng đáng chú ý
Bài đăng này đã không được cập nhật trong 6 năm
ES6 đã ra mắt vào giữa năm 2015 và được lấy tên chính thức là ES2015, với rất nhiều những tính năng mới lạ, và cần thiết đối với sự phát triển chóng mặt của Javascript trong những năm gần đây. với sự ra đời của ES6 với rất nhiều tính năng mà bất kỳ một web developer nào cũng nên biết. và là một web developer tôi cũng rất mong đợi sự ra đời của ES7 với những tính năng mới và hưu ích. chúng ta sẽ cùng xem ES7 có những tính năng mới nào mà theo tôi là những tính năng hay ES7 đem lại.
những tính năng trong ES7
1. hỗ trợ cho xử lý bất đồng bộ.
Trong những các tính năng của ES7. một trong những tính năng thú vị nhất theo sự đánh giá của tôi đó là sự bổ sung của async và await. việc làm việc với async khá là thường xuyên với chúng ta đặc biệt đối với những ứng dụng được phát triển sử dụng nodejs, hay việc call http đến server. bày toán async chưa bao giờ là đơn giản đối với chúng ta. để giải thích được lơi ích của async và await chúng ta sẽ đi đến một vị dụ cụ thể để chúng ta có thể hiển được tại sao tôi lại nghĩ đây là một trong những tính năng thú vị nhất của ES7. Ví dụ: giả sử chúng ta có 3 hoạt động không đồng bộ mỗi hoạt động phụ thuộc vào kết quả của hoạt động trước đó. có nhiều cách để tao có thể làm được việc này.
chúng ta sẽ quay lại quá khứ để xem ES5 xử lý như thế nào:
myFirstOperation(function(error, firstResult) {
mySecondOperation(firstResult, function(error, secondResult) {
myThirdOperation(secondResult, function(error, thirdResult) {
\* viết code xử lý với kết quả nhận được ở hoạt động thứ 3 *\
});
});
});
đối với ES5 chúng ta sẽ sử dụng callback để làm việc này tuy nhiên khuyết điểm của hướng giải quyết này là dẫn đến callback hell. để giải quyết vấn đề callback hell ES6 đã giới thiệu với chúng ta Promise để làm cho asynchronous đơn giản hơn nhiều. Chúng ta sẽ cùng xem code ES6:
myFirstPromise()
.then(firstResult => mySecondPromise(firstResult)
.then(secondResult => myThirdPromise(secondResult)
.then(thirdResult => {
\* viết code xử lý với kết quả nhận được ở hoạt động thứ 3 *\
},
error => {
\* xử lý lỗi *\
}
ES6 với promise đã loại bỏ được vấn đề callback hell tồn tại ở ES5 khi sử dụng quá nhiều callback function lồng nhau. Chúng ta sẽ tiếp tục xem ES7 sử dụng async và await như thế nào:
async function myOperations() {
const firstResult = await myFirstOperation();
const secondResult = await mySecondOperation(firstResult);
const thirdResult = await myThirdResult(secondResult);
\* viết code xử lý với kết quả nhận được ở hoạt động thứ 3 *\
}
try {
myOperations();
} catch(e) {
\* xử lý lỗi *\
}
đoạn code trên giống như code của synchronous ?. đúng vậy với việc sử dụng async và await là code đơn giản hơn rất nhiều. nó làm cho đoạn code xử lý nhìn giống với code synchronous thật hay đúng không nào 
.
2. Object rest và Object spread
Trong ES6, chúng ta đã được giới thiệu về hoạt động của array rest và spread làm cho việc combine và decompose array trở lên dễ dàng. nhận thấy được sự hữu ích đó ES7. đã thêm tính năng này cho Object. theo mình đây cũng là tính năng rất hưu ích của ES7. 2.1 Object rest. đây là mở rộng của hoạt động ES6 destructuring. khi mà gán properties trong destructuring nếu mà add thêm ...rest parameter, thì toàn bộ key và value còn lại sẽ được gán cho object đó, Ví dụ:
const myObject = {
lorem : 'ipsum',
dolor : 'sit',
amet : 'foo',
bar : 'baz'
};
const { lorem, dolor, ...others } = myObject;
// lorem === 'ipsum'
// dolor === 'sit'
// others === { amet : 'foo', bar : 'baz' }
2.2 Object spread. giống với object rest nhưng được sử dụng cho constructing objects thay cho destructuring.
const obj1 = {
amet : 'foo',
bar : 'baz'
};
// đối với code sử dụng ES7
const myObject = {
lorem : 'ipsum',
dolor : 'sit',
...obj1
};
// đối với code sử dụng ES6
const myObject = Object.assign({
lorem : 'ipsum',
dolor : 'sit'
}, obj1);
/*
myObject === {
lorem : 'ipsum',
dolor : 'sit',
amet : 'foo',
bar : 'baz'
};
*/
ta thấy trong ES7 code đã được tối giản đi dễ đọc hơn trong ES6.
3. thêm các utility methods
3.1 Array.prototype.includes: kiểm tra một mảng có chứa phần tử hay không.
[1,2,3].includes(1); //true
3.2 String.prototype.padLeft và String.prototype.padRight:
'abc'.padLeft(10); //"abc "
'abc'.padRight(10); //" abc"
3.3 String.prototype.trimLeft and String.prototype.trimRight
'\n \t abc \n \t'.trimLeft(); //"abc \n \t"
'\n \t abc \n \t'.trimRight(); //"\n \t abc"
làm việc với ES7 ngay hôm nay.
Nhiều tính năng trong ES7 vẫn đang trong giai đoạn đề cử. nhưng bạn vẫn có thể start với ES7 trong hôm nay. công cụ phổ biến nhất để bắt đầu là babel, babel là hoàn hảo để compiling toàn bộ code của bạn thành ES5 chạy trên toàn bộ trình duyệt, nếu bạn có gặp vấn đề với việc setting project của bạn thì có rất nhiều yeoman generators để giúp đỡ bạn bắt đầu. yeoman generators
kết luận.
ở trên là những tính năng mà mình nghĩ là rất hay được bổ sung trong ES7. ngoài ra còn rất nhiều những tính năng khác nữa các bạn có thể tìm hiểu thêm ECMAScript 7.
tham khảo:
All rights reserved
