0

0

什么是javascript的迭代器和可迭代协议_for-of循环如何工作

幻影之瞳

幻影之瞳

发布时间:2026-01-08 18:34:02

|

515人浏览过

|

来源于php中文网

原创

JavaScript迭代器必须实现可调用的next()方法,返回{value, done}对象;可迭代对象需部署Symbol.iterator方法返回迭代器;for-of仅依赖该协议,不推测结构,错误即报错。

什么是javascript的迭代器和可迭代协议_for-of循环如何工作

JavaScript 迭代器对象必须实现 next() 方法

迭代器是一个有状态的对象,核心是它必须带一个 next() 方法,每次调用返回形如 { value: any, done: boolean } 的对象。只要满足这个结构,哪怕手动构造,JS 就认它是迭代器。

常见错误是以为“有 next 属性就行”,但漏掉可调用性——next 必须是函数,否则 for-of 会报 TypeError: iterator.next is not a function

  • done: true 后再调用 next(),仍应返回 { value: undefined, done: true }(规范要求)
  • 迭代器通常不重用:同一个迭代器对象多次用于 for-of,第二次会从上次暂停处继续,而非重头开始
  • 手写时别忘了闭包保存内部状态(比如数组索引),否则多次调用会混乱

Symbol.iterator 是可迭代协议的入口点

一个对象要被 for-of、解构、Array.from() 等识别为“可迭代的”,必须在其原型链上提供 Symbol.iterator 方法,且该方法返回一个迭代器对象。

内置类型如 ArrayStringMapSet 都实现了它;普通对象默认没有,所以 for-of 直接遍历 plain object 会报错 TypeError: XXX is not iterable

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

Rose.ai
Rose.ai

一个云数据平台,帮助用户发现、可视化数据

下载
  • 自定义类可通过在原型或实例上定义 [Symbol.iterator]() { return ... } 来支持迭代
  • 箭头函数不能用作 Symbol.iterator 方法,因为它没有 this 绑定,无法访问实例数据
  • 如果 Symbol.iterator 返回的不是迭代器(比如返回数字或 null),for-of 会立即抛 TypeError

for-of 循环底层只做三件事

for-of 不关心数据结构是什么,只按固定流程执行:取迭代器 → 反复调用 next() → 检查 done → 提取 value。它不依赖 length、下标或键名。

const arr = [1, 2, 3];
const it = arr[Symbol.iterator]();
let result;
while (!(result = it.next()).done) {
  console.log(result.value); // 依次输出 1, 2, 3
}
  • 每次循环体执行前,自动调用一次 next();若 donetrue,循环终止
  • breakreturn 退出时,引擎**不会**自动调用 return()(即使迭代器有),这是容易被忽略的资源清理盲区
  • 异步迭代器(Symbol.asyncIterator)需用 for-await-of,混用会静默失败或报错

字符串和类数组对象的迭代行为差异

字符串按 Unicode 码点迭代(正确处理 emoji 和代理对),而 argumentsNodeList 等类数组对象虽有 length 和数字键,但默认不可迭代——除非显式部署 Symbol.iterator(现代 DOM API 已补全 NodeList.prototype[Symbol.iterator])。

常见陷阱:用 Array.from(someNodeList) 能工作,是因为它内部检测到 Symbol.iterator;但直接 for-of someNodeList 在旧环境会失败。

  • IE 完全不支持 Symbol.iterator,需用 for 循环 + length 回退
  • Array.from({ length: 3 }) 返回 [undefined, undefined, undefined],因为该对象无 Symbol.iteratorArray.from 改用 length + undefined 填充逻辑
  • 手动让类数组可迭代,最简方式:obj[Symbol.iterator] = Array.prototype[Symbol.iterator];(前提是它有合法的 length 和索引属性)
真正难的不是写出一个能跑的迭代器,而是理解 for-of 对协议的严格依赖——它既不推测结构,也不容错兜底。一旦 Symbol.iterator 缺失或 next() 返回格式错,就立刻崩,没商量。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1031

2023.08.02

java中boolean的用法
java中boolean的用法

在Java中,boolean是一种基本数据类型,它只有两个可能的值:true和false。boolean类型经常用于条件测试,比如进行比较或者检查某个条件是否满足。想了解更多java中boolean的相关内容,可以阅读本专题下面的文章。

367

2023.11.13

java boolean类型
java boolean类型

本专题整合了java中boolean类型相关教程,阅读专题下面的文章了解更多详细内容。

42

2025.11.30

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1089

2024.03.01

java中break的作用
java中break的作用

本专题整合了java中break的用法教程,阅读专题下面的文章了解更多详细内容。

120

2025.10.15

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

261

2025.10.24

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

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

760

2023.08.03

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

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

精品课程

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

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

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