ECMAScript2015-ES6
1 Block scope
var
: khai báo 1 biến - biến này có phạm vi truy cập trongfunction
chứa nólet
: khai bảo 1 biến - biến này chỉ có thể truy cập được trongblock
chứa nóconst
: khai báo 1 hằng số - không thể thay đổi giá trị
Note
: Ngoài ra, khi ở global scope
thì var
tạo ra 1 thuộc tính cho global object (this)
còn let
thì không được nhé :D
Sử dụng trong ES6
1
2
3
* Không dùng var trong bất kỳ trường hợp nào
* Thay vào đó thì dùng let
* Dùng const để định nghĩa 1 hằng số
2 Arrow function
Ex:
1
2
3
const hello = (param1, param2) => {
// body
}
Một số trường hợp đặc biệt
- Thân hàm chỉ có 1 dòng lệnh đơn giản
1 2
// nếu bên thân cặp {} chỉ là một câu lệnh thì bạn có thể bỏ cặp {} const hello = (name) => console.log('Wellcome ' + name)
- Trường hợp function chỉ có 1 tham số
1 2
// nếu chỉ có 1 tham số, bạn có thể bỏ cặp () const hello = name => console.log('Wellcome ' + name)
3 Destructuring Assignments
Bạn có thể tham khảo ở link này để đọc chi tiết hơn
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let a, b, rest
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
Nhìn sơ qua ví dụ thì chắc bạn cũng sẽ hiểu được nội dung của cái này :D.
Vậy Destructuring Assignments
là cách tách các phần tử của Array hoặc Object thành nhiều biến chỉ bằng một đoạn code duy nhất.
4 Rest Parameters
Rest Parameters là cách bạn có thể khai báo những param còn lại cho 1 hàm, object, array
Để khai báo các rest parameters thì bạn đặt 3 dấu chấm . trước biến đại diện.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let a, b, rest
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
let functionName = (param1, param2, ...other) => {
//
}
5 HTML Template String
Template String sẽ thay thế cách nối chuỗi thông thường. được bao bọc bởi cặp dấu ``
Bạn có thể sử dụng tham số trong chuỗi này thì bạn dùng cú pháp ${variale}
Ex:
1
2
3
4
const wellcome = `Wellcome ES6`
// OR
const es6 = 'ES6'
const wellcome = `Wellcome ${es6}`
Ngoài ra còn một số tính năng mới của ES6, các bạn có thể tham khảo thêm trên Internet, cảm ơn các bạn đã đọc