17370845950

迭代器是具有next()方法的对象，每次调用返回{value: ..., done: true|false}；可迭代协议通过[Symbol.iterator]方法使对象支持for...of遍历。

JavaScript 中的迭代器（Iterator）和可迭代协议（Iterable Protocol）是一套配合使用的机制，用来统一数据遍历的方式。简单说：可迭代协议规定“这个对象能不能被 for...of 遍历”，而迭代器定义“怎么一步步把它的值取出来”。

迭代器是什么？

迭代器是一个有 next() 方法的对象，每次调用都返回一个形如 { value: ..., done: true|false } 的对象：

• value 是当前遍历到的值（可以是任意类型）
• done 是布尔值，为 true 表示遍历结束

例如，手动创建一个简单迭代器：

const counter = {
  [Symbol.iterator]() {
    let i = 0;
    return {
      next() {
        if (i < 3) {
          return { value: i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

可迭代协议是怎么回事？

一个对象只要拥有名为 Symbol.iterator 的方法，并且该方法返回一个符合迭代器协议的对象，它就是“可迭代的”。for...of、展开运算符（...）、Array.from() 等语法都会自动调用这个方法。

内置类型如 Array、String、Map、Set 都实现了这个协议，所以能直接用于 for...of。

让自定义对象支持 for...of

只需在对象上定义 [Symbol.iterator]() 方法，返回一个迭代器对象即可。常见写法有三种：

• 返回已有迭代器：比如包装数组，直接 return this.items[Symbol.iterator]();
• 手写 next 逻辑：像上面 counter 示例那样，控制状态并逐步返回值
• 用生成器函数（最简洁）：function* () { yield ... }，引擎自动实现迭代器接口

用生成器改写 counter 示例：

const counter = {
  [Symbol.iterator]: function* () {
    for (let i = 0; i < 3; i++) {
      yield i;
    }
  }
};
// 现在可以这样用了：
for (const n of counter) console.log(n); // 0, 1, 2

注意几个关键点

• Symbol.iterator 必须是函数，不能是箭头函数（否则无法正确绑定 this）
• 迭代器应是“惰性”的：next() 被调用时才计算下一个值
• 多次 for...of 同一个对象，每次应得到独立的迭代器（即每次调用 [Symbol.iterator] 都返回新迭代器），否则可能互相干扰
• 如果 done 为 true 后还继续调用 next()，value 应为 undefined，done 仍为 true

不复杂但容易忽略。