0

0

如何理解JavaScript中的生成器函数?

betcha

betcha

发布时间:2025-09-18 17:54:02

|

347人浏览过

|

来源于php中文网

原创

生成器函数通过function*和yield实现可暂停、可恢复的执行,返回迭代器对象,支持惰性求值,适用于自定义迭代器、异步控制、无限序列等场景,并需注意一次性使用、双向通信及与async/await的权衡。

如何理解javascript中的生成器函数?

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); // 0
console.log(idGenerator.next().value); // 1
console.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); // 0
console.log(fibGen.next().value); // 1
console.log(fibGen.next().value); // 1
console.log(fibGen.next().value); // 2
// ... 持续调用以获取更多斐波那契数

生成器还可以用于实现状态机。通过

yield
关键字,我们可以将一个复杂的状态转换逻辑分解成多个小的、可暂停的步骤,每次
yield
都代表着状态的一次切换,使得状态机的逻辑更加清晰和易于管理。

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载

总的来说,生成器函数提供了一种强大的能力,可以在不阻塞主线程的情况下,以一种可控的方式产生一系列值。这在需要按需获取数据、管理复杂迭代逻辑或构建特定异步模式时,都显得尤为有用。

使用生成器函数时,有哪些潜在的陷阱或最佳实践?

生成器函数虽然功能强大,但在使用过程中,如果不注意一些细节,也可能会遇到一些意想不到的问题。同时,遵循一些最佳实践,能让你的代码更健壮、更易读。

潜在的陷阱:

  1. *忘记 `

    号:** 这是最常见的错误之一。如果你定义了一个
    function*` 但忘记了星号,它就变成了一个普通的函数,调用它会立即执行,而不是返回一个生成器对象。这会导致你的代码行为与预期完全不符。

  2. 多次迭代同一个生成器实例: 生成器对象是“一次性”的。一旦一个生成器实例迭代完毕(

    done: true
    ),它就不能再重新迭代了。如果你想再次遍历,你需要重新调用生成器函数,创建一个新的生成器实例。

    function* myGen() { yield 1; yield 2; }
    const gen = myGen();
    for (const val of gen) { console.log(val); } // 1, 2
    for (const val of gen) { console.log(val); } // 什么都不会输出,因为gen已经迭代完毕

    需要注意的是,如果你只是调用

    next()
    方法,那么在同一个生成器实例上调用,它会继续从上次暂停的地方执行。只有在
    for...of
    循环或者
    next()
    最终返回
    done: true
    后,该实例才算“耗尽”。

  3. *`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*
    或者不理解其行为,可能导致意外的迭代顺序或结果。

  4. 错误处理: 在生成器内部,可以使用

    try...catch
    来捕获
    yield
    表达式或后续代码抛出的错误。同时,生成器对象本身也有
    throw(error)
    方法,可以从外部向生成器内部注入一个错误,这在处理异步操作的错误时非常有用。如果生成器内部没有捕获错误,它会向外冒泡。

最佳实践:

  1. 明确何时需要暂停/恢复: 生成器的核心价值在于其暂停和恢复的能力。只在真正需要这种控制流的场景下使用它,例如处理无限序列、复杂的迭代逻辑或手动管理异步流程。对于简单的迭代,数组的

    forEach
    map
    可能更清晰。

  2. 结合

    for...of
    循环使用: 如果你的目标是遍历生成器产生的所有值,
    for...of
    循环是使用生成器最简洁、最符合语义的方式。它会自动处理
    next()
    调用和
    done
    状态。

  3. 理解

    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('下次再聊');

    这种双向通信能力在实现自定义的异步库或复杂数据处理管道时非常强大。

  4. 考虑

    async/await
    的替代性: 在处理 Promise 相关的异步操作时,
    async/await
    通常比手动使用生成器更简洁、更易读。
    async/await
    本质上就是基于生成器和 Promise 实现的语法糖。但如果你的异步逻辑不完全依赖 Promise,或者需要更底层的控制,生成器仍有其用武之地。

  5. 保持生成器逻辑的纯粹性: 尽量让生成器函数专注于生成值和控制流程,避免在其中执行过多的副作用。将复杂的计算或副作用逻辑封装到其他函数中,保持生成器的清晰和可测试性。

掌握这些陷阱和最佳实践,能帮助你更自信、更有效地在JavaScript项目中运用生成器函数。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

74

2025.12.04

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

208

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

296

2023.10.25

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

395

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

575

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

502

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

502

2023.08.10

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

75

2025.09.05

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

22

2026.01.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号