Sử dụng Symbol trong ES6

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về symbol của ES6. Lần lượt giới thiệu và và đi qua các ví dụ về symbol được sử dụng trong ES6.

1. Giới thiệu về symbol

ES6 cung cấp cho chúng ta 1 kiểu dữ liệu nguyên thuỷ mới gọi là Symbol. Nó không giống như kiểu integer, string, boolean và các kiểu khác. Cú pháp tạo Symbol như sau.

1
let s = Symbol('foo');

Symbol mỗi lần được tạo ra sẽ nhận được giá trị là duy nhất và khác nhau. Ví dụ khi chúng ta so sánh

1
console.log(Symbol() === Symbol()); // false

Chúng ta sẽ thấy hai giá trị Symbol sinh ra là khác nhau.

Kiểu dữ liệu Symbol cho phép chúng ta thêm các giá trị mô tả cho Symbol. Ví dụ anh thêm mô tả là first name cho biến firstName như sau.

1
2
let firstName = Symbol('first name'),
    lastName = Symbol('last name');

Chúng ta có thể lấy giá trị môt tả của Symbol bằng phương thức toString().

1
2
console.log(firstName); // Symbol(first name)
console.log(lastName); // Symbol(last name)

Hàm console.log sẽ gọi phưuong thức toString() của Symbol.

Symbol là kiểu dữ liệu nguyên thuỷ nên chúng ta không sử dụng toán tử new để khai báo Symbol.

1
let s = new Symbol(); // error

2. Mục đích sử dụng symbol

Chúng ta sử dụng Symbol khi chúng ta muốn có một giá trị duy nhất trong hệ thống.

Ví dụ trong đoạn code mình có các kiểu String hoặc Integer mà chứa giá trị duy nhất thì ta nên thay qua bằng cách dùng Symbol. Anh ví dụ như mình có biến status lưu các trạng thái là open, in progress, closed, completed etc. Thì ta sử dụng Symbol như sau

1
2
3
4
5
6
7
8
9
let statuses = {
    OPEN: Symbol('Open'),
    IN_PROGRESS: Symbol('In progress'),
    COMPLETED: Symbol('Completed'),
    HOLD: Symbol('On hold'),
    CANCELED: Symbol('Canceled')
};
// complete a task
task.setStatus(statuses.COMPLETED);

Chúng ta sử dụng Symbol khi muốn thực hiện các tính toán thuộc tính của một đối tượng.

1
2
3
4
5
6
7
let status = Symbol('status');

let task = {
    [status]: statuses.OPEN,
    description: 'Learn ES6 Symbol'
};
console.log(task);

3. Demo Video

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments