ES6 -- 遍历器Iterator和for...of
基本概念
对于数组的访问我们可以使用for(var i=0;ifor...in遍历所有的键值对。在ES6中，还提供了Map和Set数据结构。那么，有没有那么一种统一的接口机制，让我们可以对不同的数据结构都可以进行访问呢？
答案就是Iterator，遍历器。它可以为不同的数据结构提供统一的访问机制：任何一种数据结构，只要部署了Iterator接口，就可以利用for…of命令完成遍历操作。
从数据结构的角度来讲，当开发者希望使用for…of来遍历某数据结构的时候，该循环的就会自动的去寻找并调用这个数据结构的Iterator接口，如果找到了，就认为该数据可以遍历。
这样那好了：ES6已经规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性（其实它是一个方法，返回一个带有next()方法的对象），也就是，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable），就可以使用for…of遍历。
那么，反过来说，如果我们希望使用for of遍历，就要自己去部署Symbol.iterator。
（当然，有些数据结构，比如数组、类数组对象、Set、Map，它们原生自带Iterator接口，这样，我们就可以直接使用for of遍历，但对于不可以的，还是要我们手动部署。）
一个简单的栗子，为对象部署遍历器：
const obj = {
[Symbol.iterator] : function () {
return {
next: function () {
return {
value: 1,
done: true
};
}
};
}
};在这个栗子中，对象obj因为具有了Symbol.iterator属性，因而被认为是可遍历的。遍历的方法是：
var iterator = obj[Symbol.iterator]();
iterator.next(); //{value:1,done:true}
//当然，此时也可以使用for of进行遍历访问，如果用for of，那么当返回的对像属性done为true的时候，将停止遍历行为。再看一遍这个栗子，我们就可以基本总结出，Iterator的遍历过程：
（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
So,部署遍历器接口很重要的一点就是写好next方法！
（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。另一个比较复杂的栗子：
在这个栗子中使用了ES6的class语法糖模仿面向对象语言的模式。其实很简单，在这段代码中我们只需要理解，constructor相当于构造函数，在new RangeIterator的时候会执行。
class RangeIterator {
constructor(start, stop) {
this.value = start;
this.stop = stop;
}
[Symbol.iterator]() { return this; }
next() {
var value = this.value;
if (value < this.stop) {
this.value++;
return {done: false, value: value};
}
return {done: true, value: undefined};
}
}
function range(start, stop) {
return new RangeIterator(start, stop);// 返回一个遍历器
}
for (var value of range(0, 3)) {
console.log(value);
}分析一下这段代码：RangeIterator是一个遍历器生成类，采用new RangeIterator的方法可以设定这个遍历器的起始位置start和终止位置stop；该类部署了[Symbol.iterator]接口，也就是RangeIterator的对象本身。该对象的next方法就是依次返回初始化对象时设定的从start到stop之间的整数值。
tip: 无论你怎么部署某个数据结构的代码，[Symbol.iterator]接口返回的对象必须要有next方法，才能保证for of的正常执行。当然，[Symbol.iterator]接口也可以位于该数据结构的原型链上。
另外，对于类数组对象（大家最熟悉的比如说利用js获得的DOM列表），部署Iterator接口，有一个非常简便偷懒的方法，就是Symbol.iterator方法直接引用数组的Iterator接口：
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];应用场合
除了for of以外，还有一些场合也会默认调用Iterator接口（即Symbol.iterator方法）。
1）解构赋值（请参见ES6：数组和Set解构赋值）
2）扩展运算符（…）
// 例一
var str = 'hello';
[...str] // ['h','e','l','l','o']
// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']不难总结出，利用遍历器配合扩展运算符（…），可以将任何部署了Iterator接口的数据结构，转为数组。
3）yield*
4）for…of
5）Array.from()
6）Map(), Set(), WeakMap(), WeakSet()
7）Promise.all()
8）Promise.race()
字符串的Iterator接口
字符串具有原生的Iterator接口。
var someString = "hi";
typeof someString[Symbol.iterator]
// "function"
var iterator = someString[Symbol.iterator]();// Symbol.iterator接口方法将返回一个遍历器对象
iterator.next() // { value: "h", done: false }
iterator.next() // { value: "i", done: false }
iterator.next() // { value: undefined, done: true }当然，我们完全可以自己部署Symbol.iterator，修改遍历器。
var str = new String("hi");
[...str] // ["h", "i"]
str[Symbol.iterator] = function() {
return {
next: function() {
if (this._first) {
this._first = false;
return { value: "bye", done: false };
} else {
return { done: true };
}
},
_first: true
};
};
[...str] // ["bye"]
str // "hi"修改遍历器后，采用扩展运算符…或者for of方法访问字符串的到的结果将会不同，然而字符串本身并不改变。
Iterator接口与Generator函数
在前几篇文章中，我已经介绍了Generator函数，它像是一个状态机，采用yield暂停函数执行，用next方法继续函数执行。可参见：http://blog.csdn.net/u014328357/article/details/71212203
而使用Generator函数，可以非常容易的实现Symbol.iterator方法。
var myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...myIterable] // [1, 2, 3]