Trong hướng dẫn này, bạn sẽ tìm hiểu về JavaScript Symbol với sự trợ giúp của các ví dụ.
Biểu tượng JavaScript
JavaScript ES6 đã giới thiệu một kiểu dữ liệu nguyên thủy mới được gọi là Symbol. Các ký hiệu là bất biến (không thể thay đổi) và là duy nhất. Ví dụ,
// two symbols with the same description const value1 = Symbol('hello'); const value2 = Symbol('hello'); console.log(value1 === value2); // false
Mặc dù value1 và value2 đều chứa cùng một mô tả nhưng chúng khác nhau.
Tạo biểu tượng
Bạn sử dụng Symbol()hàm để tạo một Symbol. Ví dụ,
// creating symbol const x = Symbol() typeof x; // symbol
Bạn có thể chuyển một chuỗi tùy chọn làm mô tả của nó. Ví dụ,
const x = Symbol('hey'); console.log(x); // Symbol(hey)
Mô tả Biểu tượng Truy cập
Để truy cập mô tả của một ký hiệu, chúng tôi sử dụng .toán tử. Ví dụ,
const x = Symbol('hey'); console.log(x.description); // hey
Thêm biểu tượng làm khóa đối tượng
Bạn có thể thêm các ký hiệu làm khóa trong một đối tượng bằng cách sử dụng dấu ngoặc vuông (). Ví dụ,
let id = Symbol("id"); let person = ( name: "Jack", // adding symbol as a key (id): 123 // not "id": 123 ); console.log(person); // (name: "Jack", Symbol(id): 123)
Các ký hiệu không được đưa vào cho… in Loop
Các for… invòng lặp không thực hiện lặp qua các thuộc tính tượng trưng. Ví dụ,
let id = Symbol("id"); let person = ( name: "Jack", age: 25, (id): 12 ); // using for… in for (let key in person) ( console.log(key); )
Đầu ra
tên tuổi
Lợi ích của việc sử dụng các biểu tượng trong đối tượng
Nếu cùng một đoạn mã được sử dụng trong các chương trình khác nhau, thì tốt hơn nên sử dụng Symbolstrong khóa đối tượng. Đó là vì bạn có thể sử dụng cùng một tên khóa trong các mã khác nhau và tránh các vấn đề trùng lặp. Ví dụ,
let person = ( name: "Jack" ); // creating Symbol let id = Symbol("id"); // adding symbol as a key person(id) = 12;
Trong chương trình trên, nếu personđối tượng cũng được sử dụng bởi chương trình khác, thì bạn sẽ không muốn thêm một thuộc tính mà chương trình khác có thể truy cập hoặc thay đổi. Do đó bằng cách sử dụng Symbol, bạn tạo ra một thuộc tính duy nhất mà bạn có thể sử dụng.
Bây giờ, nếu chương trình khác cũng cần sử dụng thuộc tính có tên id , chỉ cần thêm Biểu tượng có tên idvà sẽ không có vấn đề trùng lặp. Ví dụ,
let person = ( name: "Jack" ); let id = Symbol("id"); person(id) = "Another value";
Trong chương trình trên, ngay cả khi cùng một tên được sử dụng để lưu trữ các giá trị, Symbolkiểu dữ liệu sẽ có một giá trị duy nhất.
Trong chương trình trên, nếu khóa chuỗi được sử dụng, thì chương trình sau đó sẽ thay đổi giá trị của thuộc tính. Ví dụ,
let person = ( name: "Jack" ); // using string as key person.id = 12; console.log(person.id); // 12 // Another program overwrites value person.id = 'Another value'; console.log(person.id); // Another value
Trong chương trình trên, user.idgiá trị thứ hai ghi đè lên giá trị trước đó.
Phương pháp ký hiệu
Có nhiều phương pháp có sẵn với Symbol.
| phương pháp | Sự miêu tả |
|---|---|
for() | Tìm kiếm các ký hiệu hiện có |
keyFor() | Trả về khóa biểu tượng được chia sẻ từ sổ đăng ký biểu tượng chung. |
toSource() | Trả về một chuỗi chứa nguồn của đối tượng Symbol |
toString() | Trả về một chuỗi chứa mô tả của Biểu tượng |
valueOf() | Trả về giá trị ban đầu của đối tượng Symbol. |
Ví dụ: Phương pháp ký hiệu
// get symbol by name let sym = Symbol.for('hello'); let sym1 = Symbol.for('id'); // get name by symbol console.log( Symbol.keyFor(sym) ); // hello console.log( Symbol.keyFor(sym1) ); // id
Thuộc tính biểu tượng
| Tính chất | Sự miêu tả |
|---|---|
asyncIterator | Trả về AsyncIterator mặc định cho một đối tượng |
hasInstance | Xác định xem một đối tượng phương thức khởi tạo có nhận ra một đối tượng là thể hiện của nó hay không |
isConcatSpreadable | Cho biết liệu một đối tượng có nên được làm phẳng thành các phần tử mảng của nó hay không |
iterator | Trả về trình lặp mặc định cho một đối tượng |
match | Đối sánh với một chuỗi |
matchAll | Trả về một trình lặp mang lại các kết quả phù hợp của biểu thức chính quy với một chuỗi |
replace | Thay thế các chuỗi con phù hợp của một chuỗi |
search | Trả về chỉ mục trong một chuỗi khớp với biểu thức chính quy |
split | Tách một chuỗi tại các chỉ số khớp với một biểu thức chính quy |
species | Tạo các đối tượng có nguồn gốc |
toPrimitive | Chuyển đổi một đối tượng thành một giá trị nguyên thủy |
toStringTag | Cung cấp mô tả mặc định của một đối tượng |
description | Trả về một chuỗi có chứa mô tả của biểu tượng |
Ví dụ: Ví dụ về thuộc tính biểu tượng
const x = Symbol('hey'); // description property console.log(x.description); // hey const stringArray = ('a', 'b', 'c'); const numberArray = (1, 2, 3); // isConcatSpreadable property numberArray(Symbol.isConcatSpreadable) = false; let result = stringArray.concat(numberArray); console.log(result); // ("a", "b", "c", (1, 2, 3))
