重学JS(七)——Iterator

  • 时间:2018-06-17 21:03 作者:浮生偷闲 来源:浮生偷闲 阅读:86
  • 扫一扫,手机访问
摘要:内容导读有人一定会有疑问了,不使用它我也可以遍历集合,forEach,for in使用的好好的,学这个干嘛。浅显来讲,遍历器就像一个数组,你只需不断地调使用next(),就可以从头读到尾了。所以我们只需取以上原生对象的Symbol.iterator属性,执行他就可以取得一个遍历器。生成器会返回一个遍

内容导读

有人一定会有疑问了,不使用它我也可以遍历集合,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变太复杂啊= =
水平有限,只写的出这点东西。完~

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】摩尔定律与奔腾的芯- INTEL 《浪潮之巅》读书笔记(2018-12-09 22:29)
【系统环境|服务器应用】说说在 Vue.js 中如何实现组件间通信(高级篇)(2018-12-09 22:29)
【系统环境|服务器应用】开发人员安装电脑后可能会安装的 6 大软件(2018-12-09 22:29)
【系统环境|服务器应用】人工智能概念-11-系统智能(2018-12-09 22:29)
【系统环境|服务器应用】Spark SQL,如何将 DataFrame 转为 json 格式(2018-12-09 22:29)
【系统环境|服务器应用】机器学习入门(六) — 聚类和类似度模型(2018-12-09 22:29)
【系统环境|服务器应用】Shell编程基础(2018-12-09 22:28)
【系统环境|服务器应用】JavaScript中this的指向问题归纳总结(2018-12-09 22:28)
【系统环境|服务器应用】java nio与bio —— 阻塞IO与非阻塞IO的区别(2018-12-09 22:28)
【系统环境|服务器应用】Mysql入门到入土之Mysql详情和Sql基本语法(基础讲解篇)(2018-12-09 22:28)
手机二维码手机访问领取大礼包
返回顶部