美文网首页
Iterator(遍历器)和for..of

Iterator(遍历器)和for..of

作者: 这很重要吗 | 来源:发表于2017-06-11 18:10 被阅读0次

    概念##

    JavaScript原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6又添加了Map和Set。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是Map,Map的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。

    它是一种接口,为各种不同的数据结构提供统一的访问机制
    任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
    在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。

    Iterator的作用有三个##

    1. 为各种数据结构,提供一个统一的、简便的访问接口;
      
    2.      使得数据结构的成员能够按某种次序排列;
      
    3. ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。

    模拟Iterator##

    var it = makeIterator(['a', 'b']);
    
    it.next() // { value: "a", done: false }
    it.next() // { value: "b", done: false }
    it.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};
        }
      };
    }
    

    在ES6中,有些数据结构原生具备Iterator接口(比如数组),即不用任何处理,就可以被for...of循环遍历,有些就不行(比如对象)。原因在于,这些数据结构原生部署了Symbol.iterator属性(详见下文),另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象

    Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。

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

    NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
    // 或者
    NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
    
    [...document.querySelectorAll('div')] // 可以执行了
    

    下面是类似数组的对象调用数组的Symbol.iterator方法的例子。

    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'
    }
    
    image.png

    调用Iterator接口的场合##

    有一些场合会默认调用Iterator接口(即Symbol.iterator方法),除了下文会介绍的for...of循环,还有几个别的场合。

    (1)解构赋值
    (2)扩展运算符
    参考博客

    相关文章

      网友评论

          本文标题:Iterator(遍历器)和for..of

          本文链接:https://www.haomeiwen.com/subject/nrghqxtx.html