生成器函数通过function*和yield实现可暂停、可恢复的执行，返回迭代器对象，支持惰性求值，适用于自定义迭代器、异步控制、无限序列等场景，并需注意一次性使用、双向通信及与async/await的权衡。
JavaScript中的生成器函数，本质上是一种可以暂停执行并在稍后从暂停点恢复的特殊函数。它不会一次性执行完毕并返回一个单一的值，而是返回一个迭代器对象，通过这个对象你可以按需（lazy evaluation）地逐步获取它“生成”出来的值，直到它完成。这就像一个生产线，你每请求一个产品，它就生产一个，而不是一次性把所有产品都堆在你面前。
解决方案
要理解生成器函数，核心在于两个关键点：
function*
语法和
yield
关键字。
首先，一个生成器函数通过在
function
关键字后加一个星号
*
来声明，比如
function* myGenerator() { ... }
。当你调用这个函数时，它并不会立即执行函数体内的代码，而是返回一个生成器对象（一个迭代器）。这个对象有一个
next()
方法，每次调用
next()
，生成器函数就会从上次暂停的地方开始执行，直到遇到下一个
yield
表达式。
yield
关键字是生成器函数的心脏。当执行流遇到
yield expression
时，它会暂停函数的执行，并将
expression
的值作为当前迭代的结果返回。这个结果被封装在一个对象里，形如
{ value: expression的值, done: false }
。
done: false
表示生成器还没有执行完毕。
立即学习“Java免费学习笔记（深入）”；
当你再次调用生成器对象的
next()
方法时，函数会从
yield
表达式的下一行代码继续执行。如果函数执行完毕，或者遇到了
return
语句，
next()
方法将返回
{ value: undefined (或return的值), done: true }
，表示迭代结束。
举个例子，一个简单的计数器生成器：
function* createIdGenerator() { let id = 0; while (true) { yield id++; }}const idGenerator = createIdGenerator(); // 调用不执行，返回生成器对象console.log(idGenerator.next().value); // 0console.log(idGenerator.next().value); // 1console.log(idGenerator.next().value); // 2// ... 可以无限生成下去
这种按需生成值的特性，让生成器在处理大量数据或无限序列时，能够有效节省内存和计算资源。
生成器函数与普通函数有何本质区别？
生成器函数和普通函数在JavaScript中，从执行模型到返回值类型，都存在着根本性的差异。理解这些区别，是掌握生成器精髓的关键。
最直观的区别在于它们的执行流程。普通函数一旦被调用，就会从头到尾一气呵成地执行，直到遇到
return
语句或函数体结束，然后将一个单一的值（或
undefined
）返回。它的执行是“运行至完成”（run-to-completion）的。而生成器函数则不然，它最大的特点是可暂停和可恢复。它通过
yield
关键字暂停执行，并将控制权交还给调用者，当调用者再次请求时（通过调用
next()
），它能从上次暂停的地方继续执行。这种能力使得生成器函数能够维护内部状态，而不会在每次调用后丢失。
其次是返回值类型。普通函数直接返回一个具体的值。而生成器函数被调用时，它并不会立即执行函数体，而是返回一个特殊的生成器对象（Generator Object）。这个生成器对象本身就是一个迭代器（Iterator）和可迭代对象（Iterable），它拥有
next()
、
return()
和
throw()
等方法。你通过调用
next()
方法来逐步“拉取”生成器内部产生的值。
再深究一点，是它们对状态管理的方式。普通函数在每次调用时，都会创建一个全新的执行上下文，局部变量在函数执行结束后就会被销毁。生成器函数则不同，它的局部变量和执行上下文在
yield
暂停时会被保留下来，等待下一次
next()
调用时恢复。这意味着生成器函数能够像一个“协程”一样，在多次调用之间保持其内部状态，这是实现复杂迭代逻辑或异步流控制的基础。
最后，从内存效率来看，生成器函数在处理潜在的大量数据或无限序列时，展现出显著优势。普通函数如果需要生成一个大型数组，可能需要一次性计算并存储所有元素，这会消耗大量内存。生成器函数则采用惰性求值（lazy evaluation）的策略，它只在需要时才计算并生成下一个值，避免了不必要的内存开销。比如生成一个无限斐波那契数列，普通函数无法做到，而生成器可以轻松实现。
在实际开发中，生成器函数有哪些常见应用场景？
生成器函数虽然不像
async/await
那样在日常异步编程中随处可见，但它在某些特定场景下，仍然是解决问题的优雅且高效的工具。理解这些应用场景，能帮助我们更好地利用它的暂停/恢复特性。
一个非常经典的场景是自定义迭代器。JavaScript中，
for...of
循环可以遍历任何可迭代对象。生成器函数天生就返回一个迭代器，这使得我们可以非常方便地创建自定义的迭代逻辑。比如，你需要遍历一个复杂的树形结构，或者想实现一个特定范围的数字序列，甚至是实现一个自定义的数据流。
// 示例：自定义范围迭代器function* range(start, end) { for (let i = start; i <= end; i++) { yield i; }}for (const num of range(1, 5)) { console.log(num); // 1, 2, 3, 4, 5}
另一个重要的应用是异步流程控制。在
async/await
普及之前，生成器函数是实现类似同步化异步代码流的关键技术。著名的
co
库就是基于生成器实现的。通过
yield
一个 Promise，然后等待 Promise 解决后再继续执行，从而将原本回调地狱式的异步代码，写成接近同步的线性代码。虽然现在
async/await
更为便捷，但理解生成器在这方面的作用，有助于深入理解现代异步编程的底层机制。有时，在需要更细粒度的异步控制或构建特定异步模式时，生成器仍能发挥作用。
此外，无限序列的生成也是生成器的一大优势。由于其惰性求值的特性，生成器可以轻松地创建理论上无限的数据流，而不会耗尽内存。例如，一个无限的ID生成器，或者一个斐波那契数列的生成器。
// 示例：无限斐波那契数列生成器function* fibonacci() { let a = 0, b = 1; while (true) { yield a; [a, b] = [b, a + b]; // 交换并计算下一个值 }}const fibGen = fibonacci();console.log(fibGen.next().value); // 0console.log(fibGen.next().value); // 1console.log(fibGen.next().value); // 1console.log(fibGen.next().value); // 2// ... 持续调用以获取更多斐波那契数
生成器还可以用于实现状态机。通过
yield
关键字，我们可以将一个复杂的状态转换逻辑分解成多个小的、可暂停的步骤，每次
yield
都代表着状态的一次切换，使得状态机的逻辑更加清晰和易于管理。
总的来说，生成器函数提供了一种强大的能力，可以在不阻塞主线程的情况下，以一种可控的方式产生一系列值。这在需要按需获取数据、管理复杂迭代逻辑或构建特定异步模式时，都显得尤为有用。
使用生成器函数时，有哪些潜在的陷阱或最佳实践？
生成器函数虽然功能强大，但在使用过程中，如果不注意一些细节，也可能会遇到一些意想不到的问题。同时，遵循一些最佳实践，能让你的代码更健壮、更易读。
潜在的陷阱：
*忘记 `
号：** 这是最常见的错误之一。如果你定义了一个
function*` 但忘记了星号，它就变成了一个普通的函数，调用它会立即执行，而不是返回一个生成器对象。这会导致你的代码行为与预期完全不符。
多次迭代同一个生成器实例： 生成器对象是“一次性”的。一旦一个生成器实例迭代完毕（
done: true
），它就不能再重新迭代了。如果你想再次遍历，你需要重新调用生成器函数，创建一个新的生成器实例。
function* myGen() { yield 1; yield 2; }const gen = myGen();for (const val of gen) { console.log(val); } // 1, 2for (const val of gen) { console.log(val); } // 什么都不会输出，因为gen已经迭代完毕
需要注意的是，如果你只是调用
next()
方法，那么在同一个生成器实例上调用，它会继续从上次暂停的地方执行。只有在
for...of
循环或者
next()
最终返回
done: true
后，该实例才算“耗尽”。
*`yield
的理解偏差：**
yield*
表达式用于将执行委托给另一个生成器或可迭代对象。它会迭代被委托的生成器，并将其所有
yield
出来的值都传递出去。理解它与简单地
yield` 一个迭代器是不同的。
function* gen1() { yield 'a'; yield 'b'; }function* gen2() { yield 1; yield* gen1(); yield 2; } // gen1的值会被gen2直接yield出去for (const val of gen2()) { console.log(val); } // 1, 'a', 'b', 2
错误地使用
yield*
或者不理解其行为，可能导致意外的迭代顺序或结果。
错误处理： 在生成器内部，可以使用
try...catch
来捕获
yield
表达式或后续代码抛出的错误。同时，生成器对象本身也有
throw(error)
方法，可以从外部向生成器内部注入一个错误，这在处理异步操作的错误时非常有用。如果生成器内部没有捕获错误，它会向外冒泡。
最佳实践：
明确何时需要暂停/恢复： 生成器的核心价值在于其暂停和恢复的能力。只在真正需要这种控制流的场景下使用它，例如处理无限序列、复杂的迭代逻辑或手动管理异步流程。对于简单的迭代，数组的
forEach
或
map
可能更清晰。
结合
for...of
循环使用： 如果你的目标是遍历生成器产生的所有值，
for...of
循环是使用生成器最简洁、最符合语义的方式。它会自动处理
next()
调用和
done
状态。
理解
next()
传入参数的机制：
next(value)
方法可以向暂停的生成器函数内部发送一个值。这个值会成为
yield
表达式的返回值。这使得生成器能够实现双向通信，从而构建出更复杂的协程模型。
function* talker() { console.log('开始'); const input1 = yield '你好'; console.log('收到1:', input1); const input2 = yield '再见'; console.log('收到2:', input2);}const t = talker();console.log(t.next().value); // '你好'console.log(t.next('很高兴认识你').value); // '再见't.next('下次再聊');
这种双向通信能力在实现自定义的异步库或复杂数据处理管道时非常强大。
考虑
async/await
的替代性： 在处理 Promise 相关的异步操作时，
async/await
通常比手动使用生成器更简洁、更易读。
async/await
本质上就是基于生成器和 Promise 实现的语法糖。但如果你的异步逻辑不完全依赖 Promise，或者需要更底层的控制，生成器仍有其用武之地。
保持生成器逻辑的纯粹性： 尽量让生成器函数专注于生成值和控制流程，避免在其中执行过多的副作用。将复杂的计算或副作用逻辑封装到其他函数中，保持生成器的清晰和可测试性。
掌握这些陷阱和最佳实践，能帮助你更自信、更有效地在JavaScript项目中运用生成器函数。
以上就是如何理解JavaScript中的生成器函数？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520717.html
微信扫一扫 
支付宝扫一扫 
