深入剖析 JavaScript ES6 Symbol：开启独一无二之门

2023-11-12 05:36:00

揭开 Symbol 的神秘面纱

Symbol，一个神秘而强大的新成员，加入了 JavaScript 的原生数据类型家族。它能为我们创造独一无二的值，避免属性或值的冲突和命名冲突，确保数据的安全性。与其他原始类型（如字符串、数字和布尔值）不同，Symbol 值总是唯一的，即使它们的内容相同。

一睹 Symbol 的真容

要创建一个 Symbol，可以使用 Symbol() 函数或 Symbol(description) 函数。description 是一个可选的参数，用于提供对 Symbol 的，但它不会影响 Symbol 的值。

const symbol1 = Symbol();
const symbol2 = Symbol('My unique symbol');

Symbol 值总是唯一的，即使它们的内容相同。这是因为 Symbol 值是由 JavaScript 引擎生成的，而不是由我们自己定义的。

console.log(symbol1 === symbol2); // false

Symbol 值可以作为对象属性或值来使用。

const myObject = {
  [symbol1]: 'Hello',
  [symbol2]: 'World'
};

揭秘 Symbol 的属性

Symbol 有两个属性：description 和 toString。description 属性返回 Symbol 的，toString 属性返回 Symbol 的字符串表示。

console.log(symbol1.description); // undefined
console.log(symbol2.description); // 'My unique symbol'
console.log(symbol1.toString()); // 'Symbol()'
console.log(symbol2.toString()); // 'Symbol(My unique symbol)'

掌握 Symbol 的方法

Symbol 有一个方法：valueOf。valueOf 方法返回 Symbol 的原始值。

console.log(symbol1.valueOf()); // Symbol()
console.log(symbol2.valueOf()); // Symbol(My unique symbol)

巧用 Symbol 的用法

Symbol 可以用作对象属性或值来防止属性或值的冲突和命名冲突。

const myObject = {
  [symbol1]: 'Hello',
  [symbol2]: 'World'
};

console.log(myObject[symbol1]); // 'Hello'
console.log(myObject[symbol2]); // 'World'

Symbol 还可以用于创建私有属性。私有属性是只能在定义它们的类或对象中访问的属性。

class MyClass {
  #privateSymbol = Symbol();

  constructor() {
    this.#privateSymbol = 'Hello';
  }

  getPrivateSymbol() {
    return this.#privateSymbol;
  }
}

const myClass = new MyClass();

console.log(myClass.#privateSymbol); // TypeError: Private field '#privateSymbol' must be declared in an enclosing class
console.log(myClass.getPrivateSymbol()); // 'Hello'

Symbol 还可以用于创建迭代器。迭代器是一个对象，它可以提供一个序列的值，一次一个。

const mySymbolIterator = Symbol.iterator;

const myArray = [1, 2, 3];

const myArrayIterator = myArray[mySymbolIterator]();

console.log(myArrayIterator.next()); // { value: 1, done: false }
console.log(myArrayIterator.next()); // { value: 2, done: false }
console.log(myArrayIterator.next()); // { value: 3, done: false }
console.log(myArrayIterator.next()); // { value: undefined, done: true }

遍历 Symbol 对象

Symbol 对象是 Symbol 值的集合。可以使用 Symbol.iterator 方法来遍历 Symbol 对象。

const mySymbolObject = {
  [symbol1]: 'Hello',
  [symbol2]: 'World'
};

const mySymbolObjectIterator = mySymbolObject[Symbol.iterator]();

console.log(mySymbolObjectIterator.next()); // { value: Symbol(Symbol.iterator), done: false }
console.log(mySymbolObjectIterator.next()); // { value: Symbol(), done: false }
console.log(mySymbolObjectIterator.next()); // { value: Symbol(My unique symbol), done: false }
console.log(mySymbolObjectIterator.next()); // { value: undefined, done: true }