在javascript中表示“集合”的数据结构,主要有Array,Object,Map,Set。

Iterator(遍历器)接口是为各种不同的数据结构提供了统一的访问机制。任何数据结构具有Iterator接口,就可以完成遍历操作(依次排序进行遍历)。

Iterator遍历的过程:

创建一个指针对象,指向数据结构的初始位置——调用指针对象的next方法,指向数据结构成员——不断调用next方法,直到指向数据结构的结束位置。

var it = makeIterator(['a','b']);

function makeIterator(array){
var nextIndex = 0;
return{
next:function(){
return nextIndex < array.length ?
{value:array[nextIndex++],done:false} :
{value:undefined,done:true}
}
}
} it.next()

默认的Iterator接口
Iterator借口的目的在于:为所有数据结构,提供统一的访问机制。即用for/of循环,当使用for/of进行遍历的时候,该循环会自动去寻找Iterator接口。

默认的Iterator接口部署在数据结构的Symbol.iterator属性,一个数据结构只要有Symbol.Iterator属性,就是“可遍历的”,Symbol.iterator属性本身是一个函数,执行这个函数,返回 一个遍历器。

ES6中原生具备Iterator接口的数据结构如下:

Array  Map  Set  String  TypedArray  函数的arguments对象  NodeList对象

let arr = [1,2,3,4,5]
let iter = arr[Symbol.iterator]();
iter.next()

一个对象具备Iterator接口,必须在Symbol.iterator的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)

只要某个数据结构部署了Iterator接口,就可以使用拓展运算符将其转化为数组。

let arr = [...iterator];

var str = 'hello';
[...str] //["h", "e", "l", "l", "o"]

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

let generator = function* (){
yield 1;
yield* [2,3,4];
yield 5;
}
var it = generator();
it.next(); //{value: 1, done: false}
it.next() //{value: 2, done: false}
it.next() //{value: 3, done: false}
it.next() //{value: 4, done: false}
it.next() //{value: 5, done: false}
it.next() //{value: undefined, done: true}

数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了Iterator接口,如下:

for/of    Array.from()   Map()    Set()   WeakMap()   WeakSet()  Promise.all()  Promise.rece()

1,字符串的Iterator接口

var str = 'hi';
typeof str[Symbol.iterator] //'function' var a = str[Symbol.iterator]();
a.next() //{value: "h", done: false}
a.next() //{value: "i", done: false} [...str] //["h", "i"]

以前字符串转化为数组:str.split(""),ES6中可以使用Iterator进行遍历加入数组中,相当简洁。

这里写一个能用for/of进行遍历对象的方法键值的方法:

function* entries(obj) {
for (let key of Object.keys(obj)) {
yield [key, obj[key]];
}
} for (let [key, value] of entries(obj)) {
console.log(key, '->', value);
}
// a -> 1
// b -> 2
// c -> 3

其他遍历方法的比较:

forEach内部写break命令不奏效,会报错,return语句是可以写的。

for/in是用来遍历对象的键名,数组的索引,主要适用于遍历对象。

for/of主要是用来遍历数组的值,可以搭配break,continue,return等,提供了遍历所有数据结构的统一操作接口。

Iterator接口(遍历器)和for/of循环的更多相关文章

  1. Iterator(遍历器) 和 for...of 循环

    是generator的前置知识 generator :https://www.cnblogs.com/wangtong111/p/11322961.html 遍历器(Iterator)就是这样一种机制 ...

  2. ES6学习笔记(十三)Iterator遍历器和for...of循环

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

  3. 疑问:Iterator 遍历器和数据集合各种遍历方法的区别

    https://es6.ruanyifeng.com/#docs/iterator Iterator(遍历器)的概念 Iterator 接口主要供for...of消费 Iterator 的遍历过程是: ...

  4. 遍历器Iterator--指针对象

    一. 什么是遍历器 1. 遍历器对象(Iterator) 遍历器对象本质上是一个指针对象,该对象有一个next方法,调用next方法返回一个 含有value和done属性的对象{value: val/ ...

  5. 【前端】【javascript】es6中的遍历器接口Iterator

    好久没发文章啦-.-为了证明我还活着,我决定从笔记里面抓一篇还算不乱比较像文章的发出来... 这些笔记是我在学es6的时候断断续续记录的,最近会一份一份整理陆陆续续发出来,顺便也自己再看一遍.我学习e ...

  6. Iterator遍历器 调用Symbol.Iterator属性,遍历器对象。

    Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员. 第二次调 ...

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

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

  8. Iterator 遍历器

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

  9. ES6的 Iterator 遍历器到底是什么?

    这节课要讲的是ES6中的Iterator. for...of为啥不遍历Object对象 第十三节我们讲了简单又实用的for...of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发 ...

随机推荐

  1. js之意想不到的结果

    js 是弱类型语言 ,在进行计算时 如果遇到不能计算的单位,就会进行默认转换 1.typeof NaN  结果为 “number”  原因:NaN 表示 不是不是一个数字(Not a Number), ...

  2. redis中间件

    redis的集群:集群策略:主从复制(从库从主库同步获取数据,本身不提供服务)哨兵(监控主库和从库,当主库挂的时候自动把从库选一个切换为主库,主库存放的是全量数据)集群参考:https://blog. ...

  3. SpringBoot项目后台对接微信支付开发——微信统一下单接口开发

    开始没找到微信支付的sdk.自己根据官方给的接口文档纯手写,各种xml转JSON,JSON转xml,加密解密,签名....整个人都是崩溃的 开发的第三天,发现有官方的sdk.心情一下子豁然开朗,整个人 ...

  4. 第19届亚太零售商大会 | 奇点云CEO行在受邀出席发表演讲

    2019年9月5日—7日,第19届亚太零售商大会在重庆举行. 亚太零售商大会作为世界三大零售盛会之一,是亚太地区零售行业最具规模.最具影响力的零售行业盛会.本次大会以“新零售·新消费·新动力·合作与共 ...

  5. MOOC(11)- 获取cookie后存到json中

    获取cookie后转成字典格式 把字典格式cookie存到json数据中 需要在表格中写好关键字,判断是否写cookie.是否读cookie 在需要用cookie的时候根据键去json中取值 # 1. ...

  6. particlesJS is not defined

    插件或者js文件在引入时需要注意引入顺序,每次都找很久的错误 一般引入min.js就可以,min.js意思就是压缩的js文件 引入时应该先加入min类的文件在引入配置文件 比如particles插件, ...

  7. android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码

    Android精选源码 android拖拽下拉关闭效果源码 一款优雅的中国风Android App源码 EasySignSeekBar一个漂亮而强大的自定义view15 android仿蘑菇街,蜜芽宝 ...

  8. 吴裕雄--天生自然 python开发学习笔记:一劳永逸解决绘图出现中文乱码问题方法

    import numpy as np import matplotlib.pyplot as plt x = np.random.randint(0,20,10) y = np.random.rand ...

  9. JDBC源码分析(加载过程)

    public static void main(String[] args) {     String url = "jdbc:mysql://172.16.27.11:3306/jdbcT ...

  10. PEAKS|NovoHMM|Nover|DeepNovo|MAYUPercolator|UniprotKB|Swiss-prot|Mascot|SEQUEST|X!Tandem|pFind|MaxQuant|Msconvert|PEPMASS|LC|

    质谱仪: 质谱分析法是先将大分子电离为带电粒子,按质核比分离,由质谱仪识别电信号得到质谱图. Top-down直接得到结果是蛋白. Bottom down使用shutgun方法得到结果是肽段. 由蛋白 ...