通俗解释ES6：Iterator遍历器的核心概念-程序员充电站

从“如何遍历”到“能被遍历”：深入理解 ES6 中的 Iterator 机制

你有没有想过，为什么 JavaScript 中的数组可以用for...of遍历，字符串也可以，连Set和Map甚至函数内的arguments都能轻松地被展开或循环？而你自己写的一个对象却不行？

const arr = [1, 2, 3]; for (const item of arr) { console.log(item); // 正常输出 1, 2, 3 } const obj = { a: 1, b: 2 }; // for (const item of obj) // 报错！obj is not iterable

这背后其实有一套统一的规则在起作用——这就是ES6 引入的 Iterator（遍历器）机制。它不是某个具体的数据结构，而是一种“行为协议”，决定了一个东西“能不能被遍历”以及“怎么被遍历”。

一、问题驱动：为什么需要 Iterator？

在 ES6 之前，JavaScript 的遍历方式五花八门：

数组用for (let i = 0; i < arr.length; i++)
对象属性用for...in
类数组对象（如arguments）还得借用Array.prototype.forEach.call()
自定义结构？抱歉，得自己实现一套逻辑

这些方式各有各的语义和限制，缺乏统一性。更麻烦的是，如果你想让别人用熟悉的语法来操作你的数据类型（比如一棵树、一个懒加载队列），就必须手动模拟整个流程。

于是，ES6 提出了一个核心思想：

把“遍历的能力”从数据结构中剥离出来，变成一种可复用的标准接口。

这个接口就是Iterator 模式。

二、Iterator 是什么？一个简单的协议

我们先不谈复杂概念，来看最本质的一点：Iterator 其实就是一个有next()方法的对象。

每次调用next()，返回一个形如{ value: ..., done: boolean }的结果。

value：当前拿到的值；
done：是否已经遍历完了。

就这么简单。

动手实现一个计数器迭代器

function createCounter(max) { let current = 0; return { next() { if (current < max) { return { value: current++, done: false }; } else { return { value: undefined, done: true }; } } }; }

使用它：

const counter = createCounter(3); console.log(counter.next()); // { value: 0, done: false } console.log(counter.next()); // { value: 1, done: false } console.log(counter.next()); // { value: 2, done: false } console.log(counter.next()); // { value: undefined, done: true }

看到没？这个对象就是一个标准的iterator。它符合规范，能一步步往外“吐”值，直到结束。

但注意：你现在还不能对它使用for...of—— 因为它只是个 iterator，还不是“可迭代对象”。

三、可迭代协议：让对象“能被遍历”

刚才那个counter虽然本身是 iterator，但它不能直接放进for...of里用。因为 JS 不知道“怎么开始遍历它”。

要解决这个问题，就需要另一个协议：可迭代协议（Iterable Protocol）。

它的规则只有一条：

如果一个对象有一个方法，名叫Symbol.iterator，并且这个方法返回一个 iterator，那它就是“可迭代的”。

也就是说，“可迭代对象” ≠ “迭代器”，而是“能生成迭代器的东西”。

让 Range 成为可迭代对象

举个例子，我们做一个范围类Range(1, 5)，表示从 1 到 4 的整数序列。

class Range { constructor(start, end) { this.start = start; this.end = end; } [Symbol.iterator]() { let current = this.start; const end = this.end; return { next() { if (current < end) { return { value: current++, done: false }; } else { return { value: undefined, done: true }; } } }; } }

现在试试看：

const range = new Range(1, 5); for (const n of range) { console.log(n); // 输出 1, 2, 3, 4 } const arr = [...range]; // [1, 2, 3, 4]

成功了！Range现在可以像数组一样被for...of和扩展运算符使用。

关键就在于这一行：

[Symbol.iterator]() { ... }

这是 JS 的“魔法入口”。当你写for...of someObj时，引擎会自动查找someObj[Symbol.iterator]()并调用它，拿到 iterator 后再反复执行next()。

四、Generator：让创建迭代器变得极其简单

上面的例子虽然清晰，但代码有点啰嗦。尤其是状态管理（current变量）容易出错。

ES6 还提供了一个更强大的工具：Generator 函数。

它本质上是一个“能暂停的函数”，配合yield使用，天然返回一个符合 Iterator 接口的对象。

用 Generator 改写 ID 生成器

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

调用它：

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

而且它自己就实现了Symbol.iterator：

gen[Symbol.iterator]() === gen; // true → 它自己就是可迭代的

所以可以直接用于for...of：

for (const id of idGenerator()) { if (id > 5) break; console.log('ID:', id); // 输出 1 到 5 }

是不是简洁太多了？不需要手动维护next()和状态判断，yield就像一个“产出点”，每走到这里就暂停并返回值。

五、实际应用场景：Iterator 不只是用来循环

别以为 Iterator 只是为了替代for循环。它的真正威力在于抽象遍历过程，适用于很多高级场景。

场景 1：遍历树结构（中序遍历）

假设你有一棵二叉树，想让用户用for...of直接遍历所有节点值。

class TreeNode { constructor(value, left = null, right = null) { this.value = value; this.left = left; this.right = right; } *[Symbol.iterator]() { if (this.left) yield* this.left; yield this.value; if (this.right) yield* this.right; } }

解释一下：

yield*表示“委托给另一个可迭代对象”；
左子树如果是TreeNode，也实现了[Symbol.iterator]，就能递归展开；
最终效果是按中序顺序依次产出每个节点的值。

使用起来就像普通数组一样自然：

const root = new TreeNode( 2, new TreeNode(1), new TreeNode(3) ); for (const val of root) { console.log(val); // 输出 1, 2, 3 }

完全隐藏了内部结构的复杂性。

场景 2：处理大数据流或懒加载资源

想象你要读取一个超大文件，或者分页获取远程数据。如果一次性加载进内存，可能会崩溃。

这时可以用 Iterator 实现“按需加载”：

function* paginatedUsers(pageSize = 10) { let page = 1; while (true) { const response = await fetch(`/api/users?page=${page}&size=${pageSize}`); const users = await response.json(); if (users.length === 0) break; for (const user of users) { yield user; // 每次只返回一个用户 } page++; } }

等等……这不行！Generator 函数内部不能用await！

别急，ES2018 提供了异步迭代器（Async Iterator），支持for await...of。

改写如下：

async function* asyncPaginatedUsers(pageSize = 10) { let page = 1; while (true) { const response = await fetch(`/api/users?page=${page}&size=${pageSize}`); const users = await response.json(); if (users.length === 0) break; for (const user of users) { yield user; } page++; } }

然后这样使用：

for await (const user of asyncPaginatedUsers()) { console.log(user.name); }

这就是现代前端处理无限滚动、日志流、WebSocket 数据的基础模型之一。

六、设计建议与常见坑点

✅ 好实践

每次[Symbol.iterator]()应返回新实例
js [Symbol.iterator]() { let current = this.start; return { /* 返回新的 next 函数 */ }; }
避免多个遍历共享状态导致混乱。
无限迭代器记得加退出条件
js for (const x of infiniteGen()) { if (x > 100) break; // 必须手动中断 }
优先使用 Generator 创建 iterator
写法更清晰，不易出错，还能结合try...catch处理异常。

❌ 常见误区

错误做法	问题说明
在普通对象上直接加`next()`	它不是可迭代对象，无法用于`for...of`
`Symbol.iterator`返回固定对象	多次遍历时状态共享，第二次可能为空
Generator 中混用`yield`和`return`不当	`return`会提前终结迭代

七、总结：Iterator 到底带来了什么？

回到最初的问题：Iterator 的意义是什么？

我们可以这样理解：

以前	现在
数据结构决定怎么遍历	遍历方式由协议决定
每种结构各搞一套 API	所有结构共用一套语法
用户关心“怎么取下一个”	用户只关心“拿到下一个”

Iterator 把“如何遍历”的细节封装起来，对外暴露统一的消费接口。

它是现代 JavaScript 中许多特性的基石：