什么是JavaScript生成器与迭代器【教程】

14次阅读

手动实现迭代器需返回含next()方法的对象,正确处理{value, done}结构及done: true终止信号,且对象须有[symbol.iterator]()方法。

什么是JavaScript生成器与迭代器【教程】

javaScript 生成器(function*)和迭代器(next() 返回 {value, done} 的对象)不是“语法糖教程”,而是解决真实问题的控制流工具:它们让你按需取值、暂停执行、封装状态,而不是一次性算完所有数据。

怎么快速写出一个可用的迭代器?

手动实现迭代器的关键是返回一个带 next() 方法的对象,并正确处理 done: true 终止信号。漏掉它,for...of 就会无限循环或卡死。

  • 必须返回 { value, done } 结构,不能只返回 value
  • done: true 时,value 可为 undefined(推荐显式写出来)
  • 想被 for...of 消费,对象还得有 [Symbol.iterator]() 方法
const counter = {   [Symbol.iterator]() {     let i = 1;     return {       next() {         if (i <= 3) return { value: i++, done: false };         return { value: undefined, done: true }; // ← 必须有这一行       }     };   } }; for (const n of counter) console.log(n); // 1, 2, 3

为什么用 function* 而不是手写迭代器?

生成器函数自动满足迭代器协议 + 可迭代协议,省去闭包状态管理、next() 模板代码,且天然支持 yield* 委托return() 提前退出、throw() 注入错误。

  • 调用 function*() 不执行函数体,只返回一个生成器对象
  • 第一次 next() 才开始运行,遇到 yield 暂停,把右侧值当 value 返回
  • 后续 next() 从暂停处继续,直到下一个 yield 或函数结束
  • 函数内状态(如变量、作用域)全程保留,不用手动闭包
function* range(start, end) {   for (let i = start; i < end; i++) {     yield i;   } } const iter = range(10, 13); iter.next(); // { value: 10, done: false } iter.next(); // { value: 11, done: false } iter.next(); // { value: 12, done: false } iter.next(); // { value: undefined, done: true }

async function*for await...of 怎么配对用?

普通生成器不支持 await,强行在 function* 里写 await 会直接报 SyntaxError。要处理异步流,必须用 async function*,它返回的是 AsyncIterator,其 next() 方法返回 promise,只能用 for await...of 消费——混用 for...of 会拿到 pending Promise,不是解包后的值。

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

  • Node.js 需 ≥ v10.0.0,chrome ≥ 63,firefox ≥ 57
  • yield 后可接 Promise,但不要 return await promise(会破坏流式行为)
  • for await...of 内部自动 await next().value,前提是对象实现了 [Symbol.asyncIterator]
async function* fetchLines(url) {   const res = await fetch(url);   const reader = res.body.getReader();   while (true) {     const { value, done } = await reader.read();     if (done) break;     yield new TextDecoder().decode(value);   } } 

// ✅ 正确用法 for await (const line of fetchLines('/log.txt')) { console.log(line); }

// ❌ 错误:会打印 Promise 对象 // for (const line of fetchLines('/log.txt')) { ... }

最常被忽略的一点:生成器一旦 done: true,后续所有 next() 调用都返回 { value: undefined, done: true },不可重用;若需多次遍历,得重新调用生成器函数获取新实例。

text=ZqhQzanResources