JavaScript Iterator遍歷器

在ES2015之前，我們要遍歷陣列通常會使用如下方式：

[JavaScript] 純文字檢視 複製程式碼
var arr=["螞蟻部落",6,"www.softwhy.com"];
for(var index=0;index<arr.length;index++){
  console.log(arr[index]);
}

程式碼執行效果截圖如下：

上面程式碼很簡單，不做介紹。

ES2015新增了一個新的遍歷陣列方式，使用for of迴圈。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let arr=["螞蟻部落",6,"www.softwhy.com"];
for(ele of arr){
  console.log(ele);
}

程式碼執行效果截圖如下：

與使用for迴圈實現了同樣的效果，關於for of可以參閱JavaScript for of迴圈一章節。

之所以陣列可以使用for of進行遍歷，是因為資料具有Iterator遍歷器介面，下面做一下介紹。

Iterator遍歷器介面不僅陣列具有，比如以下資料結構也具有：

（1）.Set。

（2）.Map。

（3）.字串。

（4）.TypedArray。

上述三種資料結構可以相互巢狀使用，也就是你中有我，我中有你，所以統一訪問介面非常必要。

現在列印一下資料的內部結構：

陣列物件具有Symbol.iterator屬性，它指向一個方法，呼叫此方法可以返回一個遍歷器物件。

遍歷器物件有其自身特點，下面將通過程式碼例項詳細介紹：

[JavaScript] 純文字檢視 複製程式碼
let arr = ["螞蟻部落", 4, "www.softwhy.com", "青島市南區"];
let it = arr[Symbol.iterator]();
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

arr[Symbol.iterator]()返回一個遍歷器物件。

它是一個指標物件，預設情況下，它會指向所遍歷資料結構的開始位置。

遍歷過程分析如下：

（1）.首次呼叫next方法，會將指標指向資料結構第一個成員，本例子是一個陣列（第一個成員是"螞蟻部落"）。

（2）.第二次呼叫指向第二個成員（成員是4），以此類推，直到資料結構的末尾。

每呼叫next方法一次都返回一個物件：

（1）.返回的物件包含兩個屬性，value和done。

（2）.value屬性值是資料結構成員的值，如果遍歷完成，value屬性值為undefined。

（3）.done屬性值是布林型，false說明尚未完成遍歷，為true，表明已經完成。

新增自定義遍歷器介面：

有些資料結構是沒有遍歷器結構的，我們可以為它新增自定義遍歷器介面。

對於不具有遍歷器介面的類陣列物件，為其新增遍歷器介面的最簡單的方式就是直接新增陣列的遍歷器介面。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
let obj = {
  0: "螞蟻部落",
  1: "www.softwhy.com",
  2: "青島市南區",
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let elem of obj) {
  console.log(elem);
}

程式碼執行效果截圖如下：