重学JS(七)——Iterator

作者 : 开心源码 本文共3693个字,预计阅读时间需要10分钟 发布时间: 2022-05-11 共78人阅读

内容导读

有人一定会有疑问了,不使用它我也可以遍历集合,forEach,for in使用的好好的,学这个干嘛。浅显来讲,遍历器就像一个数组,你只需不断地调使用next(),就可以从头读到尾了。所以我们只需取以上原生对象的Symbol.iterator属性,执行他就可以取得一个遍历器。生成器会返回一个遍历器,它可以通过next()函数控制进度。实际用时,只要要对目标对象部署Symbol.iterator接口。暂时想不到需要部署Symbol.iterator接口的场景,希望原生的几种数据结构就够使用了,别让js变太复杂啊= =水平有限,只写的出这点东西。

前篇async原理中已经接触了遍历器概念。本篇就略微系统的学习下这个知识。

语法

遍历器是一种接口,它为不同的数据访问结构提供统一的访问机制,主要使用于for of循环。它使得数据结构的成员可以够按某种次序排列。

有人一定会有疑问了,不使用它我也可以遍历集合,forEach,for in使用的好好的,学这个干嘛。ES6新添加了set和map两种集合,得有个方法遍历他们。就算没有它们,chrome还有个令人崩溃的现象:

pre class=”brush:js;toolbar:false”>var obj = { “4a”:2, “1”:2, “3b”:2};for(var key in obj){ console.log(key);} //1 4a 3b

chrome下key值的遍历顺序并不是按写入顺序,写在第二个的1跑到了第一位打印出来,其余一部分浏览器是按写入顺序来遍历的,不同浏览器的遍历顺序可可以会有不同。那怎样办?
读一遍遍历器的使用途。它使得数据结构的成员可以够按某种次序排列。此时按某种次序几个字显得格外耀眼。至于该问题的处理方法会在下文提到。

遍历过程

直接在代码上说明过程

pre class=”brush:js;toolbar:false”>var it = new Iter('a','b','c'); //伪代码,假设iter生成了一个遍历器,成员是a,b,c//第一次调使用next(),指向第一个成员it.next(); // { value: “a”, done: false }//再次调使用,会指向后一个成员it.next(); // { value: “b”, done: false }//不断调使用next方法,能到达数据结构的结束位置。it.next(); // { value: “c”, done: false}it.next(); //{value:undefined,done:true}

next()方法会返回一个对象,包含value和done两个属性,value是当前成员的值,done表示遍历能否结束。
浅显来讲,遍历器就像一个数组,你只需不断地调使用next(),就可以从头读到尾了。

原生具有遍历器的对象

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

既然Map原生就有遍历器对象,那我们使用它来代替对象存储数据,处理浏览器遍历顺序不一致问题。

pre class=”brush:js;toolbar:false”>var m = new Map([ ['4a',2], ['1',2], ['3b',2]]);for(let [key, value] of m){ console.log(key)} //4a 1 3b

在chrome上按顺序打了出来。注意,上面代码用的是for of而不是for in。for of是专门使用来遍历Iterator(遍历器)的。对象之所以没有默认部署 Iterator 接口,是由于对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。

ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性。所以我们只需取以上原生对象的Symbol.iterator属性,执行他就可以取得一个遍历器。

pre class=”brush:js;toolbar:false”>var arr = ['a','b','c'];var it = arr[Symbol.iterator](); //这里遍历器就生成了,这次是真的it.next(); //{value: “a”, done: false}it.next(); //{value: “b”, done: false}it.next(); //{value: “c”, done: false}it.next(); //{value:undefined,done:true}

Iterator和Generator

还记得前文的例子吗

pre class=”brush:js;toolbar:false”>var x = 1;function *foo(){ x++; yield 'hello'; x++; console.log(x);}var it = foo();it.next(); //{value:'hello',done:false} console.log(x); //2it.next(); //3 {value:undefined,done:true}

生成器会返回一个遍历器,它可以通过next()函数控制进度。遍历器的每个成员就是yield后面跟的值。所以使用它来生成一个遍历器是最简单的,不使用写next()函数。

pre class=”brush:js;toolbar:false”>let obj = { * [Symbol.iterator]() { //注意前面的*号,它是个生成器,使用它来返回一个遍历器。 yield '4a'; yield '1'; yield '3b'; }};for (let x of obj) { console.log(x);} //4a 1 3b

一个数据结构只需部署了Symbol.iterator属性,就被视为具备 iterator 接口,即可以使用for…of循环遍历它的成员。for…of循环内部调使用的就是数据结构的Symbol.iterator方法。上例中,Obj部署了Symbol.iterator接口,所以它可以被for of遍历。

默认用遍历器的场景

解构赋值
扩散运算符
yield*
for…of
Array.from()
Map(), Set(), WeakMap(), WeakSet()(比方new Map([['a',1],['b',2]]))
Promise.all()
Promise.race()

在上面的场合中,浏览器会自动调使用数据的遍历器。

模拟遍历器

遍历器主要需要实现的是next函数,且返回的对象为{value:1,done:false}格式。

pre class=”brush:js;toolbar:false”>class myIterator{ constructor(arr){ this.arr = arr; this.index = 0; } next(){ //每次调使用next,都将指针指向下一个对象 return this.index < this.arr.length ? {value:this.arr[this.index++],done:false} : {value:undefined,done:true} }}var it = new myIterator([1,2]);it.next(); //{value: 1, done: false}it.next(); //{value: 2, done: false}it.next(); //{value: undefined, done: true}

该例只是模拟了遍历器。实际用时,只要要对目标对象部署Symbol.iterator接口。

pre class=”brush:js;toolbar:false”>var obj = { data:[1,2], [Symbol.iterator](){ //调使用Symbol.iterator接口会返回一个遍历器,所以返回的对象中next函数是必不可少的 let index = 0; let self = this; return { next(){ return index < self.data.length ? {value:self.data[index++],done:false} : {value:undefined,done:true} } } }}for(let val of obj){ //部署了Symbol.iterator接口就可以被for of遍历了 console.log(val);} //1 2

以上是自己定义Symbol.iterator接口,当然也能直接使用数组的遍历器接口或者者靠Generator生成。
暂时想不到需要部署Symbol.iterator接口的场景,希望原生的几种数据结构就够使用了,别让js变太复杂啊= =
水平有限,只写的出这点东西。完~

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 重学JS(七)——Iterator

发表回复