ES6 -- 遍历器Iterator和for...of

爱被打了一巴掌 2022-06-16 08:11 215阅读 0赞

## 基本概念 ##

对于数组的访问我们可以使用`for(var i=0;i<len;i++){...}`循环，对于Object对象我们可以使用`for...in`遍历所有的键值对。在ES6中，还提供了Map和Set数据结构。那么，有没有那么一种统一的接口机制，让我们可以对不同的数据结构都可以进行访问呢？

答案就是Iterator，遍历器。它可以为不同的数据结构提供统一的访问机制：任何一种数据结构，只要部署了Iterator接口，就可以利用for…of命令完成遍历操作。  
从数据结构的角度来讲，当开发者希望使用for…of来遍历某数据结构的时候，该循环的就会自动的去寻找并调用这个数据结构的Iterator接口，如果找到了，就认为该数据可以遍历。

这样那好了：ES6已经规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性（其实它是一个方法，返回一个带有next()方法的对象），也就是，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable），就可以使用for…of遍历。

那么，反过来说，如果我们希望使用for of遍历，就要自己去部署Symbol.iterator。  
（当然，有些数据结构，比如数组、类数组对象、Set、Map，它们原生自带Iterator接口，这样，我们就可以直接使用for of遍历，但对于不可以的，还是要我们手动部署。）

一个简单的栗子，为对象部署遍历器：

在这个栗子中，对象obj因为具有了Symbol.iterator属性，因而被认为是可遍历的。遍历的方法是：

var iterator = obj[Symbol.iterator]();
    iterator.next(); //{
       value:1,done:true}
    //当然，此时也可以使用for of进行遍历访问，如果用for of，那么当返回的对像属性done为true的时候，将停止遍历行为。

再看一遍这个栗子，我们就可以基本总结出，Iterator的遍历过程：

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
    
    （2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
     So,部署遍历器接口很重要的一点就是写好next方法！
    
    （3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
    
    （4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

另一个比较复杂的栗子：

在这个栗子中使用了ES6的class语法糖模仿面向对象语言的模式。其实很简单，在这段代码中我们只需要理解，constructor相当于构造函数，在new RangeIterator的时候会执行。

class RangeIterator {
      constructor(start, stop) {
        this.value = start;
        this.stop = stop;
      }
    
      [Symbol.iterator]() { return this; }
    
      next() {
        var value = this.value;
        if (value < this.stop) {
          this.value++;
          return {done: false, value: value};
        }
        return {done: true, value: undefined};
      }
    }
    
    function range(start, stop) {
      return new RangeIterator(start, stop);// 返回一个遍历器
    }
    
    for (var value of range(0, 3)) {
      console.log(value);
    }

分析一下这段代码：RangeIterator是一个遍历器生成类，采用new RangeIterator的方法可以设定这个遍历器的起始位置start和终止位置stop；该类部署了\[Symbol.iterator\]接口，也就是RangeIterator的对象本身。该对象的next方法就是依次返回初始化对象时设定的从start到stop之间的整数值。

tip: 无论你怎么部署某个数据结构的代码，\[Symbol.iterator\]接口返回的对象必须要有next方法，才能保证for of的正常执行。当然，\[Symbol.iterator\]接口也可以位于该数据结构的原型链上。

另外，对于类数组对象（大家最熟悉的比如说利用js获得的DOM列表），部署Iterator接口，有一个非常简便偷懒的方法，就是Symbol.iterator方法直接引用数组的Iterator接口：

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
    // 或者
    NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];

## 应用场合 ##

除了for of以外，还有一些场合也会默认调用Iterator接口（即Symbol.iterator方法）。

1）解构赋值（请参见ES6：数组和Set解构赋值）

2）扩展运算符（…）

// 例一
    var str = 'hello';
    [...str] // ['h','e','l','l','o'] // 例二 let arr = ['b', 'c']; ['a', ...arr, 'd'] // ['a', 'b', 'c', 'd']

不难总结出，利用遍历器配合扩展运算符（…），可以将任何部署了Iterator接口的数据结构，转为数组。

3）yield\*

4）for…of

5）Array.from()

6）Map(), Set(), WeakMap(), WeakSet()

7）Promise.all()

8）Promise.race()

## 字符串的Iterator接口 ##

字符串具有原生的Iterator接口。

var someString = "hi";
    typeof someString[Symbol.iterator]
    // "function"
    
    var iterator = someString[Symbol.iterator]();// Symbol.iterator接口方法将返回一个遍历器对象
    
    iterator.next()  // { value: "h", done: false }
    iterator.next()  // { value: "i", done: false }
    iterator.next()  // { value: undefined, done: true }

当然，我们完全可以自己部署Symbol.iterator，修改遍历器。

修改遍历器后，采用扩展运算符…或者for of方法访问字符串的到的结果将会不同，然而字符串本身并不改变。

## Iterator接口与Generator函数 ##

在前几篇文章中，我已经介绍了Generator函数，它像是一个状态机，采用yield暂停函数执行，用next方法继续函数执行。可参见：[http://blog.csdn.net/u014328357/article/details/71212203][http_blog.csdn.net_u014328357_article_details_71212203]

而使用Generator函数，可以非常容易的实现Symbol.iterator方法。

var myIterable = {};
    myIterable[Symbol.iterator] = function* () { 
      yield 1;
      yield 2;
      yield 3;
    };
    [...myIterable] // [1, 2, 3]

[http_blog.csdn.net_u014328357_article_details_71212203]: http://blog.csdn.net/u014328357/article/details/71212203