JavaScript for of 迴圈

在ES2015之前，遍歷資料介面通常採用如下幾種常見方式：

（1）.for迴圈語句，具體參閱JavaScript for迴圈語句一章節。

（2）.for in語句，具體參閱JavaScript for in語句一章節。

舉一個簡單的例子：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr=["螞蟻部落","ES2015",6,"青島市南區"];
for(let index=0;index<arr.length;index++){
  console.log(arr[index]);
}

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

非常簡單的程式碼，使用for迴圈能實現了對陣列的遍歷效果。

for in語句就不再舉例子了。

ES2015新增for of語句同樣可以實現遍歷功能，它面向的物件型別更加寬泛。

在JavaScript Iterator遍歷器一章節介紹過，遍歷器為不同物件提供了統一的遍歷介面。

for of語句可以遍歷所有具有遍歷器介面的物件。

具有遍歷器介面的物件如下：

（1）.陣列物件。

（2）.某些類陣列物件。

（3）.Map物件。

（4）.Set物件。

特別說明：常見的類陣列物件有字串物件，DOM元素物件集合和arguments物件。

相關閱讀：

（1）.DOM元素物件集合參閱JavaScript元素集合介紹一章節。

（2）.arguments物件參閱JavaScript arguments物件詳解一章節。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = ["螞蟻部落",6,"青島市南區","ES2015"];
for(let elem of arr) {
  console.log(elem);
}

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

上面程式碼實現了對陣列元素的遍歷效果。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(a, b) {
  let it = arguments[Symbol.iterator]();
  for(let arg of it) {
    console.log(arg);
  }
}
func("螞蟻部落", "青島市南區");

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

在前面已經介紹過arguments是類陣列物件。

我們並沒有直接去遍歷arguments物件，而是操作它的遍歷器物件，實現了遍歷功能。

上面的現象可以猜測（事實也是如此）出如下結論：

（1）.arguments物件具有遍歷器介面。

（2）.for of本質上是通過遍歷器物件來遍歷資料結構。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(a, b) {
  for(let arg of arguments) {
    console.log(arg);
  }
}
func("螞蟻部落", "青島市南區");

此程式碼就是直接使用for of操作arguments物件。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let map = new Map([["webName", "螞蟻部落"], ["url", "www.softwhy.com"]]);
for(let elem of map) {
  console.log(elem);
}

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

for of實現了物件Map物件的遍歷功能。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let set = new Set(["螞蟻部落",6,"青島市南區","ES2015"]);
for(let elem of set) {
  console.log(elem);
}

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

上面程式碼實現了對Set物件的遍歷功能。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function *antzone(){
  yield "螞蟻部落一";
  yield "螞蟻部落二";
  yield "螞蟻部落三";
  yield "螞蟻部落四";
}
let g=antzone();
for(let elem of g){
  console.log(elem);
}

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

上述程式碼實現對Generator資料結構的遍歷。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str = "softwhy";
for(let char of str) {
  console.log(char);
}

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

字串也具有遍歷器介面，所以for of語句可以實現對它的遍歷功能。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let str = "\uD842\uDFB7";
for(let char of str) {
  console.log(char);
}

for of能夠正確識別32位的UTF-16字元。