Detailed explanation of the characteristics and usage of symbol in JS

Symbol features are as follows:

• Uniqueness: Each Symbol value created by the Symbol function is unique, and even Symbols created by the same descriptor are not equal.

const symbol1 = Symbol('symbol');
const symbol2 = Symbol('symbol');
(symbol1 === symbol2); // false

In the above example, althoughsymbol1andsymbol2Use the same descriptor'symbol'Created, but they are unequal Symbol values.

• Used as object attribute name: The Symbol value can be used as object attribute names. Since each Symbol value is unique, the risk of attribute name conflicts can be prevented.

const symbolKey = Symbol('key');
const obj = {};
obj[symbolKey] = 'value';
(obj[symbolKey]); // value

In the above example, we use the Symbol value as the objectobjThe attribute name ensures the uniqueness of the attribute name.

• Attribute traversal: The Symbol property is not enumerable by default and will not appear in regular object traversal methods (such asfor...in、()、()、())middle. This can be used to hide some internal implementation details or metadata, making it invisible when it traversing object properties.

const symbolKey = Symbol('key');
const obj = {
  [symbolKey]: 'value',
  regularProperty: 'regular value'
};
for (let key in obj) {
  (key); // regularProperty
}
((obj)); // ['regularProperty']

In the above example, a property is defined using Symbol[symbolKey], it will not be retrieved when it traversing the object properties.

• Predefined Symbol values: JavaScript provides some predefined Symbol values ​​to represent special behavior or metadata inside the language. Some of these common predefined Symbol values ​​include:

  • : The default iterator method used to define an object.
  • : Used to customize objects in call()return string marker.
  • : Used to specify the constructor that the constructor should use when creating a derived object.

  These predefined Symbol values ​​can be used in custom objects or classes to change their behavior or provide additional metadata.

class MyArray extends Array {
  static get []() {
    return Array;
  }
}
const arr = new MyArray(1, 2, 3);
const slicedArr = (1, 2);
(slicedArr instanceof MyArray); // false
(slicedArr instanceof Array); // true

In the above example, by custom classMyArrayand overwrite predefined, we specify that the constructor returned when performing slicing an array should beArray, notMyArray. This changes the behavior of the array slicing operation, causing it to return a standard array object.

Symbol provides a powerful mechanism to extend the behavior and functionality of JavaScript objects, allowing us to more flexibly manipulate and control the properties, traversal methods and special behaviors of objects. However, due to the unique nature of Symbol and certain specific use scenarios, it is necessary to understand its uses and limitations to avoid abuse.

This is the end of this article about the detailed explanation of the characteristics and usage of symbols in JS. For more related JS symbol content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!