迭代器模式是一种经典的行为设计模式，在JavaScript中主要用于按顺序访问集合对象的元素，同时不需要暴露集合对象的内部表示。它把遍历逻辑从集合本身剥离出来，让不同的数据结构可以通过统一的接口实现遍历操作。这种设计极大地提高了代码的复用性和可维护性，使得数据的生产者与消费者能够完全解耦，是现代JavaScript语言特性中不可或缺的基石。
迭代器模式的核心协议与底层机制
在JavaScript的生态中，迭代器模式并非一种抽象的理论，而是通过两套严密的底层协议来具体落地的，这两套协议分别是可迭代协议和迭代器协议。理解这两者的区别与联系，是掌握JavaScript高级遍历特性的前提，也是构建复杂数据流处理逻辑的基础。
可迭代协议规定了数据结构如何暴露其遍历能力。一个对象如果要成为可迭代对象，必须实现特定的方法，即在对象或其原型链上部署 Symbol.iterator 属性。该属性必须是一个无参函数，当被调用时，需要返回一个符合迭代器协议的对象。在JavaScript中，常见的内置可迭代对象包括数组、字符串、Map、Set以及 arguments 对象等，它们都默认实现了这一协议，从而能够被各种内置语法所消费。
迭代器协议则定义了具体的遍历行为规范。任何符合迭代器协议的对象，都必须实现一个 next 方法。每次调用该方法时，都会返回一个包含 done 和 value 两个属性的状态对象。其中，done 是一个布尔值，用于指示迭代是否已经完成；value 则是当前迭代步骤所返回的具体数据。当 done 为 true 时，value 属性通常是 undefined，但在某些特定场景下也可以包含最终的返回值，这种设计为状态机的推进提供了标准化的反馈机制。
内置迭代器的运作原理与手动控制
日常开发中，我们最常接触的迭代器消费方式就是 for...of 循环。这个语法结构在底层会自动寻找目标对象上的 Symbol.iterator 方法，获取迭代器对象，并不断调用其 next 方法，直到返回对象的 done 属性为 true 为止。这种自动化机制隐藏了状态管理的复杂性，让开发者能够专注于业务逻辑，而无需关心底层指针的移动。
然而，为了深入理解迭代器的运作原理，我们可以绕过自动化循环，手动获取并控制迭代器。通过直接调用 Symbol.iterator 方法，我们可以拿到一个独立的状态机，并根据业务需求按需推进迭代过程。这种方式在处理异步数据流、实现分页加载或需要在中途暂停、恢复遍历时显得尤为重要，它赋予了开发者对数据流的绝对控制权。
以下代码展示了如何手动获取数组的迭代器，并逐步调用 next 方法来观察状态的变化：
const dataSource = [10, 20, 30];
// 获取数组内置的迭代器对象
const iterator = dataSource[Symbol.iterator]();
// 手动推进状态机，观察每次返回的结果
console.log(iterator.next()); // 输出: { value: 10, done: false }
console.log(iterator.next()); // 输出: { value: 20, done: false }
console.log(iterator.next()); // 输出: { value: 30, done: false }
// 当数据耗尽时，done变为true，value变为undefined
console.log(iterator.next()); // 输出: { value: undefined, done: true }
通过手动控制，我们可以清晰地看到迭代器是如何一步步记录当前遍历位置的。这种基于闭包或内部指针的状态保存机制，正是迭代器模式能够脱离集合本身独立运作的核心原因，它确保了多次调用之间状态的连贯性与隔离性。
自定义数据结构的迭代器实现与生成器优化
当我们需要遍历自定义的数据结构，或者处理一些非线性的数据集合时，内置的迭代器就无法满足需求了。此时，我们需要手动为自定义类实现可迭代协议和迭代器协议。通过实现 Symbol.iterator 方法，我们可以让任何自定义对象具备被 for...of 循环消费的能力，从而无缝融入现有的语言生态。
传统的实现方式通常需要在 Symbol.iterator 方法内部返回一个包含 next 方法的对象，并利用闭包来保存当前的遍历状态。这种方式虽然逻辑清晰，但在处理复杂的遍历逻辑时，代码往往会变得冗长且难以维护，特别是当涉及到多个嵌套循环或条件分支时，状态的管理会变得异常繁琐，容易引发难以察觉的边界错误。
以下是一个传统的自定义范围迭代器的实现示例：
class NumberRange {
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 { done: false, value: current++ };
} else {
return { done: true, value: undefined };
}
}
};
}
}
const range = new NumberRange(1, 3);
for (const num of range) {
console.log(num); // 依次输出 1, 2, 3
}
为了简化这种繁琐的状态管理，JavaScript引入了生成器函数作为迭代器模式的语法糖。通过使用 function* 声明生成器，并结合 yield 关键字，我们可以以同步代码的编写方式来控制分步的执行流程。生成器函数执行后返回的对象天然符合迭代器协议，极大地提升了代码的可读性与开发效率。
使用生成器重写上述范围迭代器，代码将变得极其简洁且意图明确：
class GeneratorRange {
constructor(start, end) {
this.start = start;
this.end = end;
}
// 使用生成器函数实现迭代器协议
*[Symbol.iterator]() {
let current = this.start;
while (current <= this.end) {
yield current++;
}
}
}
const genRange = new GeneratorRange(5, 8);
for (const num of genRange) {
console.log(num); // 依次输出 5, 6, 7, 8
}
迭代器模式的应用场景与总结回顾
迭代器模式在当下的前端开发中有着广泛且深入的应用。除了统一不同数据结构的遍历接口外，它还在惰性求值、无限序列生成以及复杂状态机管理中发挥着不可替代的作用。惰性求值允许我们在需要数据时才进行计算，从而避免了大量无用数据的提前生成，显著优化了内存占用和计算性能，这在处理大规模数据集或流式数据时尤为关键。
此外，迭代器模式与Promise、async/await等异步编程特性的结合，催生了异步迭代器协议。这使得开发者能够像处理同步数据流一样，优雅地处理来自WebSocket、Server-Sent Events或分页API的异步数据流。这种统一的抽象层，极大地降低了异步数据处理的认知负担，让复杂的并发逻辑变得线性且易于理解。
总结而言，迭代器模式通过可迭代协议和迭代器协议，为JavaScript提供了一套标准化的数据消费接口。无论是使用内置的集合对象，还是构建复杂的自定义数据结构，掌握迭代器的底层原理与生成器的便捷语法，都是编写高质量、高可维护性JavaScript代码的必经之路。在未来的技术演进中，基于迭代器模式的抽象与封装，将继续在数据处理与流式计算领域扮演核心角色，推动前端工程化向更高效的方向发展。
JavaScript迭代器模式迭代器协议可迭代对象next方法修改时间：2026-06-05 02:08:23