ES6 -- 遍历器Iterator和for...of

基本概念

对于数组的访问我们可以使用for(var i=0;i<len;i++){...}循环，对于Object对象我们可以使用for...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]