切图崽的自我修养-[ES6] 迭代器Iterator浅析

发布时间:2019-08-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了切图崽的自我修养-[ES6] 迭代器Iterator浅析脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

ITerator

这真是毅种循环

Iterator不是array,也不是set,不是map, 它不是一个实体,而是一种访问机制,是一个用来访问某个对象的接口规范,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的成员)。


Iterator的遍历某个数据结构过程是这样的(比如对array进行遍历)

  1. 创建一个指针对象,指向当前数组的起始位置。也就是说,遍历器对象本质上,就是一个指针对象

  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员, 这时候的返回值是{value:array[0], done:false}

  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员,这时候的返回值是{value:array[1], done:false}

  4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置这时候的返回值是{value:array[array.length-1], done:true}

  5. 遍历完毕


数组['a','b']手动写一个iterator接口

VAR itertaor = makeIterator(['a', 'b']);

iterator.next() // { value: "a", done: false }
iterator.next() // { value: "b", done: false }
iterator.next() // { value: undefined, done: true }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

等价于:

let iterator =     
makeIterator(['a','b'])=
{next:function(){xxxx}}

等价于:

iterator.next() 
= nextIndex<array.length
?{value: array[nextIndex++], done: false}
:{value: undefined, done: true};
  1. 所以当 var iterator = makeIterator(['a','b'])执行完,这时候makeIterator函数内部的nextIndex=0, 但由于makeIterator外部变量iterator返回了一个引用{next:function(){xxx}},所以makeIterator函数无法关闭,现在处于内存泄漏状态(函数的执行上下文环境没有关闭啊我摔!),

  2. 执行完第一个iterator.next()的时候, 由于此时nextIndex=0, nextIndex<array.length成立,返回的是{value: array[nextIndex++], done: false},这一句实际等价于: 返回{value: array[nextIndex], done: false}然后nextIndex=nextIndex+1,现在nextIndex=1了

  3. 执行完第二个iterator.next()的时候, 由于此时nextIndex=1, nextIndex<array.length成立,返回的是{value: array[nextIndex++], done: false},这一句实际等价于: 返回{value: array[nextIndex], done: false}然后nextIndex=nextIndex+1,现在nextIndex=2了

  4. 执行完第三个iterator.next()的时候, 由于此时nextIndex=2, nextIndex<array.length不成立,返回的是{value: undefined, done: true}


可遍历对象

事实上,我们不需要手动写array/set/map的Iterator接口了,因为ES6规定它们是可遍历对象,所以对应的Iterator接口已经被添加到对应的Symbol.iterator属性上了(所以这三种数据结构才能用keys(for..of)/values(for..of)/entries(for..of)/foreach这种方法进行遍历),你可以通过如下方式来获取

    let arr = ['a', 'b', 'c'];
    let arrIterator = `arr[Symbol.iterator]()`
    
    
    let set = new Set([1,2,3]);
    let setIterator = `set[Symbol.iterator]()`
    
    let map = new Map([x,1][y,2]);
    let mapIterator = `map[Symbol.iterator]()`
    
非可遍历对象

对于非可遍历对象,比如{a:1,b:2},ES6并没有规定这种对象键值对为可遍历对象,所以用for..of是不能对它进行遍历的.如果要使一个对象变成可遍历的,需要手动添加Iterator规则接口到它的Symbol.iterator属性上去,比如

    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属性上部署上手写的Iterator接口(这样你自己可以写遍历规则),也可以让Symbol.iterator属性直接指向array的Iterator接口(这样就是用的数组的遍历规则)


脚本宝典总结

以上是脚本宝典为你收集整理的切图崽的自我修养-[ES6] 迭代器Iterator浅析全部内容,希望文章能够帮你解决切图崽的自我修养-[ES6] 迭代器Iterator浅析所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。