Giới thiệu ES6
ES6 là gì?
ECMAScript 6/ES6 là phiên bản mới nhất của bộ tiêu chuẩn ECMAScript – một bộ đặc tả tiêu chuẩn dành cho Javascript do Hiệp hội các nhà sản xuất máy tính Châu Âu (European Computer Manufacturers Association – ECMA) đề xuất. Phiên bản ECMAScript phổ biến ở thời điểm hiện tại (cuối 2016), và được hầu hết các trình duyệt hỗ trợ là ES5 và ES5.1 (ra mắt vào khoảng năm 2009 và 2011)
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. Ngoài ra, phiên bản mới nhất của bộ đặc tả tiêu chuẩn này là ES7 cũng đang được phát triển, tuy chưa định ngày ra mắt chính thức nhưng cũng đã bắt đầu gây được sự chú ý của giới công nghệ với những tính năng hấp dẫn như async function,observer,…
Trong phạm vi bài viết này, mình sẽ chỉ liệt kê ra một số chức năng nổi bật nhất. Nếu bạn muốn xem đầy đủ các tính năng mới hãy truy cập tại đây
Các chức năng mới của ES6
Let/Const
ES6 bổ sung thêm cách khai báo biến cục bộ (Block-scoped variables), let khai báo biến trong block mà không làm ảnh hưởng đến giá trị trong block khác, hoặc const cho các biến không thay đổi giá trị. Ngoài ra let chỉ có giá trị trong phạm vi block code được khai báo.
const PI = 3.141593;
if(true) {
let indx = 1;
console.log(indx); // output 'i'
}
console.log(indx); // undefined indx do indx chỉ có thể sử dụng trong block if(){} phía trên
Arrow
Arrow là một dạng viết tắt của các function sử dụng dấu =>.
Chúng ta sử dụng theo cú pháp param => return value
Tính năng này rất hữu ích khi chúng ta lập trình hàm:
ở ECMAScript 6
// Expression bodies
oods = evens.map(v => v + 1);
pairs = evens.map(v => ({even: v , ood: v + 1}) );
nums = evens.map((v, i) => v + i);
// Statement bodies
nums.forEach (v => {
if (v % 2 === 0) {
evens.push(v);
}
}
// Lexical this
this.nums.forEach((v) => {
if (v % 5 === 0)
this.fives.push(v)
})
ở ECMAScript 5
// Expression bodies
odds = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums = evens.map(function (v, i) { return v + i; });
// Statement bodies
nums.forEach (function(v) {
if (v % 2 === 0) {
evens.push(v);
}
}
// Lexical this
// variant 1
var self = this;
this.nums.forEach(function (v) {
if (v % 5 === 0)
self.fives.push(v);
});
// variant 2
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}, this);
// variant 3 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}.bind(this));
Class
Đối với Javascript truyền thống, để khai báo và kế thừa các class chúng ta phải thiết kế theo hướng sử dụng Prototype (prototype-based OO). Việc khai báo và kế thừa các class trong ES6 dễ hơn rất nhiều với cú pháp gần giống với Java và C++. Ngoài ra, class trong ES6 cũng hỗ trợ kế thừa thông qua prototype, các static method, constructor,… đúng chất của OOP.
ở ECMAScript 6
class Shape {
constructor(id, x, y) {
this.id = id;
this.move(x, y);
}
set width (width) { this._width = width }
move(x, y) {
this.x = x
this.y = y
}
}
ở ECMAScript 5
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
}
Shape.prototype = {
set width (width) { this._width = width; }
}
Shape.prototype.move = function (x, y) {
this.x = x
this.y = y
};
Đối với kế thừa:
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
this.width = width
this.height = height
}
}
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
}
TEMPLATE LITERALS
Cải tiến này giúp chúng ta sử dụng các biến trong đoạn text được dễ dàng hơn.
Đặc biệt, hỗ trợ chuỗi nhiều dòng, đây có lẽ là một cải tiến khiến rất nhiều người cảm thấy thích thú.
Để sử dụng, các bạn chỉ cần đặt đoạn text nằm trong 2 dấu \` là được.
ở ECMAScript 6
const version = 6;
let html = `
<h1>
ES${version} IS VERY COOL!
</h1>`;
console.log(html);
// <h1>ES6 IS VERY COOL!</h1>
console.log(`ES ${5 + 1}`);
// 'ES 6'
ở ECMAScript 5
var version = 5;
var html = '<h1>' +
'ES' + version + ' IS COOL!';
html += '</h1>';
console.log(html);
// <h1>ES5 IS COOL!</h1>
console.log('ES' + 2000 + 15);
// 'ES200015'
console.log('ES' + (2000 + 15));
// 'ES2015'
DEFAULT PARAMETERS
Ở phiên bản này, Javascript đã có thể sử dụng các giá trị mặc định cho tham số truyền vào các hàm như những ngôn ngữ lập trình khác
ở ECMAScript 6
function js(version = 2015) {
return `ES${version}`;
}
console.log(js());
// 'ES2015'
console.log(js(6));
// 'ES6'
ở ECMAScript 5
function js(version) {
version = version || 5;
return 'ES' + version;
}
console.log(js());
// 'ES5'
Leave a Comment