JavaScript 迭代器与可迭代协议

JavaScript迭代器协议：Symbol.iterator、next(){value,done}、自定义可迭代对象、for...of循环、展开运算符...、解构的底层机制 · 难度：入门 · +10XP

JavaScript 迭代器与可迭代协议 —— for...of 的底层机制

你知道为什么数组可以用for...of遍历，普通对象不行？因为数组实现了可迭代协议（Iterable Protocol）。理解了迭代器，你就能让任何对象支持for...of。

迭代器协议

// 一个迭代器必须有一个 next() 方法，返回 {value, done}
const myIterator = {
  current: 0,
  next() {
    if (this.current < 3) {
      return { value: this.current++, done: false };
    }
    return { value: undefined, done: true };
  }
};
console.log(myIterator.next()); // {value: 0, done: false}
console.log(myIterator.next()); // {value: 1, done: false}

可迭代协议：Symbol.iterator

const range = {
  from: 1, to: 5,
  [Symbol.iterator]() {
    return {
      current: this.from,
      last: this.to,
      next() {
        return this.current <= this.last
          ? { value: this.current++, done: false }
          : { value: undefined, done: true };
      }
    };
  }
};

for (const num of range) { console.log(num); } // 1, 2, 3, 4, 5
console.log([...range]); // [1, 2, 3, 4, 5] 展开运算符也依赖迭代器

动手练习

1. 基础练习：实现一个range迭代器——range(1,10)可被for...of遍历。
2. 进阶应用：实现一个斐波那契数列的无限迭代器（永远done:false），用for...of+break控制。
3. 项目实战：让一个树形结构对象支持for...of深度优先遍历。