javascript迭代器_如何自定义可遍历对象_技术教程

Symbol.iterator 是对象实现迭代器协议的必需方法，必须是返回独立迭代器对象的函数，该对象含 next() 方法并返回 {value, done}；多次调用需返回新迭代器，否则遍历会互相干扰。

什么是 `Symbol.iterator` 方法

一个对象能被 for...of、Array.from()、展开运算符（[...obj]）等消费，前提是它实现了迭代器协议——即拥有一个返回迭代器对象的 Symbol.iterator 方法。这个方法不是可选的装饰，而是硬性入口。

迭代器对象本身必须有 next() 方法，返回形如 { value, done } 的对象。只要没返回 done: true，遍历就会继续。

常见错误：只加了 next 但没挂到 Symbol.iterator 上，或者返回的不是函数（比如写成箭头函数却丢了 this 绑定）。

Symbol.iterator 必须是函数，且不能是箭头函数（否则无法正确绑定内部状态）
多次调用该方法应返回**新的独立迭代器**，否则多个 for...of 同时遍历时会互相干扰
不实现它，for...of 会直接报错 TypeError: xxx is not iterable

手写一个带状态的迭代器（比如倒序遍历数组）

自定义迭代器的关键在于把“当前索引”“是否结束”等状态封装在每次调用 Symbol.iterator 返回的闭包里，而不是存在对象自身上。

const reverseArray = arr => ({
  [Symbol.iterator]() {
    let i = arr.length;
    return {
      next() {
        i--;
        return i >= 0
          ? { value: arr[i], done: false }
          : { value: undefined, done: true };
      }
    };
  }
});
const iter = reverseArray([10, 20, 30]);
for (const x of iter) console.log(x); // 30 → 20 → 10

注意：i 在每次调用 [Symbol.iterator]() 时重置，所以你可以安全地写 for (const a of iter) for (const b of iter)，两个循环互不影响。

别把 i 放在对象顶层（比如 this.i = arr.length），否则第二次遍历会从中间开始
返回 done: true 后，next() 可以继续调用，但必须始终返回 { value: undefined, done: true }
如果想支持提前终止（如 break 或 return），可额外实现 return() 方法，但非必需

用生成器函数简化实现

手写 next() 容易出错，尤其涉及异步或复杂控制流时。生成器函数（function*）天然符合迭代器协议：它本身是可迭代的，且返回的生成器对象自带合规的 next()。

const countdown = (from, to = 0) => ({
  [Symbol.iterator]: function* () {
    for (let i = from; i >= to; i--) {
      yield i;
    }
  }
});
console.log([...countdown(3)]); // [3, 2, 1, 0]

生成器自动处理状态保存、暂停恢复、done 判定，还支持 yield* 委托、throw()、return() 等高级行为。

生成器函数不能是箭头函数（const foo =* () => {} 语法错误）
yield 后面可以跟任意值，包括 Promise（但此时需配合 async function* 和 for await...of）
若需复用逻辑，可把生成器单独抽成函数，再在 [Symbol.iterator] 中调用它

哪些地方容易忽略兼容性或语义细节

看似简单的迭代器，实际在跨环境或与其他 API 配合时容易翻车。

IE 不支持 Symbol，必须用 Babel 转译或提供降级方案（如检查 obj[Symbol.iterator] 存在性再决定是否走迭代路径）
Array.from(obj) 会严格调用 obj[Symbol.iterator]，如果返回的不是对象（比如忘了 return { next: ... }），会抛 TypeError: Iterator result is not an object
Node.js 早期版本对 for await...of 的支持要求目标对象有 [Symbol.asyncIterator]，和同步迭代器无关，别混用
自定义类中定义 [Symbol.iterator]，记得用方法简写语法（[Symbol.iterator]() { ... }），不要写成属性赋值（this[Symbol.iterator] = function() { ... }），后者无法被 for...of 检测到