首页 > 文章 > 前端

JavaScript生成器：function*与yield使用教程

时间：2025-11-24 23:31:50 433浏览收藏

深入理解 JavaScript 生成器：`function*` 与 `yield` 详解。JavaScript 生成器是一种强大的特殊函数，通过 `function*` 语法定义，利用 `yield` 关键字实现函数执行的暂停与恢复，并可返回值。本文详细解析生成器函数的定义、`yield` 的作用与行为，以及如何通过 `next()` 方法控制生成器的执行流程。此外，文章还探讨了生成器在实际开发中的应用场景，例如处理无限序列、分页数据加载以及简化异步操作管理。掌握 `function*` 和 `yield` 的用法，能有效提升 JavaScript 代码的灵活性和效率，尤其是在处理延迟计算和异步流程时。

JavaScript生成器通过function*定义，使用yield暂停执行并返回值，调用next()恢复运行，适合处理延迟计算与异步流程。

JavaScript 生成器：function* 与 yield 关键字的使用

JavaScript 生成器是一种特殊函数，能暂停执行并保留当前状态，之后可恢复。它通过 function* 定义，并使用 yield 暂停函数运行。这种机制适合处理延迟计算、异步流程控制和大数据流场景。

定义生成器函数

生成器函数用 function* 语法声明，调用时返回一个可迭代的生成器对象，不会立即执行函数体。

function* myGenerator() { yield '第一步'; yield '第二步'; return '结束'; }const gen = myGenerator(); // 此时函数未执行console.log(gen.next()); // { value: '第一步', done: false }

yield 的作用与行为

yield 表达式用于暂停函数执行，并将值传出。每次调用生成器的 next() 方法，函数会运行到下一个 yield 或 return。

yield 左侧的表达式会被求值并作为 next() 返回对象的 value
函数执行暂停，直到下一次调用 next()
若 next() 带参数，该参数会成为上一个 yield 表达式的返回值

function* counter() { let count = 0; while (true) { const reset = yield count++; if (reset) count = 0; } }const c = counter(); console.log(c.next()); // { value: 0, done: false } console.log(c.next()); // { value: 1, done: false } console.log(c.next(true)); // { value: 0, done: false }

遍历生成器输出

生成器对象是可迭代的，因此可以用 for...of 循环自动遍历所有 yield 值，直到 done 为 true。

function* colors() { yield '红'; yield '绿'; yield '蓝'; }for (const color of colors()) { console.log(color); // 依次输出：红、绿、蓝 }

注意：for...of 不会遍历 return 的值，除非使用扩展语法 [...colors()]，但 return 值仍不会包含在数组中。

实际应用场景

生成器适用于需要逐步产生数据或控制执行节奏的场景。

无限序列生成（如斐波那契数列）
分页数据加载模拟
简化异步操作管理（配合 yield 和 Promise）

function* idMaker() { let id = 1; while (true) yield id++; }const ids = idMaker(); ids.next().value; // 1 ids.next().value; // 2

基本上就这些。function* 和 yield 提供了灵活的控制流手段，理解其惰性求值特性对高效使用很关键。

本篇关于《JavaScript生成器：function*与yield使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

异步操作 yield next() JavaScript生成器 function*