当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript生成器详解：yield关键字用法解析

JavaScript生成器详解：yield关键字用法解析

2026-02-24 23:13:39 0浏览收藏

JavaScript生成器是一种能暂停和恢复执行的特殊函数，通过function*声明并借助yield关键字灵活交出控制权、返回值及接收外部输入，调用后返回可迭代的生成器对象，配合next()方法逐步推进并返回{value, done}结构；它不仅支撑惰性求值、无限序列、复杂遍历等场景，更是早期异步流程简化（如co库）和现代async/await的思想基石，兼具强大表现力与实用价值，是深入理解JS执行模型与异步演进不可错过的核心机制。

javascript生成器是什么_如何使用yield关键字

JavaScript 生成器（Generator）是一种特殊函数，能**暂停和恢复执行**，适合处理异步流程、惰性求值或遍历复杂数据结构。它的核心是 yield 关键字，用于交出函数控制权，并返回一个值。

生成器函数的定义与调用

生成器函数用 function* 声明，调用后不立即执行，而是返回一个生成器对象（Generator Object），该对象实现了迭代器协议（有 next() 方法）。

例如：

function* count() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = count(); // 不执行函数体，只创建生成器对象
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

yield 的工作方式

yield 不是普通返回：它暂停函数执行，保存当前上下文（变量、执行位置等），等待下一次 next() 调用再继续。

每次调用 next()，函数从上次暂停处继续，执行到下一个 yield 或函数结束
yield 表达式本身有返回值：下次调用 next(arg) 时传入的参数，会成为当前 yield 表达式的值
函数末尾或 return 语句会使 done: true，其值出现在 value 中

示例（接收外部输入）：

function* echo() {
  console.log('start');
  const a = yield 'first';
  console.log('got:', a); // 'hello'
  yield 'second';
}

const g = echo();
console.log(g.next()); // { value: 'first', done: false }
console.log(g.next('hello')); // { value: 'second', done: false }

生成器的实际用途

生成器不是语法糖，它提供了可中断的执行模型，在以下场景很有价值：

手动控制迭代逻辑：比如实现斐波那契数列、无限序列、树的深度优先遍历
简化异步代码：配合 co 库或手写 runner，让异步操作看起来像同步（这是 async/await 的前身思想）
状态机建模：每个 yield 对应一个状态，next() 触发状态迁移
与 for...of 配合使用：生成器对象默认可迭代，支持原生遍历

例如用 for...of 消费：

function* range(start, end) {
  for (let i = start; i     yield i;
  }
}

for (const n of range(0, 3)) {
  console.log(n); // 0, 1, 2
}

注意点与常见误区

生成器虽灵活，但需注意几个关键细节：

生成器函数不能被 new 调用（不是构造函数）
yield 只能在生成器函数内部使用，普通函数中会报语法错误
生成器对象只能遍历一次；再次调用 next() 在 done: true 后始终返回 { value: undefined, done: true }
生成器可以 委托另一个生成器：用 yield* 透传迭代（如组合多个生成器）

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~