一文带你了解ES6迭代器(iterator)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、迭代器（iterator）是什么？

迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作。
ES6创造了一种新的遍历命令for…of循环，iterator主要供for…of使用
原生具备了iterator接口的数据结构（可用for…of遍历）
(1)Array
(2)Arguments
(3)Set
(4)Map
(5)String
(6)TypedArray
(7)NodeList

二、工作原理

1.创建一个指针对象，指向当前数据结构的起始位置
2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3.接下来不断调用next方法，指针一直往后移，直到指向最后一个成员
4.每次调用next方法返回一个包含value和done属性的对象
注意 需要自定义遍历数据的时候，记得想到使用迭代器

代码如下（示例）：

 let obj = {
            name:"张三",
            age:18,
            arr:[1,2,3,4,"壹","贰","叁"]
        }

现在我们需要拿到obj对象里arr数组的数据
由于Object并没有内置iterator，所以我们使用for…of遍历时，控制台报错

 let obj = {
            name:"张三",
            age:18,
            arr:[1,2,3,4,"壹","贰","叁"]
        }
        for(value of obj){
            console.log(value)
        }
        //Uncaught TypeError: obj is not iterable

现在我们给obj对象加入iterator
代码如下（示例）：

let obj = {
  name:"张三",
  age:18,
  arr:[1,2,3,4,"壹","贰","叁"],
    [Symbol.iterator](){
       let index =0
       let _this = this
          return {
             next:function(){
             if(index<_this.arr.length){                              
                  const result={value:_this.arr[index],done:false}
                  index++
                  return result      
             }else{
                 return {value:undefined,done:true}
                 }
              }
           }
        }
     }
      for(value of obj){
          console.log(value)
        }
        //1 2 3 4 "壹" "贰" "叁"

总结

当然还可以有很多方法能拿到obj对象中arr数组的数据，比如直接对obj.arr遍历，在这里只是提供一个优雅的方法。