当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript迭代器与生成器原理详解

JavaScript迭代器与生成器原理详解

2026-03-05 09:17:34 0浏览收藏

JavaScript中的迭代器与生成器并非简单的语法糖，而是依托Symbol.iterator协议和状态机原理构建的底层运行时机制；for...of循环能否工作，取决于目标对象是否实现了返回符合{value, done}结构的next()方法的[Symbol.iterator]函数——数组原生支持，普通对象则需手动实现；真正掌握它，关键在于理解迭代触发时机、next()返回值如何驱动循环、以及yield如何精准暂停和恢复执行上下文，而非仅记忆用法。

什么是JavaScript迭代器与生成器的原理_自定义可迭代对象实战【教程】

JavaScript 迭代器和生成器不是语法糖，而是基于 Symbol.iterator 协议和状态机实现的运行时机制；你无法靠“记住用法”真正掌握它，必须理解对象何时被调用、next() 返回值结构如何触发循环、以及 yield 如何暂停并恢复执行上下文。

为什么 for...of 能遍历数组却不能遍历普通对象

因为 for...of 内部会尝试调用目标对象的 [Symbol.iterator]() 方法。数组原生实现了该方法，返回一个迭代器对象（含 next()）；而普通对象默认没有这个属性。

常见错误现象：TypeError: obj is not iterable

检查对象是否拥有可调用的 [Symbol.iterator] 属性：用 typeof obj[Symbol.iterator] === 'function'
手动调用一次看返回值：obj[Symbol.iterator]().next() 应返回形如 { value: ..., done: false } 的对象
注意：Node.js 早期版本或某些打包工具可能未启用 Symbol 支持，需确认环境兼容性

手写一个符合协议的迭代器对象

迭代器本质是一个有 next() 方法的对象，每次调用返回 { value, done }。关键不在“怎么写”，而在“状态怎么存、什么时候结束”。

比如让一个数字范围对象可迭代：

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    return {
      next: () => {
        if (current for (const num of range) {
console.log(num); // 1, 2, 3
}

注意点：

next() 必须是无参函数，不能依赖外部闭包传参（否则 for...of 无法正确驱动）
done: true 后再调用 next()，仍应返回 { value: undefined, done: true }，这是协议要求
若迭代逻辑涉及异步（如逐行读文件），原生迭代器不支持，得用 AsyncIterator 和 for await...of

生成器函数 `function*` 是语法级状态机封装

function* 不是“另一种写迭代器的方式”，而是 JavaScript 引擎帮你自动创建了符合协议的迭代器对象，并把 yield 编译为暂停/恢复的控制流节点。

下面这段代码和上面 range 对象行为完全等价：

function* rangeGenerator(from, to) {
  let current = from;
  while (current const it = rangeGenerator(1, 3);
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: 3, done: false }
console.log(it.next()); // { value: undefined, done: true }

性能与调试提示：