JavaScript生成器与迭代器使用教程

珍惜时间，勤奋学习！今天给大家带来《JavaScript生成器与迭代器详解》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

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

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 <h3>为什么用 <code>function*</code> 而不是手写迭代器？</h3><p>生成器函数自动满足迭代器协议 + 可迭代协议，省去闭包状态管理、<code>next()</code> 模板代码，且天然支持 <code>yield*</code> 委托、<code>return()</code> 提前退出、<code>throw()</code> 注入错误。</p>

• 调用 function*() 不执行函数体，只返回一个生成器对象
• 第一次 next() 才开始运行，遇到 yield 暂停，把右侧值当 value 返回
• 后续 next() 从暂停处继续，直到下一个 yield 或函数结束
• 函数内状态（如变量、作用域）全程保留，不用手动闭包

function* range(start, end) {
  for (let i = start; i <h3><code>async function*</code> 和 <code>for await...of</code> 怎么配对用？</h3><p>普通生成器不支持 <code>await</code>，强行在 <code>function*</code> 里写 <code>await</code> 会直接报 <code>SyntaxError</code>。要处理异步流，必须用 <code>async function*</code>，它返回的是 <code>AsyncIterator</code>，其 <code>next()</code> 方法返回 <code>Promise</code>，只能用 <code>for await...of</code> 消费——混用 <code>for...of</code> 会拿到 pending Promise，不是解包后的值。</p>

• 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);
  }
}
<p>// ✅ 正确用法
for await (const line of fetchLines('/log.txt')) {
console.log(line);
}</p><p>// ❌ 错误：会打印 Promise 对象
// for (const line of fetchLines('/log.txt')) { ... }</p>

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

理论要掌握，实操不能落！以上关于《JavaScript生成器与迭代器使用教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！