一文彻底搞清 Iterator（遍历器）概念及用法

目录

一、由来及意义

二、具体实现流程

三、具有默认 Iterator 接口的数据结构

四、调用 Iterator 接口的场合

五、总结

---

一、由来及意义

Javascript中表示“集合”的数据结构，主要是 Array、Object、Map、Set 这四种数据集合，除此之外，它们相互之间还可以组合使用，例如Array的成员是Map，Map的成员是Object等。因此Javascript得需要一种统一的接口机制，来处理所有不同的数据结构。

遍历器（Iterator）就是这样一种机制。它是一种接口，可以为各种不同的数据结构提供一种访问机制（访问接口），任何数据结构部署Iterator接口，就可以完成该数据结构成员的遍历操作（Iterator 接口主要供for...of使用）。

二、具体实现流程

Iterator的遍历过程：

1. 创建一个指针对象，指向数据解构的起始位置。

2. 第一次调用指针对象的next()方法，指针指向数据结构的第一个成员。

3. 第二次调用指针对象的next()方法，指针指向数据结构的第二个成员。

4. 不停调用指针对象的next()方法，直到它指向数据结构结束的位置。（类似于C语言中的链表）

每一次调用next方法，都会返回数据结构中被指针指向的成员的信息。该信息为一个对象，其中包含value和done两个属性的对象{ value: something , done: false }，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束（done：false：表示循环还没有结束，done：true ：表示循环结束了）。

模拟next方法返回值例子：

下面代码定义了一个makeIterator函数，它是一个遍历器生成函数，作用就是返回一个遍历器对象。对数组['前端','收割','机']执行这个函数，就会返回该数组的遍历器对象（即指针对象）goodjob。

function makeIterator(array){
    
    var index = 0;//形成闭包保存指针指向位置index，通过三元表达式返回当前信息对象。
    
    return {
        next: function(){
            return index < array.length ? {value: array[index++], done: false} : 
            {value: undefined, done: true};
        }
    }
}

var goodjob = makeIterator(['前端','收割','机'])

goodjob.next()//  {value: '前端', done: false}
goodjob.next()//  {value: '收割', done: false}
goodjob.next()//  {value: '机',  done: false}
goodjob.next()//  {value: undefined, done: false}

由于 Iterator 只是把接口规格加到数据结构之上，所以，遍历器与它所遍历的那个数据结构，实际上是分开的，完全可以写出没有对应数据结构的遍历器对象，或者说用遍历器对象模拟出数据结构。 

另一种写法：

function makeIterator(array) {
  var index = 0; //形成闭包保存指针指向位置index，通过if分支语句返回当前信息对象。
  return {
    next: function() {
      var result = {value: undefined, done: true};
      if (index < array.length) {
        result = { value: array[index++], done: false };
      }
      return result;
    }
  };
}
 
// 使用示例
var iterable = makeIterator([1, 2, 3]);
console.log(iterable.next().value); // 输出: 1
console.log(iterable.next().value); // 输出: 2
console.log(iterable.next().value); // 输出: 3
console.log(iterable.next().value); // undefined，迭代结束

makeIterator 这个函数的目的是创建一个迭代器对象，该对象可以遍历传入的数组。在JavaScript中，一个迭代器对象需要实现next方法，该方法在每次调用时返回数组的下一个元素。

在这个解决方案中，makeIterator函数通过返回一