Symbol.iterator迭代器

Iterator迭代器的概念

Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。
详情可查看MDN

这个概念是说任何对象都可以被定制为可在 for..of 循环中使用的对象。

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性。
或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。

Iterator迭代器，我简单粗暴的称它为 遍历器。它遍历/迭代集合(数组)所有元素。

Iterator迭代器作用

1. 为各种数据结构，提供一个统一的、简便的访问接口
2. 任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。（使得数据结构的成员能够按某种次序排列，依次处理该数据结构的所有成员）。
3. ES6提供了新的遍历命令for…of循环来消费Iterator 接口。

可迭代对象

原生具备iterator接口的数据结构：Array，Agruments，Set，Map，String，TypedArray，NodeList。
具体可查看可迭代协议。

JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map 和 Set。

注意：对象Object没有实现迭代协议，因此Object不能直接通过 JavaScript 的 for...of 语句进行迭代。
对象Object转换为数组，才能使用for..of循环。

字符串String也是可迭代对象，可以使用for..of 遍历字符串的每个字符。

可迭代（Iterable）对象 是数组的泛化，是集合。

在实际开发中，我们遇到过各种各样复杂的数据结构：数组的成员可以是String、Array、Object等等，对象Object的成员也可以包含Array…

我们常常使用for，forEach，map，filter等方法来遍历Array数据，使用for...in来遍历Object。也可能在处理一组数据时，多个方法配合使用。

因此，必须要清楚具体的数据结构，才知道具体使用 哪(几)个 方法。如果数据类型改变，遍历的方式也必须改成对应的方式，那我们就要重写代码。

**Iterator迭代器（遍历器）**为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

实际应用及解析

让Object对象可迭代（for…of）

创建一个对象，使该对象能使用for...of循环。
比如一个 range 对象，它代表了一个数字区间：

let range = {
	min: 1,
	max: 5
}
// 我们希望 for..of 这样运行：
// for(let num of range) ... num=1,2,3,4,5

因为Object是不支持迭代器的，我们要自己DIY一个，实现代码：

let range = {
  min: 1,
  max: 5
};

// 1. for..of 调用首先会调用这个：
range[Symbol.iterator] = function() {

  // ……它返回迭代器对象（iterator object）：
  // 2. 接下来，for..of 仅与下面的迭代器对象一起工作，要求它提供下一个值
  return {
    current: this.min,
    last: this.max,

    // 3. next() 在 for..of 的每一轮循环迭代中被调用
    next() {
      // 4. 它将会返回 {done:.., value :...} 格式的对象
      if (this.current <= this.last) {
        return { done: false, value: this.current++ };
      } else {
        return { done: true };
      }
    }
  };
};

// 现在它可以运行了！
for (let num of range) {
  console.log(num); // 1, 然后是 2, 3, 4, 5
}

为了让 range 对象可迭代（也就让 for..of 可以运行）我们需要为对象添加一个名为 Symbol.iterator 的方法（一个专门用于使对象可迭代的内建 symbol）。

1. 当 执行for (let num of range)时，它调用range[Symbol.iterator]()方法 （如果没找到，就会报错）。这个方法必须返回一个 迭代器（iterator） —— 一个有 next() 方法的对象。
2. 从此开始，for..of 仅适用于这个被返回的对象。
3. for..of 循环不断调用 next() 方法来获取下一个值，直到done属性为true时结束。
4. next() 方法返回的结果的格式必须是 {done: Boolean, value: any}，当 done=true 时，表示循环结束。当 done=false 时，返回的value 是for...of的下一个值。

注意：

• range 自身没有 next() 方法。
• range 是通过调用 range[Symbol.iterator]() 创建了另一个对象，即所谓的**“迭代器”对象**，并且它的 next() 会为迭代生成值。

因此，迭代器对象和与其进行迭代的对象是分开的。

从技术上说，可以使用 range 自身作为迭代器来简化代码。
简化写法：

let range = {
  min: 1,
  max: 5,

  [Symbol.iterator]() {
    this.current = this.min;
    return this;
  },

  next() {
    if (this.current <= this.max) {
      return { done: false, value: this.current++ };
    } else {
      return { done: true };
    }
  }
};

// 现在它可以运行了！
for (let num of range) {
  console.log(num); // 1, 然后是 2, 3, 4, 5
}

现在 range[Symbol.iterator]() 返回的是 range 对象自身：它包括了必需的 next() 方法，并通过 this.current 记忆了当前的迭代进程。

迭代字符串

对于一个字符串，for..of 遍历它的每个字符：

let str = "string"
for (let it of str) {
  // 触发 6 次，每个字符一次
  console.log( it); // 分别打印s,t,r,i,n,g
}

显式调用迭代器

直接调用数组迭代器，采用与 for..of 完全相同的方式遍历数组。

数组原生具备iterator接口，以数组数据为例，创建一个数组迭代器，并“手动”从中获取值。

const arr = ["张三", "李四", "王二"];
//找到Array的prototype中--它是一个函数
//Symbol(Symbol.iterator): function values()
let it = arr[Symbol.iterator]();
console.log(arr);
console.log(it); //Array Iterator { }  

// 直接“手动”多次调用next()方法
it.next(); //Object { value: "张三", done: false }  
it.next(); //Object { value: "李四", done: false }
it.next(); //Object { value: "王二", done: false }
it.next(); //Object { value: undefined, done: true}    

// 以for...of相同的方式遍历数组
while(true) {
	let result = it.next();
	// done===true, 迭代结束
	if(result.done) break;
	console.log(result.value) // 依次打印："张三", "李四", "王二"
}
 

以数组为例，iterator接口表现为一个函数：

Array.prototype.Symbol.iterator()

1. 它创建一个指针对象iterator，指向数据结构的起始位置
2. 内部有一个next()方法用于遍历
3. 第一次调用next()方法，指针自动指向数据结构的第一个成员
4. 不断调用next()方法，指针一直向后移动，直到指向最后一个成员
5. 每次next()方法返回一个包含value和done属性的对象

总结

可以应用 for..of 的对象被称为 可迭代的。

• 技术上来说，可迭代对象必须实现 Symbol.iterator 方法。
• obj[Symbol.iterator]() 的结果被称为 迭代器（iterator）。由它处理进一步的迭代过程。
• 一个迭代器必须有 next() 方法，它返回一个 {done: Boolean, value: any} 对象，这里 done:true 表明迭代结束，否则 value 就是下一个值。
• Symbol.iterator 方法会被 for..of 自动调用，但我们也可以直接调用它。
• 内建的可迭代对象例如字符串和数组，都实现了 Symbol.iterator。