JS笔记《Iterator与for of》概述 JS中表示集合的数据结构，主要是数组、对象、Map、Set。遍历器是一种

概述

JS中表示集合的数据结构，主要是数组、对象、Map、Set。遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署了Iterator接口，就可以完成遍历操作。

本质

Iterator的遍历过程如下：
- 创建一个指针对象，指向当前数据结构的起始位置。
- 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
- 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
- 不断调用next方法，直到指向数据结构的结束位置。
每一次调用next方法都会返回数据结构的当前成员的信息（一个包含value和done两个属性的对象），其中value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

模拟实现

只模拟了数组的数据结构。

function myInterator(data){
  let nextIndex = 0;
  return {
    next(){
      let len = data.length;
      return {
        value: data[nextIndex++],
        done: nextIndex <= len ? false : true
      }
    }
  }
}

let it = myInterator([1,2,3]);
it.next() //  {value: 1, done: false}
it.next() //  {value: 2, done: false}
it.next() //  {value: 3, done: true}
it.next() //  {value: undefined, done: true}

默认Iterator接口

Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制，即for...of循环。当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。
默认的Iterator接口部署在数据结构的Symbol.iterator属性上，一个数据结构只要有此属性，就被认为是可遍历的。此属性是一个函数，执行这个函数就会返回一个遍历器。
原生具有Iterator接口的数据结构如下：Array、Map、Set、String、TypedArray、arguments、NodeList...。

let arr = [1,2,3];
let iterator = arr[Symbol.iterator](); // 获取遍历器函数并执行

iterator.next();  // {value: 1, done: false}
iterator.next();  // {value: 2, done: false}
iterator.next();  // {value: 3, done: false}
iterator.next();  // {value: undefined, done: true}

对象之所以没有默认部署Iterator接口，是因为对象的哪个属性先遍历，哪个后遍历是不确定的。一个对象如果要具备可被for...of循环调用的 Iterator 接口，就必须在Symbol.iterator的属性上部署遍历器生成方法（原型链上的对象具有该方法也可）。

for of循环

一个数据结构只要部署了Symbol.iterator属性，就可以用for...of循环遍历它的成员。

数组

JS原有的for...in循环，只能获得对象的键名，不能直接获取键值。for...of循环，可以获得键值。

let arr = [3, 5, 7];
arr.foo = 'hello';

// for in 会把对象自身的属性都遍历出来
for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

// for of只返回具有数字索引的属性
for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

Set和Map

遍历的顺序是按照各个成员被添加进数据结构的顺序。Set遍历返回的是一个值；Map遍历返回的是一个数组[key, value]。

// Set遍历
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit


// Map遍历
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262

类数组

类数组的对象包括好几类，字符串、DOM NodeList 对象、arguments对象等。

// 字符串
let str = "hello";

for (let s of str) {
  console.log(s); // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");

for (let p of paras) {
  p.classList.add("test");
}

// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b');
// 'a'
// 'b'

对象

对于普通的对象，for of不能实现遍历，会报错。必须部署了Iterator接口后才能使用。但是可以使用for in来遍历对象。

let es6 = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
};

// for in遍历
for (let e in es6) {
  console.log(e);
}
// edition
// committee
// standard

// for of遍历
for (let e of es6) {
  console.log(e);
}
// TypeError: es6[Symbol.iterator] is not a function