内容导读

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

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

语法

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

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

var obj = { "4a":2, "1":2, "3b":2};for(var key in obj){ console.log(key);} //1 4a 3b

chrome下key值的遍历顺序并不是按写入顺序，写在第二个的1跑到了第一位打印出来，其他一部分浏览器是按写入顺序来遍历的，不同浏览器的遍历顺序可能会有不同。那怎么办？

读一遍遍历器的用途。它使得数据结构的成员能够按某种次序排列。此时按某种次序几个字显得格外耀眼。至于该问题的解决方法会在下文提到。

遍历过程

直接在代码上说明过程

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原生就有遍历器对象，那我们用它来代替对象存储数据，解决浏览器遍历顺序不一致问题。

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属性,执行他就能获得一个遍历器。

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}

还记得前文的例子吗

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()函数。

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}格式。

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接口。

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变太复杂啊= =

水平有限，只写的出这点东西。完~