一文带你了解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遍历,在这里只是提供一个优雅的方法。

经验分享 程序员 微信小程序 职场和发展