JavaScript基礎：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，

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

function makeIterator(array){
    
    var Index = 0;//形成閉包保存指標指向位置index，通過三元運算式回傳當前資訊物件，
    
    return {
        next: function(){
            return Index < array.length ? {value: array[index], done: false} : 
            {value: undefined, done: true};
        }
    }
}

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

由于 Iterator 只是把介面規格加到資料結構之上，所以，遍歷器與它所遍歷的那個資料結構，實際上是分開的，完全可以寫出沒有對應資料結構的遍歷器物件，或者說用遍歷器物件模擬出資料結構，

三、具有默認 Iterator 介面的資料結構

Iterator 介面的目的，就是為所有資料結構，提供了一種統一的訪問機制，當使用for...of回圈遍歷某種資料結構時，該回圈會自動去尋找 Iterator 介面，

因此，當某種資料結構具有Iterator 介面，即表示該資料結構是可遍歷的（iterable），

默認的 Iterator 介面部署在資料結構的Symbol.iterator屬性，或者說，一個資料結構只要具有Symbol.iterator屬性，就可以認為是“可遍歷的”（iterable），Symbol.iterator屬性本身是一個函式，就是當前資料結構默認的遍歷器生成函式，執行這個函式，就會回傳一個遍歷器，至于屬性名Symbol.iterator，它是一個運算式，回傳Symbol物件的iterator屬性，這是一個預定義好的、型別為 Symbol 的特殊值，所以要放在方括號內，

const object1 = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

物件object1是可遍歷的（iterable），因為具有Symbol.iterator屬性，執行這個屬性，會回傳一個遍歷器物件，該物件的根本特征就是具有next方法，每次呼叫next方法，都會回傳一個代表當前成員的資訊物件，具有value和done兩個屬性，

凡是部署了Symbol.iterator屬性的資料結構，就稱為部署了遍歷器介面，呼叫這個介面，就會回傳一個遍歷器物件，即不用任何處理，就可以被for...of回圈遍歷，

原生具備 Iterator 介面的資料結構：

• Array
• Map
• Set
• String
• TypedArray
• NodeList 物件
• 函式的 arguments 物件

陣列的Symbol.iterator屬性：

let arr = ['前端', '收割', '機'];
let iterator = arr[Symbol.iterator]();  //因為arr中屬性Symbol.iterator回傳的是一個函式，
                                        //所以在[Symbol.iterator]后面添加(),使函式執行，回傳一個遍歷器物件

iterator.next() // { value: '前端', done: false }
iterator.next() // { value: '收割', done: false }
iterator.next() // { value: '機', done: false }
iterator.next() // { value: undefined, done: true }

陣列通過for of呼叫iterator介面生成的遍歷器

const arr = ['前端', '收割', '機'];

for(let v of arr) {
  console.log(v); // 前端 收割 機
}

Map通過for of呼叫iterator介面生成的遍歷器

var handsome = new Map();
es6.set("GuangHui", "1handsome");
es6.set("JiaHao", "2handsome");
es6.set("NingDong", 666);
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
// GuangHui: 1handsome
// JiaHao: 2handsome
// NingDong: 666

Set 通過for of呼叫iterator介面生成的遍歷器

var handsome = new Set(["GuangHui", "JiaHao", "NingDong"]);
for (var boy of handsome) {
  console.log(boy);
}
// GuangHui
// JiaHao
// NingDong

類陣列物件通過for of呼叫iterator介面生成的遍歷器

// 字串
let str = "前端收割機";

for (let s of str) {
  console.log(s); // 前 端 收 割 機
}

// DOM NodeList物件
let paras = document.querySelectorAll("p");

for (let p of paras) {
  p.classList.add("前端收割機");
}

// arguments物件
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('前端', '收割機');
// '前端'
// '收割機'

對于不具備Iterator介面的資料結構（主要是物件）都需要自己在Symbol.iterator屬性上面部署，這樣才會被for...of回圈遍歷，

原因：物件（Object）之所以沒有默認部署 Iterator 介面，是因為物件的哪個屬性先遍歷，哪個屬性后遍歷是不確定的，需要開發者手動指定，本質上，遍歷器是一種線性處理，對于任何非線性的資料結構，部署遍歷器介面，就等于部署一種線性轉換，

下面是為物件添加 Iterator 介面的例子：

let object2 = {
  data: [ '前端', '收割','機'],
  [Symbol.iterator]() {
    const self = this; //將this指向賦予self
    let index = 0;     //初始遍歷下標
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++], //每次呼叫，遍歷下標自增1
            done: false
          };
        } else {
          return { value: undefined, done: true }; //遍歷結束回傳該物件
        }
      }
    };
  }
};

對于類似陣列的物件（存在數值鍵名和length屬性），部署 Iterator 介面，有一個簡便方法，就是Symbol.iterator方法直接參考陣列的 Iterator 介面，

let object3 = {
  0: '前端',
  1: '收割',
  2: '機',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator] //直接參考陣列建構式prototype中的 Symbol.iterator屬性
};
for (let item of iterable) {
  console.log(item); // '前端', '收割', '機'
}

注意，普通物件部署特定資料結構的Symbol.iterator方法，并無效果，例如普通物件部署陣列的Symbol.iterator方法，

let object4 = {  //該物件不存在數值鍵名
  a: '前端',
  b: '收割',
  c: '機',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // undefined, undefined, undefined
}

如果Symbol.iterator方法對應的不是遍歷器生成函式（即會回傳一個遍歷器物件），解釋引擎將會報錯，

var object5 = {};

obj[Symbol.iterator] = () => '前端收割機';  //回傳的是一個字串

[...object5]  // TypeError: [] is not a function

四、呼叫 Iterator 介面的場合

除了for...of回圈，某些場景會默認呼叫 Iterator 介面（即Symbol.iterator方法）

解構賦值

let set = new Set().add('前端').add('收割').add('機'); //Set通過add方法進行鏈式添加值

let [one,two] = set;
// x='前端'; y='收割'

let [one, ...two] = set;
// one='前端'; two=['收割','機'];

擴展運算子

// 例一
var str = '前端收割機';
[...str] //  ['前','端','收','割','機']

// 例二
let arr = ['是', '靚'];
['我', ...arr, '仔']
// ['我', '是', '靚', '仔']

擴展運算子內部就呼叫 Iterator 介面，這提供了一種簡便機制，可以將任何部署了 Iterator 介面的資料結構，通過擴展運算子，轉為陣列，

yield*

yield*后面跟的是一個可遍歷的結構，它會呼叫該結構的遍歷器介面，

let generator = function* () {
  yield "我";
  yield* ["是","靚","仔"];
  yield "啊";
};

var iterator = generator();

iterator.next() // { value: "我", done: false }
iterator.next() // { value: "是", done: false }
iterator.next() // { value: "靚", done: false }
iterator.next() // { value: "仔", done: false }
iterator.next() // { value: "啊", done: false }
iterator.next() // { value: undefined, done: true }

Array.from()

往Array.from()函式以類陣列形式輸入值，Array.from()函式呼叫Iterator介面，將輸入的類陣列轉化成陣列

let arrayLike = {
    0: '前端', 
    1: '收割',
    2: '機',
    3: ['GuangHui','JiaHao','NingDong'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['前端','收割','機',['GuangHui','JiaHao','NingDong']]

Map(), Set(), WeakMap(), WeakSet()

往Map建構式以陣列形式輸入鍵值對，新建Map物件時，Map建構式呼叫Iterator介面，遍歷存入鍵值對

var goodJob  = new Map([['前端',1],['收割機',2]]) 

Promise.all()

往Promise.all()函式以Promise陣列形式輸入值，Promise.all()函式呼叫Iterator介面，將promise請求遍歷執行，

const p = Promise.all([p1, p2, p3]);

Promise.all()方法接受一個陣列作為引數，p1、p2、p3都是 Promise 實體，如果不是，就會先呼叫Promise.resolve方法，將引數轉為 Promise 實體，再進一步處理，另外，Promise.all()方法的引數可以不是陣列，但必須具有 Iterator 介面，且回傳的每個成員都是 Promise 實體，

Promise.race()

往Promise.race()函式以Promise陣列形式輸入值，Promise.race()函式呼叫Iterator介面，將promise請求遍歷執行，

const p = Promise.race([p1, p2, p3]);

Promise.race()方法接受一個陣列作為引數，p1、p2、p3都是 Promise 實體，如果不是，就會先呼叫Promise.resolve方法，將引數轉為 Promise 實體，再進一步處理，另外，Promise.race()方法的引數可以不是陣列，但必須具有 Iterator 介面，且回傳的每個成員都是 Promise 實體，

補充：Generator 函式與 Iterator 介面的關系：

物件的Symbol.iterator方法，等于該物件的遍歷器生成函式，呼叫該函式會回傳該物件的一個遍歷器物件，由于 Generator 函式就是遍歷器生成函式，因此可以把 Generator 賦值給物件的Symbol.iterator屬性，從而使得該物件具有 Iterator 介面，

五、總結

1. 遍歷器（Iterator）可以為各種不同的資料結構提供一種訪問機制（訪問介面），任何資料結構部署Iterator介面，就可以完成該資料解構成員的遍歷操作（Iterator 介面主要供for...of使用），
2. Iterator的遍歷程序：創建一個指標物件，指向資料解構的起始位置，不停呼叫指標物件的next()方法，指標往后移動，直到它指向資料結構結束的位置，每一次呼叫next方法，都會回傳資料結構中被指標指向的成員的資訊{ value: something , done: false }，
3. Array，Map，Set，String，TypedArray，NodeList 物件，函式的 arguments 物件為原生具備 Iterator 介面的資料結構，
4. 呼叫 Iterator 介面的場合：for...of回圈、解構賦值、擴展運算子、yield*、Array.from()、Map()、Set()、 WeakMap()、 WeakSet()、Promise.all()、Promise.race()，