1.Iterator遍历器的概念
JavaScript表示数据集合的数据结构有Array，Object，Map，Set，总共有四种，用户还可以自定义数据结构，比如说Array中有Map，Map的成员是对象。这时就需要统一的接口，来处理不同的数据结构。
遍历器（Iterator）就是这样的接口，任何数据结构，只要部署了Iterator接口，就可以完成遍历的操作（说白了就是依次处理数据结构中的所有成员）
Iterator的作用有三个：
1.为各种数据提供统一的便捷的数据访问接口
2.使得数据结构的成员能够按照某种次序排列
3.ES6遍历的新命令for...of循环，Iterator主要供for...of消费
Iterator的遍历过程：
（1）创建一个指针对象，指向当前数据结构的起始位置
（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一成员。
（3）第二次调用指针对象的next方法，指针就指向第二个成员
（4）不断的调用指针对象的next方法，直到它指向的数据结构的位置结束
每次调用next方法，都会返回数据结构当前的成员，具体来说，就是返回包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否借宿
下面是模拟next方法返回值的例子：
function makeIterator(array) {
var nextIndex = 0;
return {
next: function () {
return nextIndex上面代码定义了一个makeIterator函数，它是一个遍历器生成函数，作用是返回一个遍历器对象。对数组["a","b"]执行这个函数，就会返回该数组的遍历器对象（即指针对象）it
总之，调用指针对象next方法，就可以遍历事先给定的数据结构
2.Iterator的默认接口
Iterator接口的目的，就是为了所有数据结构，提供了一种统一的访问机制，即for...of循环（详见下文）。当使用for...of循环遍历某种数据结构时，该循环会自动去寻找Iterator接口
一种数据结构只要部署了Iterator接口，我们就称这个接口是可遍历的
ES6规定默认的Iterator接口部署在数据结构的Symbol.iterator属性，或者说一个数据结构只要有Symbol.iterator属性，就可以认为是可遍历的
const obj = {
[Symbol.iterator] : function () {
return {
next: function () {
return {
value: 1,
done: true
};
}
};
}
};
原生具备Iterator接口的数据结构如下。
Array Map Set String TypedArray 函数的arguments对象 NodeList对象
3.for...of循环
数组：
数组原生具备iterator接口（即默认部署了Symbol.iterator属性），for...of循环本质上就是调用这个接口产生的遍历器，可以用下面的代码证明。
const arr = ['red', 'green', 'blue'];
for(let v of arr) {
console.log(v); // red green blue
}
const obj = {};
obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);
for(let v of obj) {
console.log(v); // red green blue
}
上面代码中，空对象obj部署了数组arr的Symbol.iterator属性，结果obj的for...of循环，产生了与arr完全一样的结果。
JavaScript 原有的for...in循环，只能获得对象的键名，不能直接获取键值。ES6 提供for...of循环，允许遍历获得键值。
var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
console.log(a); // 0 1 2 3
}
for (let a of arr) {
console.log(a); // a b c d
}
for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样。
let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // "3", "5", "7"
}
Set和Map数据结构:
Set和Map结构也原生具有Iterator，可以直接使用for...of循环
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
console.log(e);
}
// Gecko
// Trident
// Webkit
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262
上面代码演示了如何遍历 Set 结构和 Map 结构。值得注意的地方有两个，首先，遍历的顺序是按照各个成员被添加进数据结构的顺序。其次，Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值。
let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
console.log(pair);
}
// ['a', 1]
// ['b', 2]
for (let [key, value] of map) {
console.log(key + ' : ' + value);
}
// a : 1
// b : 2
计算生成的数据结构
有些数据结构是在现有数据结构的基础上，计算生成的。比如，ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象。
- entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map 结构的 Iterator 接口，默认就是调用entries方法。
- keys() 返回一个遍历器对象，用来遍历所有的键名。
- values() 返回一个遍历器对象，用来遍历所有的键值。
这三个方法调用后生成的遍历器对象，所遍历的都是计算生成的数据结构。
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']