当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript生成器函数与yield使用教程

JavaScript生成器函数与yield使用教程

2026-02-24 17:36:42 0浏览收藏

JavaScript生成器函数（function*）是一种革命性的控制流工具，它通过yield关键字实现函数执行的精细暂停与恢复，让开发者能像指挥交响乐一样手动掌控代码节奏——每次调用next()便推进一步，既可惰性产出数据、构建无限序列，又能实现异步流程的同步化书写和状态机的清晰建模，尤其在需要分步协作、按需计算或双向通信的复杂场景中展现出强大而优雅的表达力。

什么是javascript生成器_function*和yield如何控制执行流程

JavaScript 生成器（Generator）是一种特殊的函数，用 function* 定义，配合 yield 关键字实现**函数执行的暂停与恢复**，从而让开发者手动控制流程节奏，而不是一次性运行到底。

生成器函数：用 `function*` 创建可暂停的函数

生成器函数不会立即执行，而是返回一个**迭代器对象**（Iterator）。这个对象拥有 next() 方法，每次调用都会让函数从上次暂停的位置继续执行，直到遇到下一个 yield 或函数结束。

例如：

function* count() {
  console.log('start');
  yield 1;
  console.log('after first yield');
  yield 2;
  return 'done';
}

const it = count(); // 不执行函数体，只创建迭代器
it.next(); // { value: 1, done: false } → 执行到第一个 yield，暂停
it.next(); // 输出 'after first yield'，{ value: 2, done: false }
it.next(); // { value: 'done', done: true } → 函数结束

`yield` 是暂停点，不是返回值语句

yield 暂停函数执行，并把右侧表达式的值作为 next() 调用的 value；但它不退出函数，后续 next() 可以恢复执行。

第一次 next() 启动函数，执行到第一个 yield 就停住
后续 next() 从暂停处继续，直到下一个 yield 或 return
yield 表达式本身有返回值：可以接收上一次 next(value) 传入的参数（即“外部传进来的值”）

用 `next(value)` 实现双向通信

yield 左侧可以赋值，形成“产出 + 接收”的协作模式：

function* ask() {
  const name = yield 'What is your name?';
  const age = yield `Hello, ${name}! How old are you?`;
  return `Nice to meet you, ${name}, ${age}-year-old.`;
}

const it = ask();
it.next().value; // 'What is your name?'
it.next('Alice').value; // 'Hello, Alice! How old are you?'
it.next(30).value; // 'Nice to meet you, Alice, 30-year-old.'

注意：首次 next() 传参无效（因无前一个 yield 等待接收），后续每次 next(x) 的 x 会成为上一个 yield 表达式的值。