js Symbol类型讲解

Symbol 是 JavaScript 中的一种原始数据类型。它是在 ECMAScript 6 (ES6) 标准中引入的，用于表示独一无二的标识符。每个通过 Symbol() 构造函数创建的 Symbol 值都是唯一的，不会与其他任何值相等。

Symbol 类型的特点如下：

独一无二性：每个 Symbol 值都是唯一的，无法通过简单的值比较相等。
不可变性：Symbol 值一旦创建，就不能被修改。
作为属性键：Symbol 可以作为对象的属性键，用于创建对象的私有属性或隐藏属性，以避免命名冲突。
隐藏性：使用 Symbol 作为属性键，这些属性对于常规的对象遍历和操作是不可见的。

下面是一些 Symbol 的使用场景示例：

1. 创建唯一的属性键：

const id: symbol = Symbol("id");
console.log(id); // 输出: Symbol(id)

const obj = {
  [id]: 123
};
console.log(obj[id]); // 输出: 123

2. 防止属性名冲突：

const firstName = Symbol("firstName");
const person = {
  [firstName]: "John",
  lastName: "Doe"
};
console.log(person[firstName]); // 输出: "John"

3. TypeScript使用 Symbol 值定义类的私有方法或属性：

const _counter = Symbol("counter");

class Counter {
  private [_counter]: number;

  constructor() {
    this[_counter] = 0;
  }

  private increment() {
    this[_counter]++;
  }

  public getCount() {
    this.increment();
    return this[_counter];
  }
}

const counter = new Counter();
console.log(counter.getCount()); // 输出: 1
console.log(counter.getCount()); // 输出: 2

需要注意的是，Symbol 值并不是完全无法访问的，可以使用 Object.getOwnPropertySymbols() 或 Reflect.ownKeys() 来获取对象上的 Symbol 属性。但是对于一般的对象遍历和操作，这些 Symbol 属性是不可见的。

4. 使用Symbol的原型方法，实现一些特殊需求

4.1 Symbol方法有：

Symbol.iterator：表示对象是可迭代的，可以使用 for…of 循环进行迭代。
Symbol.asyncIterator：表示对象是可异步迭代的，可以使用 for await…of 循环进行异步迭代。
Symbol.match：表示对象的正则匹配方法。
Symbol.replace：表示对象的正则替换方法。
Symbol.search：表示对象的正则搜索方法。
Symbol.species：表示对象的构造函数。
Symbol.hasInstance：表示对象是一个构造函数的实例。
Symbol.toPrimitive：表示对象的默认转换方法。

4.2 Symbol.iterator使用场景

const iterator = Symbol.iterator;
const arr = [1, 2, 3];
const iteratorObj = arr[iterator]();

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

4.3 Symbol.asyncIterator使用场景

const asyncIterable = {
  [Symbol.asyncIterator]() {
    let count = 0;
    return {
      async next() {
        if (count < 3) {
          // 模拟异步操作
          await new Promise(resolve => setTimeout(resolve, 1000));
          return { value: count++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

// 使用 for await...of 循环进行异步迭代
(async function() {
  for await (const item of asyncIterable) {
    console.log(item); // 每隔一秒输出：0, 1, 2
  }
})();

4.4 Symbol.hasInstance使用场景

// 自定义的构造函数
function CustomNumber(value) {
  this.value = value;
}

// 在构造函数的原型对象上定义 Symbol.hasInstance 方法
Object.defineProperty(CustomNumber, Symbol.hasInstance, {
  value: function(instance) {
    return typeof instance.value === 'number';
  }
});

// 创建实例
const numberObj = new CustomNumber(42);

// 使用 instanceof 运算符检查实例
console.log(numberObj instanceof CustomNumber); // 输出: true
console.log(numberObj instanceof Object); // 输出: true
console.log(numberObj instanceof Array); // 输出: false
console.log(numberObj instanceof Date); // 输出: false

4.5 Symbol.toPrimitive讲解

Symbol.toPrimitive 是一个内置的 Symbol 值，在对象上定义该方法可以自定义对象在进行类型转换时的行为。它可以影响对象被转换为原始类型（如字符串、数字、布尔值）时的结果。

下面是一个使用 Symbol.toPrimitive 的示例，展示了它的使用场景：

const customObject = {
  value: 42,
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return this.value;
    }
    if (hint === 'string') {
      return `Custom Object with value: ${this.value}`;
    }
    return true;
  }
};

console.log(Number(customObject)); // 输出: 42
console.log(String(customObject)); // 输出: "Custom Object with value: 42"
console.log(Boolean(customObject)); // 输出: true

在上面的示例中，我们定义了一个名为 customObject 的对象，并在其上定义了 Symbol.toPrimitive 方法。在该方法内部，我们根据传入的 hint 参数的值，返回不同的结果。

当进行 Number(customObject) 类型转换时，hint 的值为 'number'，我们返回 customObject 对象的 value 属性，即 42。

当进行 String(customObject) 类型转换时，hint 的值为 'string'，我们返回一个字符串，描述了 customObject 对象的值。

当进行 Boolean(customObject) 类型转换时，hint 的值为 'default'，我们返回一个布尔值 true。

通过在对象上定义 Symbol.toPrimitive 方法，我们可以自定义对象在进行类型转换时的结果。这在需要控制对象的转换行为以适应特定的上下文或需求时非常有用。例如，可以根据对象的内部状态或其他条件来确定转换的结果，从而实现更灵活的类型转换逻辑。

4.7 Symbol.species的使用场景

Symbol.species 是一个内置的 Symbol 值，在对象上定义该属性可以影响该对象在执行衍生对象操作时的行为。它用于指定一个构造函数作为衍生对象的创建者。

下面是一个使用 Symbol.species 的示例，展示了它的使用场景：

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const myArray = new MyArray(1, 2, 3);
const newArray = myArray.map(x => x * 2);

console.log(newArray instanceof MyArray); // 输出: false
console.log(newArray instanceof Array); // 输出: true

在上面的示例中，我们定义了一个名为 MyArray 的类，它继承自内置的 Array 类。在 MyArray 类的静态方法 [Symbol.species] 中，我们指定了返回 Array 构造函数，即 Array 本身。

然后，我们创建了一个 myArray 实例，包含了元素 1、2 和 3。接着，我们调用 map 方法对 myArray 进行映射操作，将每个元素乘以 2。由于 map 方法返回的是一个衍生对象，根据 Symbol.species 的定义，该衍生对象将使用 [Symbol.species] 指定的构造函数进行创建。

结果是，新的衍生数组 newArray 不再是 MyArray 类的实例，而是 Array 类的实例。这是因为我们在 MyArray 类中通过 Symbol.species 指定了衍生对象使用 Array 构造函数进行创建。

通过定义 Symbol.species 属性，我们可以影响类的衍生对象的创建方式。这在需要创建与原始对象类型不同的衍生对象时非常有用，例如在实现类的继承和衍生时，希望衍生对象使用不同的构造函数来创建。

4.7 Symbol.replace的使用场景

Symbol.replace 是一个内置的 Symbol 值，用于表示对象的正则替换方法。它可以影响对象在进行正则替换时的行为。

下面是一个使用 Symbol.replace 的示例，展示了它的使用场景：

const customString = {
  value: 'Hello, World!',
  [Symbol.replace](regex, replacement) {
    return this.value.replace(regex, replacement);
  }
};

const result = customString.replace(/Hello/, 'Hi');
console.log(result); // 输出: "Hi, World!"

在上面的示例中，我们定义了一个名为 customString 的对象，并在其上定义了 Symbol.replace 方法。在该方法内部，我们使用对象的 value 属性调用原生的 replace 方法，对传入的正则表达式和替换字符串进行替换操作。

然后，我们调用 customString.replace(/Hello/, 'Hi') 进行正则替换。由于我们在 customString 对象上定义了 Symbol.replace 方法，该方法会被调用，并返回替换后的结果。最终，result 的值为 "Hi, World!"。

通过在对象上定义 Symbol.replace 方法，我们可以自定义对象在进行正则替换时的行为。这在需要控制替换逻辑以适应特定的需求或执行自定义的替换算法时非常有用。

总结

Symbol因为其唯一性，常用于创建对象的私有熟悉，或者隐藏属性。
Symbol提供了一些内置的 Symbol 值，用于表示语言内部的操作和行为,如Symbol.iterator创建一个迭代器。
Sysbol提供了很多内置方法来代替默认是方法，如Symbol.toPrimitive自定义实现内置的Number、String、Boolean方法;Symbol.species自定义instanceof;Symbol.replace自定义实现replace方法。

365学习不打烊，可以关注我的公众号：程序员每日三问。每天向你推送面试题，算法及干货，期待你的点赞和关注。

原文链接：https://juejin.cn/post/7247451971945693244 作者：伊泽瑞尔