17370845950

生成器函数用 function* 定义，调用返回迭代器对象；每次调用 next() 执行到 yield 暂停并返回 {value, done}，yield 可输出值、接收外部传参，支持惰性求值、异步控制等场景。

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 实现扁平化的深度优先迭代器
• 分步骤任务管理：比如表单多步提交、游戏帧循环、动画关键帧调度