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

10次阅读

javaScript迭代器和生成器是基于symbol.iterator协议与状态机的运行时机制;for…of依赖对象是否实现[Symbol.iterator]()方法,数组原生支持而普通对象不支持,需手动实现该方法返回含next()的迭代器对象。

什么是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 }。关键不在“怎么写”,而在“状态怎么存、什么时候结束”。

立即学习Java免费学习笔记(深入)”;

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

const range = {   from: 1,   to: 3,   [Symbol.iterator]() {     let current = this.from;     return {       next: () => {         if (current <= this.to) {           return { value: current++, done: false };         } else {           return { value: undefined, done: true };         }       }     };   } }; 

for (const num of range) { console.log(num); // 1, 2, 3 }

注意点:

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

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

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

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

function* rangeGenerator(from, to) {   let current = from;   while (current <= to) {     yield 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 }

性能与调试提示:

  • 生成器函数首次调用不执行函数体,只返回迭代器对象;第一次 next() 才开始执行,直到遇到第一个 yield
  • yield 表达式本身有返回值:下次 next(arg) 传入的参数会成为本次 yield 的值(常用于双向通信,比如协程控制)
  • V8 引擎对生成器有专门优化,但大量嵌套或深层递归生成器仍可能触发帧膨胀,生产环境慎用于高频路径

最容易被忽略的是:自定义可迭代对象[Symbol.iterator] 方法必须每次返回**新迭代器实例**。如果复用同一个对象,多次 for...of 会相互干扰——这不是 bug,是协议设计使然。

text=ZqhQzanResources