首页 > 文章 > 前端

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

时间：2026-01-08 14:06:46 103浏览收藏

哈喽！今天心血来潮给大家带来了《JavaScript生成器函数与yield控制流程详解》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

JavaScript生成器是用function*定义的可暂停函数，返回迭代器对象，通过next()方法控制执行节奏，yield实现暂停与恢复及双向通信，适用于异步流程、惰性求值和状态机。

什么是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 表达式的值。