一、概念

遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。

Iterator的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是ES6有一种新的遍历方式,for...of,而Iterator的主要作用,就是支持此操作。

二、是否具备遍历器(Iterator)接口

在ES6中,有些数据结构原生具备Iterator接口(比如数组),即不用任何处理,就可以被for...of循环遍历,有些就不行(比如对象)。原因在于,这些数据结构原生部署了Symbol.iterator属性(详见下文),另外一些数据结构没有。

凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。

在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。它们三者不需要我们手动部署Symbol.iterator属性就可以使用for...of遍历功能。而普通对象使用for...of遍历就会报错,因为它没有部署该接口。

三、部署接口

如果你需要使原本不具备for...of遍历功能的集合具备该功能,就需要手动为它部署。ES6有许多内置的Symbol值,这些就是接口。

下面我们利用迭代器中的原理来给对象生成一个迭代器,实现让对象可以使用for...of

var person={name: 'zz',age: 18}//给person对象添加一个iterator接口person[Symbol.iterator] = function(){//使用object.keys()方法把j对象中的k值读取出来存在数组当中var arr = Object.keys(person);var i = 0;return {//ES6中next()迭代方法,自动迭代
                     next(){if(i < arr.length){//如果done为false,继续迭代return {//返回迭代的最后结果,如果是一个对象,那么for of的时候需要用解构
                                 value: {k  : arr[i],val: person[arr[i++]]},done: false}}else{//如果done为true,继续迭代return {value: null,done : true}}}}}//解构获取返回得到的对象,输出k值,val值for(var {key,val} of person){console.log(key,val);}

我们可以看到:

1、通过为person对象部署Symbol.iterator接口,就使它实现了for...of 功能。

2、Symbol.iterator中返回一个对象,该对象包含一个next() 方法,定义了遍历功能。

3、next方法中的value和done,value是遍历过程中返回的键值对信息,done是一个表示遍历是否结束的布尔值。

补充:

1、遍历器对象除了具有next方法,还可以具有return方法和throw方法。如果你自己写遍历器对象生成函数,那么next方法是必须部署的,return方法和throw方法是否部署是可选的。

  当一个解构在遍历的时候异常提前退出(比如break,continue或者出错)的时候,就会调用return方法,其次,return方法必须返回一个对象。

  至于throw方法,则是用于抛出错误,Generator.prototype.throw这里不展开讲了,感兴趣的可以搜索一下。

2、用ES6新功能Generator函数来实现Symbol.iterator接口,事半功倍。

var yieldIterator = {};
yieldIterator[Symbol.iterator] = function* () {yield 1;yield 2;yield 3;
};[...yieldIterator] // [1, 2, 3]

注意,yield* 后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口。

对Generator不了解的可以戳 ES6 Generator的语法 ,这里不多说。

3、至于可以使用Array.from转换成数组的类数组对象,部署iterator有一种很简单的方法,即直接使用数组的[Symbol.iterator]接口。

fakeArray.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

四、默认调用Iterator接口的场景

1、解构赋值

2、扩展运算符(...)

3、上文提到的 yield*

4、由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,都默认调用,如

  for...of

  Array.from()

  Map(), Set(), WeakMap(), WeakSet()

  Promise.all()

  Promise.race()

5、字符串是一个类似数组的对象,原生也具有Iterator接口

转载于:https://www.cnblogs.com/Double-Zhang/p/8920671.html

ES6 的遍历器接口 Iterator相关推荐

  1. ES6之遍历器Iterator

    目录 一.什么是遍历器 二.如何部署遍历器 三.遍历器的应用 1. 解构赋值 2. 扩展运算符 3. Iterator与Generator函数 4. return和throw 总结 一.什么是遍历器 ...

  2. es6 迭代器(遍历器)Iterator 自定义遍历器 lterator/简单模拟values方法 for of运行机制 Array/Set/Map默认迭代器接口 对象设置迭代器

    文章目录 迭代器 Iterator 用处 (需要自定义遍历数据的时候) 自定义 遍历器 lterator 简单模拟values方法 Array Set Map 默认迭代器接口 entries valu ...

  3. 第十四节:ES6的 Iterator 遍历器到底是什么?

    对一个事物足够热爱,才会有这样的热情... 冲着这位同学的学习热情,前端君今晚就给大家再来一发. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用 ...

  4. iterator [ɪtə'reɪtə] 遍历器

    lterator 遍历器 遍历器是一种接口,它为不同的数据结构提供了统一的访问机制. 如果一个数据结构具有遍历器接口,那么就可以依次处理该数据结构的成员. 当前 javascript 用来表示集合的数 ...

  5. js的遍历器(Iterator)

    js的遍历器(Iterator)是什么 JavaScript 原有的表示"集合"的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就有 ...

  6. 遍历器 Iterator

    遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员) I ...

  7. Iterator遍历器的使用

    Iterator遍历器的作用 JS语言中包含众多具有"集合"性质的数据结构--比如数组.对象.Set以及Map等,很多时候用户会将其进行组合使用,比如数组里边嵌套对象,或是数组里边 ...

  8. es6数组初始化_ES6 迭代器(Iterator)和 for...of循环使用方法

    一.什么是迭代器? 生成器 概念在Java,Python等语言中都是具备的,ES6也添加到了JavaScript中.Iterator可以使我们 不需要初始化集合,以及索引的变量 ,而是使用迭代器对象的 ...

  9. 【ES6】Set Map数据结构、Iterator遍历器

    Set() Set类似于数组,但是成员的值都是唯一的,没有重复的值.Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); let arr = [2, 3, ...

最新文章

  1. Chevereto图片托管php源码_亲测-分享最新微信付费进群收费进群系统源码-附带搭建教...
  2. 基础数据仓库环境搭建(三)Zookeeper的安装与配置和操作
  3. Spring注释详解
  4. MM 常用table
  5. php array分组,php数组分组简单例子
  6. 查询范围_企二哥:查询企业经营范围的三种方法
  7. 【转】PHP发送邮件之PHPMailer
  8. HDU1285 确定比赛名次【拓扑排序】
  9. PHP中钩子函数的实现与认识
  10. Android登录界面设计
  11. [二分]Kayaking Trip
  12. android 实现果冻动画效果,Android实现果冻滑动效果的控件
  13. win10+睡眠+计算机命令,Win10关闭系统休眠——使用powercfg –h off命令轻松节省硬盘容量...
  14. JS获取按键的代码,Js如何屏蔽用户的按键,Js获取用户按键对应的ASII码(兼容所有浏览器)...
  15. 微信小程序云开发项目——多肉植物销售小程序
  16. 计算机网络自顶向下第一章读书笔记
  17. 面试篇-- Http、TCP/IP协议与Socket之间的区别
  18. 《KVM虚拟化技术实战和原理解析》读书笔记(三)
  19. 悬镜安全 | 第五期 全球一周安全情报(0820-0826)
  20. 发声单元的原理/扬声器的工作原理

热门文章

  1. android 滑动翻转动画,Android编程实现3D滑动旋转效果的方法
  2. android gdb 远程调试工具,gdb输入/输出错误远程调试到Android
  3. SpringSecurity 流程图
  4. AudioScheduledSourceNode
  5. Linux echo
  6. python 菜品识别_利用百度智能云结合Python体验图像识别(来自qylruirui)
  7. ue4 迁移模型_UE4虚幻引擎学习云笔记(六)-关卡设计入门-[5.地形快速入门]
  8. java kotlin相互调用_Kotlin的互操作——Kotlin与Java互相调用
  9. Linux学习总结(27)——CentOS7及以上系统的systemctl命令使用介绍
  10. 疯狂软件对Oracle放弃Java EE的看法