JavaScript 中 Symbol 和 Iterator 的用法？

推荐答案

Symbol 的用法

Symbol 是 JavaScript 中的一种原始数据类型，用于创建唯一的标识符。每个 Symbol 值都是唯一的，即使它们的描述相同。

const symbol1 = Symbol('description');
const symbol2 = Symbol('description');

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

Symbol 通常用于对象属性的键，以避免属性名冲突。

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

console.log(obj[Symbol('key')]); // undefined

Iterator 的用法

Iterator 是一种接口，它为不同的数据结构提供了一种统一的遍历机制。任何实现了 [Symbol.iterator] 方法的对象都可以被迭代。

// www.javascriptcn.com code example
const iterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 3) {
          return { value: step, done: false };
        }
        return { done: true };
      }
    };
  }
};

for (const value of iterable) {
  console.log(value); // 1, 2, 3
}

本题详细解读

Symbol 的详细解读

1. 唯一性：每个 Symbol 值都是唯一的，即使它们的描述相同。这使得 Symbol 非常适合用作对象属性的键，以避免属性名冲突。
2. 不可枚举：Symbol 属性不会出现在 for...in 循环中，也不会被 Object.keys() 或 Object.getOwnPropertyNames() 返回。可以使用 Object.getOwnPropertySymbols() 来获取对象的 Symbol 属性。
3. 全局 Symbol 注册表：可以使用 Symbol.for() 和 Symbol.keyFor() 来创建和检索全局 Symbol。

const globalSymbol = Symbol.for('global');
console.log(Symbol.keyFor(globalSymbol)); // 'global'

Iterator 的详细解读

1. 迭代协议：Iterator 协议要求对象实现一个 [Symbol.iterator] 方法，该方法返回一个迭代器对象。迭代器对象必须实现 next() 方法，该方法返回一个包含 value 和 done 属性的对象。
2. 可迭代对象：任何实现了 [Symbol.iterator] 方法的对象都是可迭代的。常见的可迭代对象包括数组、字符串、Map、Set 等。
3. 内置迭代器：JavaScript 提供了许多内置的迭代器，如 Array.prototype[Symbol.iterator]、String.prototype[Symbol.iterator] 等。

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

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

1. 自定义迭代器：可以通过实现 [Symbol.iterator] 方法来创建自定义的迭代器，从而控制对象的遍历行为。

// www.javascriptcn.com code example
const customIterable = {
  data: [10, 20, 30],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        }
        return { done: true };
      }
    };
  }
};

for (const value of customIterable) {
  console.log(value); // 10, 20, 30
}