讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript迭代协议是什么_如何让对象可迭代?

大宇吖_4935

大宇吖_4935

发布时间:2026-01-07 20:41:06

|

129人浏览过

|

来源于php中文网

原创

JavaScript迭代协议是一套约定:对象需实现[Symbol.iterator]方法并返回符合迭代器协议的对象;迭代器协议要求next()方法返回{value: any, done: boolean}结构,done为true时结束迭代。

javascript迭代协议是什么_如何让对象可迭代?

JavaScript 迭代协议不是某个 API 或函数,而是一套约定:只要对象实现了 [Symbol.iterator] 方法,并返回一个符合迭代器协议的对象,它就能被 for...of、Array.from、展开运算符(...)等消费。

什么是迭代器协议?

迭代器协议规定:一个迭代器对象必须有 next() 方法,该方法返回形如 { value: any, done: boolean } 的对象。当 done 为 true 时,迭代结束。

常见错误是只实现 next(),却忘了它必须返回正确结构——比如返回 { v: 123 } 或 undefined,会导致 for...of 报错 TypeError: Iterator result undefined is not an object。

示例(手动构造一个合法迭代器):

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

const iterator = {
  i: 0,
  next() {
    if (this.i < 3) {
      return { value: this.i++, done: false };
    }
    return { value: undefined, done: true };
  }
};

// 可以用 for...of 消费(但注意:它本身还不是可迭代对象)
for (const x of iterator) console.log(x); // ❌ TypeError:iterator 不可迭代

如何让对象可迭代?

关键是在对象上定义 [Symbol.iterator] 方法,且该方法必须返回一个迭代器对象(即带 next() 的对象)。

  • [Symbol.iterator] 必须是函数,不能是箭头函数(否则无法用 this 绑定上下文)
  • 每次调用 [Symbol.iterator] 应返回**新迭代器**,否则多次遍历会相互干扰(比如两个 for...of 同时跑,共享同一个计数器)
  • 若想复用已有数组/字符串的迭代行为,可直接 return arr[Symbol.iterator]()

示例(让自定义对象支持 for...of):

Java Maven Code Review
Java Maven Code Review

审查Java Maven项目(ZIP压缩包或GitLab仓库URL),检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载
const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    return {
      next: () => {
        if (current <= this.to) {
          return { value: current++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (const n of range) console.log(n); // 1, 2, 3
console.log([...range]); // [1, 2, 3]

哪些内置类型默认可迭代?

数组、字符串、Map、Set、TypedArray、arguments 对象、NodeList 都原生实现了 [Symbol.iterator]。但普通对象({})、Object.prototype、JSON、Function 等不支持。

常见误区:

  • for...in 遍历的是对象的**可枚举属性名**,和迭代协议无关;它不保证顺序,也不处理 Symbol 键
  • Object.keys(obj) 返回数组,所以能展开,但 obj 本身仍不可迭代
  • 给普通对象加 [Symbol.iterator] 不会影响 for...in 行为,两者完全独立

性能提示:如果只是临时需要遍历键或值,优先用 Object.keys(obj) + for...of,而不是给对象挂迭代器——后者会污染实例,且多数场景没必要。

Generator 函数是最简捷的实现方式

不用手写 next() 和状态管理,用 function* 自动返回符合协议的迭代器。

注意点:

  • Generator 函数本身不是迭代器,调用后返回的才是
  • 不能在 generator 内部用 this 访问外层对象(除非显式 .bind()),因为 generator 函数体不绑定 this
  • generator 支持 yield* 委托,适合组合多个可迭代源

示例(更简洁安全的 range 实现):

const range = {
  from: 1,
  to: 3,
  *[Symbol.iterator]() {
    for (let i = this.from; i <= this.to; i++) {
      yield i;
    }
  }
};

console.log([...range]); // [1, 2, 3]

最易被忽略的一点:迭代协议是“按需计算”的,next() 只在每次循环时才执行。这意味着你可以用它表达无限序列(如自然数)、延迟加载的数据流,甚至 I/O 流——但也要小心,忘记设终止条件会导致死循环。

热门AI工具

更多
VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2035

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2982

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1016

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3379

2025.09.10

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

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

2130

2023.11.13

java boolean类型
java boolean类型

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

143

2025.11.30

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

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

5924

2023.10.24

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

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

2664

2024.02.23

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

0

2026.10.08

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn