深度剖析ES6语法：Iterator遍历器工作原理

深度剖析 ES6 遍历器：从for...of到自定义迭代的底层逻辑

你有没有想过，为什么 JavaScript 中数组可以用for...of遍历，而普通对象却不行？
为什么像Map、Set甚至字符串都能被展开运算符...处理？
这背后其实隐藏着一个统一的机制——Iterator（遍历器）。

在 ES6 之前，我们处理集合数据时总是“各搞一套”：数组用for (i = 0; i < len; ++i)，类数组靠Array.prototype.slice.call()勉强转成数组，自定义结构更是只能手动写循环。这种碎片化的访问方式不仅重复、易错，还严重缺乏扩展性。

ES6 的Iterator 协议正是为了解决这个问题而生。它不是某个具体的 API，而是一种设计标准：只要一个对象遵循这个标准，就能被for...of、解构赋值、扩展符等现代语法无缝支持。

Iterator 是什么？别被术语吓到

简单说，Iterator 就是一个能“一步步吐出值”的对象。
它长这样：

const iterator = { next() { return { value: '当前值', done: false }; } };

关键就在next()方法返回的对象：
-value：当前步的结果；
-done：布尔值，表示是否走到了尽头。

当done: true时，引擎就知道“该收工了”。

但光有迭代器还不够——你怎么知道哪个对象能被遍历？这就引出了另一个核心概念：可迭代协议（Iterable Protocol）。

可迭代对象：会“交出迭代器”的对象

如果一个对象身上有个叫[Symbol.iterator]的方法，并且调用它能返回一个合法的迭代器，那它就是“可迭代的”。

比如数组：

const arr = [1, 2, 3]; arr[Symbol.iterator]; // ✅ 存在，是一个函数

你可以手动触发整个流程：

const iter = arr[Symbol.iterator](); iter.next(); // { value: 1, done: false } iter.next(); // { value: 2, done: false } iter.next(); // { value: 3, done: false } iter.next(); // { value: undefined, done: true }

看到没？for...of干的事，本质上就是这一套流程的自动化封装。

为什么需要这套机制？传统循环到底哪里不够用？

我们先来看一段典型的“老派代码”：

// ❌ 糟糕的做法：依赖索引和 length for (let i = 0; i < collection.length; i++) { console.log(collection[i]); }

问题很明显：
- 必须知道内部结构是“按索引存储”；
- 如果collection是Set或Map，这套逻辑直接失效；
- 容易越界、忘记判断null/undefined；
- 无法优雅处理无限序列或流式数据。

而使用 Iterator 后，代码变成：

// ✅ 干净利落：只关心“能不能取下一个” for (const item of collection) { console.log(item); }

无论collection是数组、Set、Generator 还是你自己写的类，只要它是可迭代的，这段代码就成立。

这就是抽象的力量：把“如何获取下一个元素”的细节交给数据结构自己去实现，上层代码只需关注业务逻辑。

动手实现一个遍历器：理解比背诵更重要

理论讲完，来点实战。我们从零开始构建一个可迭代对象。

示例1：给普通对象加上遍历能力

假设我们有一个伪数组：

const fakeArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

它长得像数组，但不能用for...of。怎么让它支持？

很简单，加个[Symbol.iterator]方法就行：

fakeArray[Symbol.iterator] = function () { let index = 0; const self = this; return { next() { if (index < self.length) { return { value: self[index++], done: false }; } else { return { done: true }; } } }; }; // 现在可以用了！ console.log([...fakeArray]); // ['a', 'b', 'c'] for (const x of fakeArray) console.log(x); // a b c

注意这里的关键点：
-next()是闭包，捕获了index和this；
- 每次调用fakeArray[Symbol.iterator]()都返回新的迭代器实例，避免状态共享；
- 最后必须返回{ done: true }，否则for...of会陷入死循环。

示例2：生成无限自然数序列

Iterator 的真正威力，在于它可以做到惰性求值（Lazy Evaluation）——你不问，我就不算。

function createNaturalNumbers() { let n = 0; return { [Symbol.iterator]() { return this; // this 就是个合法迭代器 }, next() { return { value: n++, done: false }; } }; } const naturals = createNaturalNumbers(); // 取前5个 for (const num of naturals) { if (num >= 5) break; console.log(num); // 0 1 2 3 4 }

虽然理论上这是个无限序列，但由于每次next()只计算一个值，内存占用恒定。这种模式非常适合处理大数据流、动画帧更新、事件监听等场景。

💡 提示：实际开发中，这类功能更推荐用 Generator 函数实现，语法更简洁：

js function* naturals() { let n = 0; while (true) yield n++; }

示例3：快速判断一个对象能否被遍历

有时候你需要写工具函数，得先确认传入的数据是否支持迭代：

function isIterable(obj) { return obj != null && typeof obj[Symbol.iterator] === 'function'; } isIterable([1, 2, 3]); // true isIterable('hello'); // true isIterable(new Set()); // true isIterable({}); // false isIterable(null); // false

这个小函数在库开发中非常实用，比如你的toArray()工具就可以这样写：

function toArray(value) { if (Array.isArray(value)) return value; if (isIterable(value)) return Array.from(value); return [value]; }

原生哪些类型支持遍历？别再手动封装了！

好消息是，大多数常用类型已经内置了[Symbol.iterator]：

所以，以下这些操作你现在都可以放心用了：

// 字符串遍历 [...'hello']; // ['h', 'e', 'l', 'l', 'o'] // Map 解构 const map = new Map([['a', 1], ['b', 2]]); for (const [k, v] of map) { /* k='a', v=1 ... */ } // NodeList 处理 for (const el of document.querySelectorAll('.item')) { el.classList.add('active'); }

for...of到底做了什么？拆开看看

你以为for...of很神奇？其实它只是语法糖。下面两段代码完全等价：

// 写法一：高级语法 for (const x of [1, 2, 3]) { console.log(x); } // 写法二：手动模拟执行过程 const iterable = [1, 2, 3]; const iterator = iterable[Symbol.iterator](); let result; while (!(result = iterator.next()).done) { const x = result.value; console.log(x); }

看到了吗？for...of的本质就是自动帮你完成“取迭代器 → 调用 next → 判断 done → 提取 value”的全过程。

这也解释了为什么某些对象不能用于for...of——它们根本没提供[Symbol.iterator]方法。

实际应用场景：让复杂系统变得更清晰

在一个真实项目中，你可能同时面对多种数据源：

const userData = [user1, user2]; // 数组 const permissions = new Set(['read', 'write']); // Set const config = new Map([['darkMode', true]]); // Map

如果没有统一接口，处理起来就得写一堆if-else：

// ❌ 丑陋的多态分支 if (Array.isArray(data)) { data.forEach(handle); } else if (data instanceof Set) { data.forEach(handle); } else if (data instanceof Map) { data.forEach((val) => handle(val)); }

而有了 Iterator，一切归一：

// ✅ 统一处理 for (const item of data) { handle(item); }

只要data是可迭代的，不管它是什么类型，都能被同一段逻辑处理。这正是“面向接口编程”的精髓所在。

设计建议：写出健壮的迭代器代码

当你自己实现可迭代对象时，记住这几个关键点：

1. 每次都返回新迭代器

避免多个for...of共享同一个状态：

// ❌ 错误示范：共享 index class BadCounter { constructor() { this.index = 0; } [Symbol.iterator]() { return this; // ❌ 返回自身，状态会被污染 } next() { /*...*/ } } // ✅ 正确做法：每次新建 class GoodCounter { [Symbol.iterator]() { let index = 0; return { next() { /* 使用闭包维护 index */ } }; } }

2.done: true必须出现

防止无限循环：

// ❌ 危险：永远不会结束 next() { return { value: someValue, done: false }; // done 永远是 false } // ✅ 安全：明确终止条件 next() { if (hasNext()) { return { value: getNext(), done: false }; } else { return { done: true }; // 注意：value 可省略 } }

3. 尽量使用 Generator 替代手动实现

大多数情况下，function*更简洁、不易出错：

function* range(start, end) { for (let i = start; i < end; i++) { yield i; } } for (const n of range(0, 5)) { console.log(n); // 0 1 2 3 4 }

Generator 函数自动返回符合 Iterator 协议的对象，yield对应value，函数结束对应done: true。

为什么说 Iterator 是现代 JS 的基石？

别看它只是一个“遍历机制”，实际上它是很多高级特性的地基：

• Generator 函数：本身就是一种特殊的迭代器；
• 异步迭代：for await...of基于Symbol.asyncIterator；
• React / Vue 响应式系统：依赖类似的“追踪-触发”模型；
• Redux-Saga：通过 Generator 控制副作用流程；
• RxJS 流处理：Observable 虽然不同，但思想同源。

可以说，掌握了 Iterator，你就拿到了打开现代 JavaScript 异步世界的一把钥匙。

如果你现在再回头看开头的问题：

“为什么数组能用for...of，普通对象不行？”

答案已经很清晰了：
因为数组实现了[Symbol.iterator]，能交出一个合法的迭代器；而普通对象没有，所以不支持。

而这，正是 ES6 给 JavaScript 带来的最深刻变革之一——用协议代替约定，用接口代替实现。

下次当你写下for (const x of arr)的时候，不妨想一想：在这行简洁代码的背后，是一整套精巧的设计哲学在支撑。

你，真的懂你的for...of了吗？