JavaScript 中的 for...of 循環
JavaScript for...of 語句迭代可迭代對象的值，例如數組、字符串、映射、集合、節點列表等。在 ES6 中引入它是為了提供乾淨簡潔的迭代機制。
語法
for...of 語句的語法如下：
for (const value of iterable) {
// code block to be executed
}
對於每次迭代，將屬性的值分配給 value 多變的。可以用 const 聲明 , let , 或 var . iterable 是具有可枚舉屬性（字符串、數組、映射、集合等）並且可以迭代的對象。代碼塊對每個屬性執行一次。
示例
讓我們看以下示例，演示如何使用 for...of 循環遍歷不同的可迭代對象的語句。
遍歷數組
JavaScript 數組是一種簡單的數據結構，可將多個值存儲在單個變量中。這是一個示例，展示瞭如何使用 for...of 迭代數組 循環：
const birds = ['🐦', '🦅', '🦆', '🦉'];
// iterate over all values
for (const bird of birds) {
console.log(`Hey ${bird}`);
}
// Hey 🐦
// Hey 🦅
// Hey 🦆
// Hey 🦉
遍歷字符串
字符串也是一種可迭代的數據類型，所以可以使用 for...of 也在字符串上：
const str = 'Cat';
// iterate over the string
for (const char of str) {
console.log(char.toUpperCase().repeat(2));
}
// CC
// AA
// TT
遍歷地圖
JavaScript Map 是 ES6 中引入的一種特殊數據結構，允許您創建鍵值對的集合。對象和原始值都可以用作鍵或值。
遍歷地圖時，for...of 語句為每次迭代返回一個鍵值對，其插入順序與插入順序相同，如下所示：
const foods = new Map([
['🍌', 'Banana'],
['🍕', 'Pizza'],
['🥒', 'Cucumber']
]);
// iterate over the map
for (const [key, value] of foods) {
console.log(`${key}: ${value}`);
}
// 🍌: Banana
// 🍕: Pizza
// 🥒: Cucumber
迭代一個集合
JavaScript Set 是 ES6 中引入的一種特殊類型的對象，它允許您創建唯一值的集合。您可以將對象和基元作為值存儲在集合對像中。
以下示例顯示瞭如何使用 for...of 迭代一個集合對象：
const flowers = new Set(['🌷', '🌻', '🌹', '🌸']);
// iterate over the set
for (const flower of flowers) {
console.log(flower);
}
// 🌷
// 🌻
// 🌹
// 🌸
遍歷 Arguments 對象
參數對像只是一個可在函數內部訪問的類數組對象，其中包含傳遞給該函數的參數值。
使用 for...of 循環，您可以遍歷 arguments 對象列出傳遞給 JavaScript 函數的所有參數：
function animals() {
for (const arg of arguments) {
console.log(arg);
}
}
animals('🐱', '🐧', '🐥', '🐯');
// 🐱
// 🐧
// 🐥
// 🐯
遍歷 DOM 集合
for...of 語句也可用於迭代 DOM 集合，如 NodeList .以下示例添加了一個 img-fluid 分類為文章直接子級的圖像：
// select all images
const images = document.querySelectorAll('article > img');
// iterate over NodeList
for (const img of images) {
img.classList.add('img-fluid');
}
迭代生成器
生成器是 JavaScript 中一種特殊的函數，可以退出並稍後重新進入。
您可以使用 for...of 輕鬆迭代生成器 語句如下例所示：
function* generator() {
yield 1;
yield 2;
yield 3;
};
// iterate over the generator
for (const gen of generator()) {
console.log(gen);
}
// 1
// 2
// 3
關閉迭代器
您可以輕鬆終止 for...of 使用 break 循環並關閉迭代器 , return , 或 throw 聲明：
const digits = [1, 2, 3];
for (const d of digits) {
console.log(d);
// terminate loop
break;
}
console.log('Done');
// 1
// Done
迭代對象文字
不幸的是，for...of 僅適用於可迭代對象。對象字面量是不可迭代的。但是，您可以使用 Object.keys() 方法來獲取所有屬性名稱，然後遍歷它們：
const animals = {
tiger: '🐅',
cat: '🐱',
monkey: '🐒',
elephant: '🐘'
};
for (const key of Object.keys(animals)) {
console.log(`${key} -> ${animals[key]}`);
}
// tiger -> 🐅
// cat -> 🐱
// monkey -> 🐒
// elephant -> 🐘
而不是使用 for...of 語句，你應該考慮使用 for...in 循環對象字面量。
瀏覽器兼容性
JavaScript for...of 聲明目前僅受現代瀏覽器支持。如果你想支持像 Internet Explorer 這樣的舊瀏覽器，你需要一個 polyfill 或者使用 forEach() 循環來代替。
