0

0

javascript迭代器是什么_for of循环怎么工作【教程】

幻影之瞳

幻影之瞳

发布时间:2026-01-19 22:31:02

|

369人浏览过

|

来源于php中文网

原创

javascript迭代器是实现特定协议的对象,必须有next()方法返回{value, done}对象;for...of通过调用[symbol.iterator]()获取迭代器并循环调用next()遍历,不直接操作数据结构。

javascript迭代器是什么_for of循环怎么工作【教程】

JavaScript 迭代器不是语法糖,而是可被 for...of 消费的、有固定接口的对象;for...of 本身不直接遍历数组或字符串,它只调用对象的 [Symbol.iterator]() 方法获取迭代器,再反复调用其 next()

迭代器对象长什么样?

一个合法迭代器必须满足:调用它的 next() 方法,返回形如 { value: any, done: boolean } 的对象。一旦 donetrue,后续调用应始终返回 { value: undefined, done: true }

常见错误现象:手动实现迭代器时忘记在末尾返回 done: true,导致 for...of 死循环。

  • next() 必须是无参函数(不能带参数,即使某些场景如 generator.next(value) 支持传参,那是生成器协议的扩展,非基础迭代器)
  • 迭代器可以是“消耗型”的:同一迭代器多次调用 next() 会推进内部状态,不可重用
  • 数组、Map、Set、字符串等内置类型都默认实现了 [Symbol.iterator],所以能直接用于 for...of

for...of 的实际执行步骤

它不关心数据结构,只依赖协议。执行时分三步:

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

  • 检查目标是否有 [Symbol.iterator] 方法(存在且为函数)
  • 调用该方法,得到一个迭代器对象
  • 循环调用该迭代器的 next(),直到返回的 donetrue

如果目标没有迭代器接口,会抛出 TypeError: xxx is not iterable

示例:手动模拟 for...of 行为

VIVA
VIVA

一个免费的AI创意视觉设计平台

下载
const arr = [10, 20, 30];
const iterator = arr[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
  console.log(result.value); // 10 → 20 → 30
  result = iterator.next();
}

自定义可迭代对象要注意什么?

只要在对象上定义 [Symbol.iterator] 方法,并让它返回一个符合迭代器协议的对象,就能被 for...of 消费。

容易踩的坑:

  • 忘记用 Symbol.iterator 字面量写法(不能写成字符串 "Symbol.iterator"
  • 返回的不是对象,或对象缺少 next 方法
  • next() 中未正确维护内部索引或状态,导致重复或跳过值

简短示例:让普通对象支持 for...of

const obj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]() {
    const keys = Object.keys(this);
    let index = 0;
    return {
      next: () => {
        if (index < keys.length) {
          return { value: this[keys[index++]], done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (const val of obj) {
  console.log(val); // 1 → 2 → 3
}

Generator 函数和迭代器的关系

Generator 函数(function*)调用后返回的正是一个迭代器对象,它天然符合协议 —— 所以 generator 是最省力的自定义迭代器方式。

但注意:generator 返回的迭代器,其 next() 支持传参,这是对基础协议的增强;而 for...of 永远不会传参给 next(),所以你无需在 generator 中处理传入值,除非你手动调用 next(value)

性能提示:generator 有额外开销(闭包、状态机),简单遍历优先用数组方法或传统循环;只有需惰性求值、异步流控制、或复杂状态切换时,才值得用。

真正容易被忽略的是:for...ofundefinednull、普通对象(无 [Symbol.iterator])直接报错,它不像 for...in 那样“宽容”。别指望它能自动降级处理 —— 接口缺失就是缺失。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
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

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

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

760

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

java基础知识汇总
java基础知识汇总

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

1566

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

649

2023.11.24

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
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号