深入理解JavaScript_迭代协议

可迭代协议要求对象实现[Symbol.iterator]方法，返回遵循迭代器协议的迭代器对象，后者通过next()方法返回{value, done}形式的结果，从而支持for...of、扩展运算符等语法。

在JavaScript中，迭代协议并不是一个具体的内置对象或类，而是一套规范，用来定义如何遍历数据结构中的元素。它由两个核心部分组成：可迭代协议（Iterable Protocol）和迭代器协议（Iterator Protocol）。理解这两个协议，有助于我们更好地使用 for...of 循环、展开运算符（...）、Array.from() 等语言特性，并能自定义支持遍历的对象。

可迭代协议（Iterable Protocol）

一个对象如果实现了 [Symbol.iterator] 方法，就被认为是“可迭代的”。这个方法必须返回一个迭代器对象，也就是遵循迭代器协议的对象。很多内置类型天然支持该协议，比如：

• 数组（Array）
• 字符串（String）
• Map 和 Set
• arguments 对象
• NodeList 等 DOM 集合（部分环境）

你可以通过检测对象是否含有 [Symbol.iterator] 方法来判断其是否可迭代：

[1, 2, 3][Symbol.iterator] // ƒ values() { [native code] }
'hello'[Symbol.iterator] // ƒ [Symbol.iterator]() { [native code] }
123[Symbol.iterator] // undefined

这意味着数字 123 不可迭代，因此不能用于 for...of 中。

迭代器协议（Iterator Protocol）

迭代器协议定义了一个标准方式来产生一系列值（有限或无限），并可能在结束后返回一个返回值。一个迭代器是一个对象，它实现了 next() 方法，该方法返回一个格式为：

{ value: any, done: boolean }

其中：

• value 是当前步骤的值（当 done 为 true 且无返回值时可省略）
• done 是布尔值，表示迭代是否完成

当 done 为 true 时，表示迭代结束；为 false 时表示还有更多值待返回。

下面是一个手动创建迭代器的例子：

const createCounter = () => ({
  [Symbol.iterator]() {
    let current = 1;
    return {
      next() {
        if (current           return { value: current++, done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
});

这个对象是可迭代的，可以这样使用：

for (const num of createCounter()) {
  console.log(num); // 输出 1, 2, 3
}

生成器函数：简化迭代器创建

手动实现 next() 和状态管理比较繁琐。ES6 引入了生成器函数（Generator Function），用 function* 定义，内部使用 yield 返回值，能自动返回符合迭代器协议的对象。

function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }

生成器函数返回的对象既是可迭代的，也是迭代器本身（即实现了 next 方法并返回 {value, done} 格式），非常方便。

实际应用场景

理解迭代协议能帮助我们写出更灵活的代码。例如：

• 封装自定义集合类，使其能被 for...of 遍历
• 构建惰性求值序列（如无限流）
• 组合多个数据源进行统一迭代
• 与异步操作结合（通过 async/await 和异步迭代器）

比如，我们可以让一个树结构支持遍历：

class TreeNode {
  constructor(value, children = []) {
    this.value = value;
    this.children = children;
  }

  [Symbol.iterator]() {
    yield this.value;
    for (const child of this.children) {
      yield child;
    }
  }
}

这样就能递归地遍历整棵树：

const tree = new TreeNode(1, [
  new TreeNode(2),
  new TreeNode(3, [new TreeNode(4)])
]);

for (const val of tree) {
  console.log(val); // 1, 2, 3, 4
}

基本上就这些。掌握迭代协议，能让你更深入理解JavaScript中“可遍历”的本质，不再局限于数组和循环语法糖。不复杂但容易忽略。