Tân Nguyễn
Tân Nguyễn I'am developer

ECMAScript2015-ES6

ECMAScript2015-ES6

1 Block scope

  • var: khai báo 1 biến - biến này có phạm vi truy cập trong function chứa nó
  • let : khai bảo 1 biến - biến này chỉ có thể truy cập được trong block 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

comments powered by Disqus