JavaScript生成器函数与yield使用全解析

JavaScript生成器函数（通过function*定义）是一种能暂停和恢复执行的特殊函数，其核心在于yield关键字——它不仅可输出值、接收外部传入参数，还赋予函数惰性求值、双向通信和状态保持的能力；调用生成器返回迭代器，每次next()驱动执行至下一个yield，返回{value, done}对象，这种独特机制使其天然适用于无限序列生成、异步流程控制、树形结构遍历及分步骤任务调度等实际场景，是理解现代JavaScript异步演进与高级控制流的关键一环。

JavaScript 中的生成器函数（Generator Function）是一种可以暂停和恢复执行的特殊函数，yield 是它的核心关键字，用于控制函数的执行节奏和数据产出。

生成器函数怎么定义和调用

生成器函数使用 function* 语法定义，调用后不立即执行，而是返回一个迭代器对象（Iterator）。这个对象提供 next() 方法来逐步驱动函数运行。

• 定义时写成 function* myGenerator() { ... } 或 const gen = function*() { ... };
• 调用 myGenerator() 得到的是迭代器，不是结果值
• 每次调用 iterator.next()，函数执行到下一个 yield 处暂停，并返回 { value: ..., done: false/true }

yield 关键字的核心作用

yield 不是普通返回，而是暂停执行 + 输出值 + 等待下次唤醒。它让函数具备“可中断性”和“状态保持能力”。

• 遇到 yield 123：函数暂停，把 123 作为 value 返回，done 为 false
• 下一次调用 next()：函数从暂停处继续，直到下一个 yield 或函数结束
• 函数自然退出或执行 return 后，再调用 next() 会返回 { value: ..., done: true }

yield 还能接收外部传入的值

yield 表达式本身可以有返回值——即上一次 next(value) 传入的参数，会被当前 yield 的左侧接收。

• 写法：const received = yield 42;
• 第一次 next() 传参无效（因为还没走到 yield 左侧）
• 第二次 next('hello') 会让 received 等于 'hello'
• 这使得生成器能实现双向通信，适合协程、状态机等场景

常见实用场景举例

生成器不是炫技工具，它在特定问题中很自然：

• 惰性求值序列：如无限斐波那契数列，只在需要时计算下一个数
• 异步流程控制：配合 co 库或手动封装，模拟 async/await 早期形态
• 遍历树或图结构：用递归 + yield 实现扁平化的深度优先迭代器
• 分步骤任务管理：比如表单多步提交、游戏帧循环、动画关键帧调度

到这里，我们也就讲完了《JavaScript生成器函数与yield使用全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！