JS生成器函数与yield使用技巧

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JS生成器函数与yield控制流程详解》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

JavaScript生成器函数用function声明，调用返回生成器对象，通过next()暂停/恢复执行并yield按需产出值，支持传参接收、嵌套逻辑及yield委托复用。

JavaScript 生成器函数是一种特殊函数，它能**暂停和恢复执行**，配合 yield 关键字实现按需产出值，常用于处理惰性序列、异步流程控制或状态机场景。

生成器函数的定义与调用方式

用 function* 语法声明，调用时不立即执行，而是返回一个生成器对象（Generator Object），该对象具备 next()、return()、throw() 等方法。

• 生成器函数体内的代码只有在首次调用 next() 时才开始执行
• 每次遇到 yield 表达式就暂停，并把 yield 后面的值作为 value 返回
• 后续再次调用 next()，会从上次暂停位置继续执行，直到下一个 yield 或函数结束

yield 如何控制执行流程

yield 不是普通关键字，它是生成器内部的“暂停点”，兼具输出值和接收外部输入的能力：

• yield 表达式本身有返回值：下一次调用 next(arg) 时传入的参数，会成为当前 yield 表达式的计算结果（即 yield 左侧变量接收到的值）
• yield 可以嵌套在任意逻辑中：比如循环、条件判断、try/catch 内，暂停时机完全由代码结构决定
• yield* 可委托另一个生成器：让当前生成器“展开”并逐个产出另一个生成器的值，实现组合复用

典型执行流程示例

看这段代码：

function* counter() {
  let i = 0;
  while (i <p>执行过程如下：</p>

• gen.next() → 执行到 yield i++（此时 i=0），暂停，返回 { value: 0, done: false }
• gen.next() → 继续执行 i++（i 变为 1），再 yield，返回 { value: 1, done: false }
• gen.next('reset') → i++ 执行后 i=2，但 yield 表达式接收到 'reset'，进入 if 分支，i 重置为 0；下次再 next 就又从 0 开始

实际用途提示

生成器不是为替代 for 循环而生，它的价值在于显式暴露控制权：

• 实现自定义迭代器（如树的深度优先遍历）
• 配合 Promise 封装成 async/await 的早期替代方案（如 co 库）
• 构建协程式状态管理（例如游戏帧更新、表单多步骤校验）
• 生成无限序列（如斐波那契数列），靠 yield 惰性求值，避免内存爆炸

终于介绍完啦！小伙伴们，这篇关于《JS生成器函数与yield使用技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！