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

什么是迭代器_javascript中如何自定义迭代?

冬伟同学_8497

冬伟同学_8497

发布时间:2025-12-13 20:43:02

|

366人浏览过

|

来源于php中文网

原创

迭代器是JavaScript中按需遍历数据的机制,核心是实现[Symbol.iterator]方法返回含next()的对象,每次调用返回{value, done};可借助生成器函数快速创建,yield产出值,自动满足迭代协议。

什么是迭代器_javascript中如何自定义迭代?

迭代器是 JavaScript 中一种统一遍历数据结构的机制,它允许你按需逐个获取集合中的值,而无需一次性加载全部内容。核心在于实现 [Symbol.iterator] 方法,返回一个具有 next() 方法的对象,每次调用 next() 返回 { value, done } 形式的对象。

迭代器的基本结构

一个合法的迭代器对象必须满足:

  • next() 方法必须存在,且每次调用返回 { value: any, done: boolean }
  • done: true 表示遍历结束,之后的 next() 调用仍应返回 { value: undefined, done: true }
  • 可选地支持 return()(用于提前终止)和 throw()(用于错误注入),但非必需

为普通对象添加自定义迭代

默认情况下,普通对象不可被 for...of 遍历。只需在对象上部署 [Symbol.iterator] 方法即可:

示例:让对象按属性名顺序迭代键值对

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

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
const obj = { a: 1, b: 2, c: 3 };
obj[Symbol.iterator] = function* () {
  for (const key of Object.keys(this).sort()) {
    yield [key, this[key]];
  }
};
<p>for (const [k, v] of obj) {
console.log(k, v); // 'a' 1, 'b' 2, 'c' 3
}

用生成器函数快速创建迭代器

生成器函数(function*)天然返回符合迭代器协议的对象,是最简洁的自定义方式:

  • 函数体中用 yield 暂停并产出值
  • 每次调用 next() 从上次暂停处继续执行
  • 函数返回后自动设 done: true

示例:实现一个范围迭代器

function* range(start, end) {
  for (let i = start; i < end; i++) {
    yield i;
  }
}
<p>const iter = range(2, 5);
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log([...range(0, 3)]); // [0, 1, 2]

迭代器与可迭代协议的区别

注意两个概念不等价:

  • 迭代器:是那个有 next() 方法的对象(如 range(0,3) 的返回值)
  • 可迭代对象:是实现了 [Symbol.iterator] 方法的对象(如数组、字符串、或上面加了该方法的 obj)
  • 所有可迭代对象可通过 for...of、展开运算符、Array.from() 等使用;迭代器本身通常只直接调用 next()

基本上就这些。自定义迭代不复杂但容易忽略协议细节,关键是守住 next() 的返回格式和 done 的语义。

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

豆包大模型

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

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

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

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

VibeKnow
VibeKnow Hot

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

WorkBuddy

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

相关专题

更多
java中boolean的用法
java中boolean的用法

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

2150

2023.11.13

java boolean类型
java boolean类型

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

163

2025.11.30

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

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

6184

2023.10.24

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

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

3144

2024.02.23

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

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

1832

2025.10.17

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

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

1798

2023.08.03

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

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

2844

2023.09.04

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

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

6184

2023.10.24

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

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