ES6中的Iterator和for...of循环那些事

最近看阮一峰阮大神的ES6，刚刚看到Iterator和for...of循环这一章，小作笔记跟大家略微分享一下，不足之处还望大家多多指正

Iterator（遍历器）就是一种机制；任何数据结构只要是部署了iterator接口，就可以完成遍历操作（即依次处理该数据的所有成员）；

Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。（阮大神原话）；

只要是一个对象部署了Symbol.interator接口，就可以用for...of遍历该对象，同时也可以调用该接口的Symbol.interator方法调用next()方法对对象进行遍历，不同的是for..of是对该对象的值的输出，而next()返回的是对象。
例如下面的例子：

如果调用next方法就是

调用next()方法会返回一个对象{value:value;done:true or false};直到对遍历对象的值便利完成之后，next()方法会返回一个{value:undefined; done:true}代表已经遍历完成，再调用next()方法也不会报错但是依旧会返回{value:undefined; done:true}；

有一些对象是原生就封装好的Symbol.iterator接口，可以直接调用，当然也可以直接用for...of遍历;
在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构。
如果没有原生的Symbol.iterator接口，想用for...of遍历，就需要自己在该对象中部署Symbol.iterator接口，例如

一个对象如果要有可被for...of循环调用的Iterator接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

一个对象如果要有可被for...of循环调用的Iterator接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

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};
    } else {
      return {done: true, value: undefined};
    }
  }
}

function range(start, stop) {
  return new RangeIterator(start, stop);
}

for (var value of range(0, 3)) {
  console.log(value);
}//阮大神案例

上面代码是一个类部署Iterator接口的写法。Symbol.iterator属性对应一个函数，执行后返回当前对象的遍历器对象。
原型链上部署Symbol.iterator接口

function Obj(value){
  this.value = value;
  this.next = null;
}

Obj.prototype[Symbol.iterator] = function(){

  var iterator = {
    next: next
  };

  var current = this;

  function next(){
    if (current){
      var value = current.value;
      var done = current == null;
      current = current.next;
      return {
        done: done,
        value: value
      }
    } else {
      return {
        done: true
      }
    }
  }
  return iterator;
}

var one = new Obj(1);
var two = new Obj(2);
var three = new Obj(3);

one.next = two;
two.next = three;

for (var i of one){
  console.log(i)
}
// 1
// 2
// 3

对象内部部署

let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

也就是说如果一个对象没有Symbol.iterator接口，可以在类本身上面部署，也可以在原型连上部署，也可以在对象内部部署

对于类似数组的对象（存在数值键名和length属性），部署Iterator接口，有一个简便方法，就是Symbol.iterator方法直接引用数组的Iterator接口。

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];

[...document.querySelectorAll('div')] // 可以执行了

具体请看例子

let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}

**但是请记住，这个方法仅仅适用于类数组对象，上面的也可以直接用Array.from(iterable)转换成数组来遍历，例如

let arrayLike = { 
  length: 2, 
  0: 'a', 
  1: 'b'
 };

for (let x of Array.from(arrayLike)) {
  console.log(x);
}//a b

对于普通对象这两个方法是不管用的，**例如

let iterable = {
  edition: 'a',
  writer: 'b',
  read: 'c',
  length: 3,
};
for (let item of Array.from(iterable)) {
  console.log(item); 
}

上面的代码就会输出三个undefined

let iterable = {
  edition: 'a',
  writer: 'b',
  read: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); //报错
}

上面的代码就会抛异常的；

其实ES6很多地方都用的到Iterator这个接口，例如：

1. 解构赋值

2. 扩展运算符

3. yield*

最后需要说下，字符串既是类数组对象同时自己也有原生Symbol.iterator接口可以直接调用，例如
var str = "hell";
for(let v of str){
console.log(v);//"h","e","l","l"
}
对于字符串来说，for...of循环还有一个特点，就是会正确识别32位UTF-16字符。

for...of 区别于for循环，for循环比较麻烦，但是是最原始的方法；
for...of 区别于数组的forEach方法，因为forEach方法是从头到尾执行，不会跳出，但是遇到break或者return，continue会跳出循环

有着同for...in一样的简洁语法，但是没有for...in那些缺点。
不同用于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

更详细的请查看阮大神（http://es6.ruanyifeng.com/#docs/iterator）本章内容