ES6 迭代器 (`Iterator`)使用总结
Iterator
(迭代器)是 ES6 引入的一种 接口,用于 顺序访问 可迭代对象(Array
、Set
、Map
、String
、arguments
、自定义对象等)。
Iterator(迭代器)的作用有三个:
- 为各种数据结构提供一个统一的、简便的访问接口
- 使数据结构的成员能够按某种次序排列
- ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费
1. 迭代器的基本概念
(1) 迭代器是什么?
- 迭代器是一种 特殊对象,提供
next()
方法,每次调用都会返回:{ value: 当前值, done: 是否完成 }
- 当
done: true
时,表示迭代结束。
Iterator 的遍历过程
// Iterator 的遍历过程如下:
1. 创建一个指针对象,指向当前数据结构的起始位置
2. 第一次调用指针对象的 next 方法,可以将指针指向数据结构的第一个成员
3. 第二次调用指针对象的 next 方法,指针就指向数据结构的第二个成员
4. 不断调用指针对象的 next 方法,直到它指向数据结构的结束位置// 每一次调用 next 方法,都会返回一个包含 value 和 done 两个属性的对象
{value: 当前成员的值,done: 布尔值,表示遍历是否结束
}
2. 生成迭代器
(1) 手动创建迭代器
function createIterator(arr) {let index = 0;return {next: function () {return index < arr.length? { value: arr[index++], done: false }: { value: undefined, done: true };}};
}let iterator = createIterator(["a", "b", "c"]);
console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }
📌 每次 next()
调用,都会返回 value
并前进。
(2) 使用 Symbol.iterator
所有 可迭代对象(Array
、Set
、Map
等)都有 默认的迭代器,可以用 Symbol.iterator
访问:
let arr = ["x", "y", "z"];
let iterator = arr[Symbol.iterator]();console.log(iterator.next()); // { value: 'x', done: false }
console.log(iterator.next()); // { value: 'y', done: false }
console.log(iterator.next()); // { value: 'z', done: false }
console.log(iterator.next()); // { value: undefined, done: true }
📌 数组、字符串、Set、Map 都有 Symbol.iterator
,可直接迭代。
(3) 自定义对象的迭代器
普通对象没有默认迭代器,需手动实现:
let myObj = {data: [10, 20, 30],[Symbol.iterator]: function () {let index = 0;return {next: () => {return index < this.data.length? { value: this.data[index++], done: false }: { value: undefined, done: true };}};}
};let iter = myObj[Symbol.iterator]();
console.log(iter.next()); // { value: 10, done: false }
console.log(iter.next()); // { value: 20, done: false }
console.log(iter.next()); // { value: 30, done: false }
console.log(iter.next()); // { value: undefined, done: true }
📌 对象没有默认迭代器,需实现 Symbol.iterator
才能用 for...of
。
3. for...of
遍历迭代器
所有 实现 Symbol.iterator
的对象,都可以用 for...of
遍历:
let arr = ["A", "B", "C"];for (let char of arr) {console.log(char);
}
// A
// B
// C
📌 相比 forEach()
,for...of
可与 break
、continue
配合使用。
4. 可迭代对象
✅ 可以使用 for...of
、Symbol.iterator
的对象
Array
String
Set
Map
arguments
NodeList
- 自定义对象(需实现
Symbol.iterator
)
5. Set
和 Map
的迭代器
(1) Set
迭代
let mySet = new Set(["apple", "banana", "cherry"]);
let setIter = mySet[Symbol.iterator]();console.log(setIter.next()); // { value: 'apple', done: false }
console.log(setIter.next()); // { value: 'banana', done: false }
console.log(setIter.next()); // { value: 'cherry', done: false }
console.log(setIter.next()); // { value: undefined, done: true }
📌 Set
按插入顺序存储,迭代返回唯一值。
(2) Map
迭代
let myMap = new Map([["name", "Alice"],["age", 25]
]);for (let [key, value] of myMap) {console.log(key, value);
}
// name Alice
// age 25
📌 Map
迭代时返回 [key, value]
数组。
6. 迭代器 vs 生成器
特性 | 迭代器 (Iterator) | 生成器 (Generator) |
---|---|---|
创建方式 | 手动实现 next() | function* 生成 |
使用 Symbol.iterator | 需要手动实现 | 生成器自动实现 |
可暂停执行 | ❌ 否 | ✅ 是(可 yield ) |
示例:生成器
function* generatorFunction() {yield "A";yield "B";yield "C";
}let gen = generatorFunction();
console.log(gen.next()); // { value: 'A', done: false }
console.log(gen.next()); // { value: 'B', done: false }
console.log(gen.next()); // { value: 'C', done: false }
console.log(gen.next()); // { value: undefined, done: true }
📌 生成器更简洁,支持 yield
暂停执行。
7. Iterator 使用场景
7.1 解构赋值
// 对数组和 Set 结构进行解构赋值时,会默认调用 Iterator 接口
let set = new Set().add('a').add('b').add('c');
let [x, y] = set; // x='a'; y='b'
7.2 扩展运算符
// 扩展运算符(...)也会调用默认的 Iterator 接口
let str = 'hello';
[...str] // ['h', 'e', 'l', 'l', 'o']let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']
7.3 yield*
// yield* 后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口
let generator = function* () {yield 1;yield* [2, 3, 4];yield 5;
};for (let v of generator()) {console.log(v);
}
// 1, 2, 3, 4, 5
8. 注意事项
8.1 对象的 for…of 循环
// 对象默认不具备 Iterator 接口,不能直接使用 for...of
let obj = { a: 1, b: 2, c: 3 };
for (let value of obj) {console.log(value); // TypeError: obj is not iterable
}// 正确的遍历对象方式
// 1. 使用 Object.keys()
for (let key of Object.keys(obj)) {console.log(key + ': ' + obj[key]);
}// 2. 使用 Object.entries()
for (let [key, value] of Object.entries(obj)) {console.log(key + ': ' + value);
}
8.2 Iterator 接口与 Generator 函数
// 使用 Generator 函数实现 Iterator 接口
let obj = {*[Symbol.iterator]() {yield 'hello';yield 'world';}
};for (let x of obj) {console.log(x);
}
// hello
// world
9. 最佳实践
9.1 为类部署 Iterator 接口
class Collection {constructor() {this.items = [];}add(item) {this.items.push(item);}*[Symbol.iterator]() {for (let item of this.items) {yield item;}}
}let collection = new Collection();
collection.add('foo');
collection.add('bar');for (let value of collection) {console.log(value);
}
// foo
// bar
9.2 异步迭代器
// ES2018 引入了异步迭代器
const asyncIterable = {async *[Symbol.asyncIterator]() {yield 'hello';yield 'async';yield 'iteration';}
};(async () => {for await (const x of asyncIterable) {console.log(x);}
})();
// hello
// async
// iteration
10. 适用场景
✅ 适用于
- 遍历数组、字符串、Set、Map
- 自定义可迭代对象
- 流式处理数据(类似分页加载)
- 避免一次性加载大数据(生成器)
11. 总结
Iterator
是 ES6 提供的一种接口,用于顺序访问集合。Symbol.iterator
让对象变成可迭代,可用于for...of
、spread
。Set
、Map
、Array
、String
默认实现Symbol.iterator
,可直接迭代。- 生成器 (
Generator
) 自动创建迭代器,可暂停执行 (yield
),更强大。
相关文章:
ES6 迭代器 (`Iterator`)使用总结
Iterator(迭代器)是 ES6 引入的一种 接口,用于 顺序访问 可迭代对象(Array、Set、Map、String、arguments、自定义对象等)。 Iterator(迭代器)的作用有三个: 为各种数据结构提供一个…...
赛博算命之 ”梅花易数“ 的 “JAVA“ 实现 ——从玄学到科学的探索
hello~朋友们!好久不见! 今天给大家带来赛博算命第三期——梅花易数的java实现 赛博算命系列文章: 周易六十四卦 掐指一算——小六壬 更多优质文章:个人主页 JAVA系列:JAVA 大佬们互三哦~互三必回!…...
MongoDB开发规范
分级名称定义P0核心系统需7*24不间断运行,一旦发生不可用,会直接影响核心业务的连续性,或影响公司名誉、品牌、集团战略、营销计划等,可能会造成P0-P2级事故发生。P1次核心系统这些系统降级或不可用,会间接影响用户使用…...
让相机自己决定拍哪儿!——NeRF 三维重建的主动探索之路
我在 NeRF 中折腾自动探索式三维重建的心得 写在前面: 最近我在研究三维重建方向,深切感受到 NeRF (Neural Radiance Fields) 在学术界和工业界都备受瞩目。以往三维重建通常要依赖繁琐的多视图几何管线(比如特征匹配、深度估计、网格融合等&…...
git reset和git revert的区别
git reset和git revert都是实现撤销的命令。 git reset是通过回退提交记录来实现撤销,原来指向的记录就像没提交过一样。 git revert是用于远程分支。执行后会产生一个新提交记录,而新提交的记录跟上一级的内容是相同的。 #恢复到当前上一级记录, 其中 …...
免费windows pdf编辑工具Epdf
Epdf(完全免费) 作者:不染心 时间:2025/2/6 Github: https://github.com/dog-tired/Epdf Epdf Epdf 是一款使用 Rust 编写的 PDF 编辑器,目前仍在开发中。它提供了一系列实用的命令行选项,方便用户对 PDF …...
11.PPT:世界动物日【25】
目录 NO12 NO34 NO56 NO789视频音频 NO10/11/12 NO12 设计→幻灯片大小→ →全屏显示(16:9)确定调整标题占位符置于图片右侧:内容占位符与标题占位符左对齐单击右键“世界动物日1”→复制版式→大小→对齐 幻灯片大小…...
计算机网络的组成,功能
目录 编辑 什么是计算机网络? 一个最简单的计算机网络 集线器(Hub): 交换机(Switch) 路由器(router) 互联网 计算机网络的组成:从组成部分看 硬件 软件 协议…...
LabVIEW铅酸蓄电池测试系统
本文介绍了基于LabVIEW的通用飞机铅酸蓄电池测试系统的设计与实现。系统通过模块化设计,利用多点传感器采集与高效的数据处理技术,显著提高了蓄电池测试的准确性和效率。 项目背景 随着通用航空的快速发展,对飞机铅酸蓄电池的测试需求也…...
Vue3+codemirror6实现公式(规则)编辑器
实现截图 实现/带实现功能 插入标签 插入公式 提示补全 公式验证 公式计算 需要的依赖 "codemirror/autocomplete": "^6.18.4","codemirror/lang-javascript": "^6.2.2","codemirror/state": "^6.5.2","cod…...
Mac M1 ComfyUI 中 AnyText插件安装问题汇总?
Q1:NameError: name ‘PreTrainedTokenizer’ is not defined ? 该项目最近更新日期为2024年12月,该时间段的transformers 版本由PyPI 上的 transformers 页面 可知为4.47.1. A1: transformers 版本不满足要求,必须降级transformors &#…...
Github 2025-02-01 开源项目月报 Top20
根据Github Trendings的统计,本月(2025-02-01统计)共有20个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目8TypeScript项目3Jupyter Notebook项目2Rust项目2HTML项目2C++项目1Ruby项目1JavaScript项目1Svelte项目1非开发语言项目1Go项目1Oll…...
k8s部署go-fastdfs
前置环境:已部署k8s集群,ip地址为 192.168.10.1~192.168.10.5,总共5台机器。 1. 创建provisioner制备器(如果已存在,则不需要) 制备器的具体部署方式可参考我的上一篇文章: k8s部署rabbitmq-CSDN博客文章浏览阅读254次,点赞3次,收藏5次。k8s部署rabbitmqhttps://blo…...
快速优雅解决webview_flutter不能Safari调试的问题
这个问题,网上一搜,又是让你去检索WKWebView,找到FWFWebViewHostApi.m文件,然后再改 iOS 的代码, 加一行 self.inspectable YES; 我们开发Flutter项目,尽量还是不要去改插件里的代码,好了不费…...
Linux——基础命令1
$:普通用户 #:超级用户 cd 切换目录 cd 目录 (进入目录) cd ../ (返回上一级目录) cd ~ (切换到当前用户的家目录) cd - (返回上次目录) pwd 输出当前目录…...
区块链技术:Facebook 重塑社交媒体信任的新篇章
在这个信息爆炸的时代,社交媒体已经成为我们生活中不可或缺的一部分。然而,随着社交平台的快速发展,隐私泄露、数据滥用和虚假信息等问题也日益凸显。这些问题的核心在于传统社交媒体依赖于中心化服务器存储和管理用户数据,这种模…...
268. 丢失的数字
文章目录 1.题目2.思路3.代码 1.题目 268. 丢失的数字 给定一个包含 [0, n] 中 n 个数的数组 nums ,找出 [0, n] 这个范围内没有出现在数组中的那个数。 示例 1: **输入:**nums [3,0,1] **输出:**2 解释:n 3&a…...
机器学习-关于线性回归的表示方式和矩阵的基本运算规则
最近在学习机器学习的过程中,发现关于线性回归的表示和矩阵的运算容易费解,而且随着学习的深入容易搞混,因此特意做了一些研究,并且记录下来和大家分享。 一、线性模型有哪些表示方式? 器学习中,线性模型…...
el-table表格点击单元格实现编辑
使用 el-table 和 el-table-column 创建表格。在单元格的默认插槽中,使用 div 显示文本内容,单击时触发编辑功能。使用 el-input 组件在单元格中显示编辑框。data() 方法中定义了 tableData,tabClickIndex: null,tabClickLabel: ,用于判断是否…...
10分钟带你了解前端Vue Router
作者:CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境:WebStorm 目录 一、Vue Router 的基本概念 1.1 什么是 Vue Router? 1.2 Vue Router 的核心功能 二、Vue Router 的原理 2.1 路由模式 2.1.1 Hash 模式 2.1.2 Histo…...
maven如何分析指定jar包的依赖路径
在Maven项目中,分析指定JAR包的依赖路径是非常有用的,尤其是在解决依赖冲突时。Maven提供了一个命令行工具来帮助查看特定依赖的传递性依赖(即依赖路径)。以下是具体步骤: 使用 mvn dependency:tree 命令 打开命令行或…...
react的antd中Cascader级联选择如何回显
如果你的数据都是这个样子的 {"id": 1015,"pid": 0,"name": "电力、热力、燃气及水生产和供应业","children": [{"id": 1403,"pid": 1015,"name": "热力",},{"id": 140…...
工业物联网平台-视频识别视频报警新功能正式上线
前言 视频监控作为中服云工业物联网平台4.0的功能已经上线运行。已为客户服务2年有余,为客户提供多路视频、实时在线监视和控制能力。服务客户实时发现现场、产线、设备出现随机故障、事故等,及时到场处理维修。 视频识别&视频报警新功能当前正式上…...
【HarmonyOS NEXT】systemDateTime 时间戳转换为时间格式 Date,DateTimeFormat
【HarmonyOS NEXT】systemDateTime 时间戳转换为时间格式 Date,DateTimeFormat 一、前言 在鸿蒙应用开发中,经常需要将时间戳转化为标准时间格式。即:一串数字转化为年月日时分秒。 时间戳通常是一个长整型的数字,如 163041600…...
React 设计模式:实用指南
React 提供了众多出色的特性以及丰富的设计模式,用于简化开发流程。开发者能够借助 React 组件设计模式,降低开发时间以及编码的工作量。此外,这些模式让 React 开发者能够构建出成果更显著、性能更优越的各类应用程序。 本文将会为您介绍五…...
在rtthread中,scons构建时,它是怎么知道是从rtconfig.h找宏定义,而不是从其他头文件找?
在rtthread源码中,每一个bsp芯片板级目录下都有一个 SConstruct scons构建脚本的入口, 在这里把rtthread tools/目录下的所有模块都添加到了系统路径中: 在tools下所有模块中,最重要的是building.py模块,在此脚本里面…...
寒假2.6--SQL注入之布尔盲注
知识点 原理:通过发送不同的SQL查询来观察应用程序的响应,进而判断查询的真假,并逐步推断出有用的信息 适用情况:一个界面存在注入,但是没有显示位,没有SQL语句执行错误信息,通常用于在无法直接…...
嵌入式面试题 C/C++常见面试题整理_7
一.什么函数不能声明为虚函数? 常见的不能声明为虚函数的有:普通函数(非成员函数):静态成员函数;内联成员函数;构造函数;友元函数。 1.为什么C不支持普通函数为虚函数?普通函数(非成员函数)只能被overload,不能被override,声明为虚函数也没有什么意思…...
说一下 Tcp 粘包是怎么产生的?
TCP 粘包是什么? TCP 粘包(TCP Packet Merging) 是指多个小的数据包在 TCP 传输过程中被合并在一起,接收方读取时无法正确分辨数据边界,导致数据解析错误。 TCP 是流式协议,没有数据包的概念,…...
基于STM32设计的仓库环境监测与预警系统
目录 项目开发背景设计实现的功能项目硬件模块组成设计思路系统功能总结使用的模块的技术详情介绍总结 1. 项目开发背景 随着工业化和现代化的进程,尤其是在制造业、食品业、医药业等行业,仓库环境的监控和管理成为了至关重要的一环。尤其是在存储易腐…...
在uniapp中修改打包路径
在uniapp中修改打包路径,主要涉及到对manifest.json文件的编辑。以下是详细的步骤: 1. 确定当前uniapp项目的打包配置位置 uniapp项目的打包配置通常位于项目的根目录下的manifest.json文件中。这个文件包含了项目的全局配置信息,包括应用的…...
Kali Linux 渗透测试环境配置(Metasploit + Burp Suite)
一、Kali Linux 系统准备 首先,确保你已经成功安装了 Kali Linux 系统。可以从官方网站下载镜像文件,并通过 U 盘引导安装等常规方式完成系统部署。建议使用最新稳定版本,以获取最新的软件包支持和安全更新。 安装完成后,登录系…...
Oracle 变更redo log文件位置
更改Oracle数据库的Redo log文件位置,可以按照以下步骤操作。 1.查询当前Redo log文件信息 select * from v$log; select * from v$logfile;通过查询结果可知Redo log文件放在/oradata/redofile 目录下。 2.拷贝redo log文件到新的位置/Data/redolog $cd /orada…...
力扣题库第495题目解析
文章目录 1.题目再现2.思路分析&&示例说明2.1第一个示例2.2第二个示例 3.代码解释 1.题目再现 这个题目的名字叫做提莫攻击,如果是玩游戏的小伙伴对于这个场景就很熟悉了; 这个实际上是说:已知的条件会给我们一个数组,在…...
Milvus 存储设计揭秘:从数据写入到 Segment 管理的全链路解析
作为一款云原生向量数据库,Milvus 的高效查询性能有赖于其独特的存储架构设计。然而,在实际使用过程中,许多社区用户常常会遇到以下问题: 为什么频繁调用 flush 后,查询速度会变慢? 数据删除后,…...
单片机通讯中的时序图:初学者的入门指南
一、什么是时序图? 在单片机的世界里,时序图是一种非常重要的工具,它用于描述信号在时间上的变化规律。简单来说,时序图就像是信号的“时间线”,它展示了各个信号线在不同时间点上的电平状态。通过时序图,我…...
ASP.NET Core JWT
目录 Session的缺点 JWT(Json Web Token) 优点: 登录流程 JWT的基本使用 生成JWT 解码JWT 用JwtSecurityTokenHandler对JWT解码 注意 Session的缺点 对于分布式集群环境,Session数据保存在服务器内存中就不合适了&#…...
Linux基础命令之Nginx中的rewrite功能(重新)
一、什么是Rewrite Rewrite也称URL Rewrite,即URL重写,就是把传入Web的请求重定向到其他URL的过程。 1. URL Rewrite最常见的应用是URL伪静态化,是将动态页面显示为静态页面方式的一种技术。比如http://www.123.com/news/index.php?id123 使…...
4 前端前置技术(上):AJAX技术、Axios技术(前端发送请求)
文章目录 前言一、Ajax技术(从服务端获取数据,发送各种请求)0 接口文档管理:使用apipost等接口测试软件创建接口便于前端后端分离测试1 基本概念2 原生Ajax使用示例(几年前的早期用法) 二、 Axios技术(对原…...
三星手机为何不大力扩展中国市场?
三星在中国市场的手机销量长期低迷,主要原因可以归结为以下几点,这也解释了为什么三星可能没有大力扩展中国市场的计划: 1. 市场竞争激烈 中国市场已经被华为、OPPO、vivo、小米和苹果等品牌牢牢占据,这些品牌在产品设计、本地化…...
Linux在x86环境下制作ARM镜像包
在x86环境下制作ARM镜像包(如qemu.docker),可以通过QEMU和Docker的结合来实现。以下是详细的步骤: 安装QEMU-user-static QEMU-user-static是一个静态编译的QEMU二进制文件,用于在非目标架构上运行目标架构的二进制文…...
【算法篇】贪心算法
目录 贪心算法 贪心算法实际应用 一,零钱找回问题 二,活动选择问题 三,分数背包问题 将数组和减半的最小操作次数 最大数 贪心算法 贪心算法,是一种在每一步选择中都采取当前状态下的最优策略,期望得到全局最优…...
硬件电路基础
目录 1. 电学基础 1.1 原子 1.2 电压 1.3 电流 1.电流方向: 正极->负极,正电荷定向移动方向为电流方向,与电子定向移动方向相反。 2.电荷(这里表示负电荷)运动方向: 与电流方向相反 1.4 测电压的时候 2. 地线…...
iOS 音频录制、播放与格式转换
iOS 音频录制、播放与格式转换:基于 AVFoundation 和 FFmpegKit 的实现 在 iOS 开发中,音频处理是一个非常常见的需求,比如录音、播放音频、音频格式转换等。本文将详细解读一段基于 AVFoundation 和 FFmpegKit 的代码,展示如何实现音频录制、播放以及 PCM 和 AAC 格式之间…...
探索前端框架的未来:Svelte 的崛起
引言 在前端开发的世界里,框架更新换代的速度仿佛光速。从 jQuery 到 Angular,再到如今大热的 React 和 Vue,开发者们不断追逐更轻量、更快、更易于维护的框架。如今,Svelte 正悄然崛起,并引发了关于前端框架未来的热烈…...
Gitea+Gridea 创建个人博客
历史文档存档,该方法目前已经无法使用,部署方法可供参考 Gitea部分 1.关于Gitea Gitea 是一个面向开源及私有软件项目的托管平台,是全球最大的代码托管平台之一。它采用 Git 分布式版本控制系统,为开发者提供了代码托管、版本控…...
DeepSeek-V3:开源多模态大模型的突破与未来
目录 引言 一、DeepSeek-V3 的概述 1.1 什么是 DeepSeek-V3? 1.2 DeepSeek-V3 的定位 二、DeepSeek-V3 的核心特性 2.1 多模态能力 2.2 开源与可扩展性 2.3 高性能与高效训练 2.4 多语言支持 2.5 安全与伦理 三、DeepSeek-V3 的技术架构 3.1 模型架构 3…...
通过制作docker镜像的方式在阿里云部署前端后台服务
前端Dockerfile文件的内容: FROM nginx:版本,如果不指定,默认是latest COPY dist/ /usr/share/nginx/html/dist COPY nginx.conf /etc/nginx/nginx.conf EXPOSE 端口 前端sh脚本文件内容: appName项目名 tar -xvf dist.tar …...
无界构建微前端?NO!NO!NO!多系统融合思路!
文章目录 微前端理解1、微前端概念2、微前端特性3、微前端方案a、iframeb、qiankun --> 使用比较复杂 --> 自己写对vite的插件c、micro-app --> 京东开发 --> 对vite支持更拉跨d、EMP 方案--> 必须使用 webpack5 --> 很多人感觉不是微前端 --> 去中心化方…...
Linux(CentOS)安装 Nginx
CentOS版本:CentOS 7 Nginx版本:1.24.0 两种安装方式: 一、通过 yum 安装,最简单,一键安装,全程无忧。 二、通过编译源码包安装,需具备配置相关操作。 最后附:设置 Nginx 服务开…...