快速了解 ES6 的迭代器(快速了解 es6 的迭代器的方法)
toyiye 2024-09-14 13:44 7 浏览 0 评论
ECMAScript 6 规范新增的迭代器是一种新的遍历机制,能够更清晰、高效、方便地实现迭代。所有通过迭代器访问的结构都实现了 Iterator 接口,且能够在 for...of 循环中应用。
可迭代协议
可迭代协议指的是实现 Iterable 接口并同时支持迭代的自我识别能力和创建实现 Iterator 接口的对象的能力。任何实现 Iterable 接口的对象都有一个 Symbol.iterator 属性,这个属性引用默认迭代器。默认迭代器是一个函数,调用之后会产生一个实现 Iterator 接口的对象。内置的可迭代对象有 String、Array、Map 和 Set 等等。
下面给出几个例子,可以检查是否存在默认迭代器属性:
let obj = {};
let num = 3;
// Object 和 Number 都没有实现迭代器函数
console.log(obj[Symbol.iterator]); // undefined
console.log(num[Symbol.iterator]); // undefined
let arr = ["小明", "小李"];
let set = new Set().add('小明').add('小李');
// Array 和 Set 都实现了迭代器函数
console.log(arr[Symbol.iterator]); // [Function: values]
console.log(set[Symbol.iterator]); // [Function: values]
// 下面获取迭代器
console.log(arr[Symbol.iterator]()); // Object [Array Iterator] {}
console.log(set[Symbol.iterator]()); // [Set Iterator] { '小明', '小李' }
实际上,实现可迭代协议的迭代对象都可以在如下场景使用:
- for-of 循环
- 数组解构
- 扩展操作符
- Array.from()
- 集合与映射
- 由 Promise 组成的可迭代对象
- yield* 操作符
let arr = ["小玲", "小霞", "小星", "小民"];
// for-of循环
for (let v of arr) {
console.log(v);
}
// 数组解构
let [a1, a2, a3, a4] = arr;
console.log(a1, a2, a3, a4); // 小玲 小霞 小星 小民
// 扩展操作符
let arr2 = [...arr];
console.log(arr2); // [ '小玲', '小霞', '小星', '小民' ]
// Array.from()
let arr3 = Array.from(arr);
console.log(arr3); // [ '小玲', '小霞', '小星', '小民' ]
如果对象原型链上的父类实现了 Iterable 接口,那这个对象也会实现 Iterable 接口:
如果对象原型链上的父类实现了 Iterable 接口,那这个对象也就实现了这个接口:
class List extends Array {}
let list = new List("小玲", "小霞", "小星", "小民");
for (let v of list1) {
console.log(v);
}
// 小玲
// 小霞
// 小星
// 小民
迭代器协议
迭代器协议定义了产生一些列值的标准方法。而对象只有实现了 next() 方法才能成为迭代器。对象使用 next() 遍历数据时,每次成功都会返回一个 IteratorResult 对象,其中包含迭代返回的下一个值;所有的值都迭代完后,会返回一个默认返回值;若不调用 next(),则无法知道迭代器的当前位置。
next() 方法返回的 IteratorResult 包含两个属性:
- done:布尔值。表示是否还可以调用 next() 获取下一个值。 迭代器遍历完毕会返回 true;否则返回 false。
- value:迭代器返回的值。done 为 true 可省略或 undefined。
可以通过以下简单的数组来演示:
let arr = ["小明", "小李"];
// 获取迭代器
let iter = arr[Symbol.iterator]();
// 执行迭代
console.log(iter.next()); // { value: '小明', done: false }
console.log(iter.next()); // { value: '小李', done: false }
console.log(iter.next()); // { value: undefined, done: true }
console.log(iter.next()); // { value: undefined, done: true }
在迭代期间修改了迭代对象,会反映在迭代对象上,如下所示:
let arr = ["小明", "小李"];
// 获取迭代器
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { value: '小明', done: false }
console.log(iter.next()); // { value: '小李', done: false }
arr.splice(2, 0, "小虎");
console.log(iter.next()); // { value: '小虎', done: false }
console.log(iter.next()); // { value: undefined, done: true }
console.log(iter.next()); // { value: undefined, done: true }
这是因为使用 next() 获取对象只是使用游标来记录历程。
注意:迭代器维护着一个指向可迭代对象的引用,因此迭代器会阻止垃圾回收程序回收可迭代对象。
自定义迭代器
因为每个迭代器也实现了Iterable 接口,所以它们可以用在任何期待可迭代对象的地方,比如for-of 循环:
每个实现了 Iterable 接口的迭代器都可以用在任何可迭代对象的地方,如 for-of 循环。下面自定义一个实现迭代器的类:
class List {
constructor() {
this.index = 0;
this.data = arguments;
}
[Symbol.iterator]() {
return {
next: () => {
if (this.index < this.data.length) {
return { value: this.data[this.index++], done: false};
}
this.index = 0;
return {done: true, value: undefined};
}
}
}
}
let list = new List("小玲", "小霞", "小星", "小民");
let iter = list[Symbol.iterator]();
console.log(iter.next()); // { value: '小玲', done: false }
console.log(iter.next()); // { value: '小霞', done: false }
console.log(iter.next()); // { value: '小星', done: false }
console.log(iter.next()); // { value: '小民', done: false }
console.log(iter.next()); // { done: true, value: undefined }
任何实现 Iterable 接口的数据结构都可以实现 Iterator 接口的结构 “消费”。
提前终止迭代器
当使用 for-of 循环迭代器时,如果不想迭代下去,可以通过 break、continue、return 或 throw 提前退出。
for (let v of list) {
if (v === '小星') {
console.log("提前退出");
break;
}
console.log(v);
}
// 小玲
// 小霞
// 提前退出
总结
迭代器是 ES6 新增的重要功能,提供了一个可以由任意对象实现的接口,并连续返回迭代对象中的每个值。任何实现 Iterable 接口的对象都有一个 Symbol.iterator 属性,这个属性引用默认迭代器。当一个对象中存在 Symbol.iterator 时,该对象就会被认为是可迭代对象。
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)