当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript生成器与yield流程控制解析

JavaScript生成器与yield流程控制解析

2026-03-10 14:26:32 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 表达式的值。