0

0

Javascript中的迭代器和生成器是如何工作的?

夢幻星辰

夢幻星辰

发布时间:2026-01-09 17:11:02

|

221人浏览过

|

来源于php中文网

原创

迭代器和生成器是javascript中实现懒求值与可中断执行的底层机制,核心是next()返回{value, done}对象;对象要可迭代,必须实现[symbol.iterator]()方法并返回含next()的迭代器对象。

javascript中的迭代器和生成器是如何工作的?

迭代器和生成器不是语法糖,而是 JavaScript 中实现“懒求值”和“可中断执行”的底层机制;它们的核心契约是 next() 方法返回 { value, done } 对象,而不是“自动循环”或“类似 for...of 的便利写法”。

迭代器对象必须实现 [Symbol.iterator]() 方法

一个对象要能被 for...ofArray.from()、展开运算符等消费,它必须提供一个返回迭代器对象的 [Symbol.iterator] 方法。这个迭代器对象本身必须有 next() 方法。

常见错误是只实现了 next(),但没把该方法挂到 [Symbol.iterator] 上:

const badIterator = {
  next() { return { value: 1, done: false }; }
};
// ❌ for (let x of badIterator) {} → TypeError: badIterator is not iterable

正确写法:

立即学习Java免费学习笔记(深入)”;

const goodIterable = {
  [Symbol.iterator]() {
    let i = 0;
    return {
      next() {
        if (i < 3) return { value: i++, done: false };
        return { value: undefined, done: true };
      }
    };
  }
};
// ✅ for (let x of goodIterable) {} 正常运行

function* 声明的是生成器函数,调用后返回生成器对象

生成器函数不是普通函数:它不立即执行,调用后只返回一个生成器对象(即符合迭代器协议的对象),该对象同时是可迭代的(自带 [Symbol.iterator] === self)和可遍历的(有 next()return()throw())。

云枫工作室企业网站源代码(.net)4.0
云枫工作室企业网站源代码(.net)4.0

云枫工作室企业网站源代码(.net)Version 4.0 是云枫工作室基于.net环境独立开发的一套适用于企业使用的企业网站系统。.net+access.网站使用了模板动态生成静态页面技术,前台页面是生成纯静态的。网站包括了信息管理,产品管理,新闻管理和在线留言。可以在后台设置网站名称,标题,关键字和网站描述。配置说明:服务器空间需要支持.net2.0,还要有可写的权限(这个是必要的,因为网站前

下载

关键点:

  • yield 暂停执行并产出值,下次 next() 从暂停处继续
  • return 语句会触发 done: true,且其值成为最后一次 next()value
  • 生成器对象不可重用:一旦 done: true,后续所有 next() 都返回 { value: undefined, done: true }
function* count() {
  yield 1;
  yield 2;
  return 'done';
}
const gen = count();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 'done', done: true }
gen.next(); // { value: undefined, done: true } —— 不再恢复

yield* 是委托,不是调用;它展开的是可迭代对象,不是函数调用结果

yield* 后面跟的必须是一个可迭代对象(即具有 [Symbol.iterator] 的东西)。它不是“执行函数然后 yield 结果”,而是“把控制权交给那个迭代器,逐个 yield 它产出的值”。

容易踩的坑:

  • yield* someArray ✅(数组可迭代)
  • yield* someGenerator() ✅(生成器对象可迭代)
  • yield* someFunction ❌(函数本身不可迭代,除非它返回可迭代对象)
  • yield* Promise.resolve([1,2]) ❌(Promise 不可迭代,即使 resolve 的是数组)
function* nums() {
  yield* [10, 20];
  yield* (function* () { yield 30; })();
}
Array.from(nums()); // [10, 20, 30]

生成器内部的 this 绑定和错误传播需手动处理

生成器函数中没有 this 绑定(严格模式下为 undefined),且 try/catch 无法捕获外部注入的错误(如 gen.throw(e))——必须在生成器内部用 try/catch 显式包裹 yield 表达式。

另一个隐性成本:生成器对象保留完整执行上下文(闭包、暂停点),内存占用比普通迭代器高;高频短生命周期场景(如每次请求新建一个)要注意泄漏风险。

function* risky() {
  const data = new Array(1000000).fill('x'); // 大闭包
  try {
    yield 'start';
  } catch (e) {
    console.log('caught:', e.message); // ✅ 只有这里才能捕获 gen.throw()
  }
}

真正难的不是写出 yield,而是判断何时不该用生成器:比如数据已全部在内存、无需暂停、不涉及异步协调时,一个简单数组或 for 循环更直接,也更容易被 JS 引擎优化。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1561

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

241

2024.02.23

php三元运算符用法
php三元运算符用法

本专题整合了php三元运算符相关教程,阅读专题下面的文章了解更多详细内容。

128

2025.10.17

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

151

2025.07.29

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

514

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

698

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5945

2023.08.17

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

0

2026.03.04

热门下载

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

精品课程

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

共58课时 | 5.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

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

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