JavaScript Iterables
可迭代物件是可迭代物件（如陣列）。
使用簡單高效的程式碼即可訪問可迭代物件。
可以使用 for..of 迴圈迭代可迭代物件
For Of 迴圈
JavaScript 的 for..of 語句迴圈遍歷可迭代物件中的元素。
語法
for (variable of iterable) {
// 要執行的程式碼塊
}
迭代
迭代很容易理解。
它只是意味著遍歷一系列元素。
這裡有一些簡單的例子
- 迭代字串
- 迭代陣列
迭代字串
您可以使用 for..of 迴圈來迭代字串中的元素
迭代陣列
您可以使用 for..of 迴圈來迭代陣列中的元素
迭代 Set
您可以使用 for..of 迴圈來迭代 Set 中的元素
注意
Set 和 Map 在下一章介紹。
迭代 Map
您可以使用 for..of 迴圈來迭代 Map 中的元素
示例
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
for (const x of fruits) {
// 要執行的程式碼塊
}
自己動手試一試 »
JavaScript 迭代器
迭代器協議 定義瞭如何從物件中產生值序列。
當一個物件實現 next() 方法時，它就變成了一個迭代器。
next() 方法必須返回一個具有兩個屬性的物件
- value（下一個值）
- done（true 或 false）
| value | 迭代器返回的值 (如果 done 為 true，則可省略) |
|---|---|
| 完成 |
如果迭代器已完成，則為 true 如果迭代器生成了新值，則為 false |
注意
嚴格來說，可迭代物件必須實現 Symbol.iterator 方法。
String、Array、TypedArray、Map 和 Set 都是可迭代物件，因為它們的原型物件具有 Symbol.iterator 方法。
自制可迭代物件
這個可迭代物件返回永不結束的序列：10, 20, 30, 40,.... 每次呼叫 next() 時
示例
// Home Made Iterable
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}
// 建立可迭代物件
const n = myNumbers();
n.next(); // 返回 10
n.next(); // 返回 20
n.next(); // 返回 30
自己動手試一試 »
自制可迭代物件的問題
它不支援 JavaScript 的 for..of 語句。
JavaScript 可迭代物件是一個具有Symbol.iterator的物件。
Symbol.iterator 是一個返回 next() 函式的函式。
可以使用程式碼 for (const x of iterable) { } 來迭代可迭代物件
示例
// 建立一個物件
myNumbers = {};
// 使其可迭代
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
現在您可以使用 for..of
for (const num of myNumbers) {
// 任何程式碼
}
自己動手試一試 »
Symbol.iterator 方法由 for..of 自動呼叫。
但我們也可以“手動”完成
示例
let iterator = myNumbers[Symbol.iterator]();
while (true) {
const result = iterator.next();
if (result.done) break;
// 任何程式碼
}
自己動手試一試 »
