重学JS（七）—— Iterator
前篇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}
Iterator和Generator
还记得前文的例子吗
var x = 1;
function *foo(){
x++;
yield 'hello';
x++;
console.log(x);
}
var it = foo();
it.next(); //{value：'hello',done:false}
console.log(x); //2
it.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变太复杂啊= =
水平有限，只写的出这点东西。完~