Iterator与for...of循环

      在前面的文章中介绍了ES6中提供的新数据结构Set（https://blog.csdn.net/qq_26834399/article/details/79568588）和Map（https://blog.csdn.net/qq_26834399/article/details/105071907），这两种数据结构都表示了集合的概念，但与Array不同，不能使用传统的forEach去遍历，于是ES6提供了一个统一的遍历接口Iterator。

      Iterator可以为不同的数据结构提供统一的访问机制，即for...of循环。一个数据结构，只要具有Symbol.iterator属性，就认为是可遍历的，就可以使用Iterator接口。原生具有Symbol.iterator属性的数据结构有Array，String，Map，Set，函数的arguments对象等。Object没有原生的可遍历属性，但可以给它设置Symbol.iterator函数。

const iteratorObj = {
  data:['Annie','Keith','Eddie'],
  [Symbol.iterator] : function () {
    var that = this;
    var idx = 0;
    return {
      next: function () {
        var data = that.data;
        if(idx<data.length){
          return{
            value:data[idx++],
            done:false
          }
        }else{
          return {
            value: undefined,
            done: true
          };
        }
      }
    };
  }
};

      有了遍历器接口，数据结构就可以使用for...of循环遍历了，for...of内部调用的就是数据结构的Symbol.iterator方法。下面来举几个例子。

      1、数组中for...of的应用

      数组中for...of与for...in的区别是，for...in只能获得对象的键名（包括索引和其他额外设置的属性key）且在某些情况下，会以任意顺序返回键名；for...of可以直接获得键值（只返回具有数字索引的属性）

const arr = ['Annie','Keith','Eddie'];
arr.family = 603;
for(item of arr){
    console.log(item);
}
//Annie 
//Keith 
//Eddie 

for(item in arr){
    console.log(item);
}
//0 
//1 
//2 
//family

      2、Set中for...of的应用 

const set = new Set(['Annie','Keith','Eddie']);
for(item of set){
    console.log(item);
}
//Annie 
//Keith 
//Eddie 

      3、Map中for...of的应用

      Map结构遍历时，返回的是一个length为2的数组，两个成员分别是当前成员的键名和键值

let map = new Map().set('name', 'Annie').set('age', 18);
for (let item of map) {
  console.log(item);
}
// ['name', 'Annie']
// ['age', 18]

for (let [key, value] of map) {
  console.log(key + ':' + value);
}
// name:'Annie'
// age:18

      4、部署了Iterator接口的对象

      以前面设置过Symbol.iterator的对象为例，遍历结构如下

for(item of iteratorObj){
    console.log(item)
}

//Annie 
//Keith 
//Eddie