Biểu tượng JavaScript

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 decfscription

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 đoạn mã, 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 phần mô tả của nó. Ví dụ,

const x = Symbol('hey');
console.log(x); // Symbol(hey)

Access Decfscription Symbol

Để truy cập vào phần mô tả của một biểu tượng, chúng tôi sử dụng .toán tử. Ví dụ,

const x = Symbol('hey');
console.log(x.decfscription); // 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

: 123 // not “id”: 123 }; console.log(person); // {name: “Jack”, Symbol(id): 123}

Các ký hiệu không được bao gồm trong cho … trong Vòng lặp

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,

: 12 }; // using for…in for (let key in person) { console.log(key); }

Đầu ra

name
age

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 một 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 một 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 khác nhau có sẵn với Biểu tượng.

Method	Decfscription
`for()`	Searches for existing symbols
`keyFor()`	Returns a shared symbol key from the global symbol registry.
`toSource()`	Returns a string containing the source of the Symbol object
`toString()`	Returns a string containing the decfscription of the Symbol
`valueOf()`	Returns the primitive value of the Symbol object.

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

Properties	Decfscription
`asyncIterator`	Returns the default AsyncIterator for an object
`hasInstance`	Determines if a constructor object recognizes an object as its instance
`isConcatSpreadable`	Indicates if an object should be flattened to its array elements
`iterator`	Returns the default iterator for an object
`match`	Matches against a string
`matchAll`	Returns an iterator that yields matches of the regular expression against a string
`replace`	Replaces matched substrings of a string
`search`	Returns the index within a string that matches the regular expression
`split`	Splits a string at the indices that match a regular expression
`species`	Creates derived objects
`toPrimitive`	Converts an object to a primitive value
`toStringTag`	Gives the default decfscription of an object
`decfscription`	Returns a string containing the decfscription of the symbol

Ví dụ: Ví dụ về thuộc tính biểu tượng

const x = Symbol('hey');

// decfscription property
console.log(x.decfscription); // 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]]

Biểu tượng JavaScript