文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

从理解到实现轻松掌握 ES6 中的迭代器

2024-12-03 17:39

关注

JavaScript 中除了 Array 之外,ES6 还新增加了 Map、Set 结构,当我们需要操作这些数据时,就需要一种统一的接口来处理这些不同的数据结构。ES6 中新增加的 Iterator(迭代器)就提供了这样一种机制。

Symbol.iterator 支持的数据结构

ES6 中提供了 Symbol.iterator 方法,该方法返回一个迭代器对象,目前 Array、Set、Map 这些数据结构默认具有 Symbol.iterator 属性,如下所示,可以看到 Object 类型是没有的。

  1. console.log([][Symbol.iterator]()); // Object [Array Iterator] {} 
  2. console.log((new Map())[Symbol.iterator]()); // [Map Entries] {  } 
  3. console.log((new Set())[Symbol.iterator]()); // [Set Iterator] {  } 
  4. console.log({}[Symbol.iterator]); // undefined 

除了上面提到这些数据结构,JavaScript 中一些类似数组的对象也默认具有 Symbol.iterator 属性,例如:字符串、arguments 对象、DOM 的 NodeList 对象。

  1. const str = 'nodejs'
  2. console.log(str[Symbol.iterator]()); // Object [String Iterator] {} 
  3.  
  4. for (const val of str) { 
  5.   console.log(val); // n o d e j s 
  1. function print() { 
  2.   console.log(arguments[Symbol.iterator]()); // Object [Array Iterator] {} 
  3.   for (const val of arguments) { 
  4.     console.log(val); // n o d e 
  5.   } 
  6. print('n''o''d''e'
  1. const divNodeList = document.getElementsByTagName('div'
  2. console.log(divNodeList[Symbol.iterator]()) // Array Iterator {} 
  3. for (const div of divNodeList) { 
  4.  // 会输出每个 div 标签 
  5.  console.log(div); 

迭代器对象的 next 方法

调用可迭代对象的 Symbol.iterator 方法会返回一个迭代器对象,它的接口中有一个 next 方法,该方法返回 value 和 done 两个属性,其中 value 属性是当前成员的值,done 属性表示遍历是否结束。了解生成器函数(Generator)的可能不会陌生,同样的当你执行一个生成器函数也会得到一个迭代器对象,但是要区分 生成器和迭代器不是一个概念。

  1. const arr = ['N''o''d''e']; 
  2. const iterator = arr[Symbol.iterator](); 
  3.  
  4. console.log(iterator.next()); // { value: 'N', done: false } 
  5. console.log(iterator.next()); // { value: 'o', done: false } 
  6. console.log(iterator.next()); // { value: 'd', done: false } 
  7. console.log(iterator.next()); // { value: 'e', done: false } 
  8. console.log(iterator.next()); // { value: undefined, done: true } 

上例中声明一个数组 arr,调用 arr 的 Symbol.iterator 方法创建了一个迭代器对象 iterator 之后不断调用 next 方法返回当前数组内容,直到 next 方法返回值 done 为 true 则该数组访问完毕。

Iterator 接口遍历

解构赋值

数组、Set、Map 解构赋值时,会默认调用 Symbol.iterator 方法。注意 Map 调用 Symbol.iterator 方法返回的是一个 entries 方法,该方法返回的是一个新的迭代器对象且按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组,所以调用 Map 实例的 keys 或 values 方法也会返回一个新的迭代器对象。

  1. const set = new Set().add('n').add('o'); 
  2. const map = new Map().set('d').set('e'); 
  3. const [xSet, ySet] = set
  4. console.log(xSet, ySet) // n o 
  5. const [xMap, yMap] = map.keys(); 
  6. console.log(xMap, yMap) // d e 

扩展运算符

ES6 中的扩展运算符(...)也会默认调用数组、Set、Map 等结构的 Symbol.iterator 方法。

  1. const set = new Set('node'); 
  2. const [x, y, ...z] = set
  3. console.log(x, y, z); // n o [ 'd''e' ] 

for...of 循环

ES6 借鉴了 C++、Python 等语言引入了 for...of 循环,该循环内部也会调用 Symbol.iterator 方法,只要具有 Iterator 接口的数据结构都可以使用。

  1. const set = new Set().add('n').add('o'); 
  2.  
  3. for (const val of set) { 
  4.   console.log(val); 

for...of 循环在执行中还可以使用 break; 中断迭代器的执行。以下示例,修改循环语句在执行第一次 val 等于 n 之后执行 break。

  1. for (const val of set) { 
  2.   console.log(val); // n 
  3.   if (val === 'n') break; 

其它方法

数组默认是支持 Iterator 接口,所以任何接收数组做为参数的方法也都会默认调用 Symbol.iterator 方法,如下所示:

  1. const set = new Set().add('n').add('o'); 
  2. console.log(Array.from(set)); // [ 'n''o' ] 
  3. Promise.all(set).then(val => console.log(val)) // [ 'n''o' ] 
  4. Promise.race(set).then(val => console.log(val)) // n 

自定义迭代器

迭代协议

  1. const  myIterator = { 
  2.   // for...of 循环会用到 
  3.   [Symbol.iterator]: function() { return this }, 
  4.    
  5.   // 标准的迭代器接口方法 
  6.   nextfunction() { 
  7.    // ... 
  8.   } 

如果用 TypeScript 写法描述如下:

  1. // 遍历器接口 Iterable 
  2. interface Iterable { 
  3.  [Symbol.iterator]: Iterator 
  4.  
  5. // 迭代器对象 
  6. interface Iterator { 
  7.  next(value?: any): IterationResult, 
  8.  
  9. // next 方法返回值定义 
  10. interface IterationResult { 
  11.  value: any
  12.   done: boolean 

基于普通函数的迭代器实现

迭代器的函数实现可以是一个普通函数也可以是一个生成器函数,我们先以普通函数为例,定义一个 Range 构造函数,用来输出两个数值区域的所有值。

  1. function Range(start, end) { 
  2.   this.id = start; 
  3.   this.end = end
  4. Range.prototype[Symbol.iterator] = function() { return this } 
  5. Range.prototype.next = function next() { 
  6.   if (this.id > this.end) { 
  7.     return { value: undefined, done: true } 
  8.   } 
  9.  
  10.   return { value: this.id++, done: false } 
  11. const r1 = new Range(0, 3); 
  12. const it = r1[Symbol.iterator]() 
  13. for (const id of r1) { 
  14.   console.log(id); // 0,1,2,3 

基于生成器函数的迭代器实现

使用生成器函数(Generator)实现是最简单的,只要使用 yield 语句返回每一次的值即可。如下所示:

  1. Range.prototype[Symbol.iterator] = function* () { 
  2.   while (this.id <= this.end) { 
  3.     yield this.id++; 
  4.   } 

异步迭代器

到目前为止我们上面讲解的都是同步模式的迭代器,这个很好理解,因为我们的数据源本身也就是同步的,但是在 Node.js 中一次网络 I/O 请求或者一次文件 I/O 请求,它们都是基于事件是异步的,所以我们就不能像使用 Symbol.iterator 的方式来使用。ECMAScript 2018 标准中提供了 **Symbol.asyncIterator **属性,这是一个异步迭代器,如果一个对象设置了该属性,它就是异步可迭代对象,相应的我们要使用 for await...of 循环遍历数据。

自定义异步迭代器

  1. function Range(start, end) { 
  2.   this.id = start; 
  3.   this.end = end
  4. // 与上面不同,function 前我们增加了 async 关键字 
  5. Range.prototype[Symbol.asyncIterator] = async function* () { 
  6.   while (this.id <= this.end) { 
  7.     yield this.id++; 
  8.   } 
  9. const r1 = new Range(0, 3); 
  10. console.log(r1[Symbol.asyncIterator]()); // Object [AsyncGenerator] {} 
  11. for await (const id of r1) { 
  12.   console.log(id); // 0,1,2,3 

与同步迭代器的不同

异步迭代器的支持目前没有默认设定了 [Symbol.asyncIterator] 属性的 JavaScript 内建的对象。不过,WHATWG(网页超文本应用技术工作小组)Streams 会被设定为第一批异步可迭代对象,[Symbol.asyncIterator] 最近已在设计规范中落地。

下一节我们将会讲解异步迭代器在 Node.js 中的使用,欢迎关注。

Reference

[1]你不知道的JavaScript(中卷): https://book.douban.com/subject/26854244/[2]可迭代协议: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols[3]Symbol.asyncIterator: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator

本文转载自微信公众号「Nodejs技术栈」,可以通过以下二维码关注。转载本文请联系Nodejs技术栈公众号。 

 

来源:Nodejs技术栈内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯