如何在 JavaScript 中循環遍歷數組
循環廣泛用於一遍又一遍地運行一段代碼，每次都有不同的值，直到滿足特定條件。它們通常用於遍歷一堆值、計算數字的總和、重複調用函數以及許多其他事情。
在本文中，您將學習如何使用 vanilla JavaScript 循環 遍歷數組的元素。
現代 JavaScript 提供了不同類型的循環：
for— 重複一段代碼給定的次數forEach()— 為數組或 NodeList 中的每個元素執行給定的函數for...in— 循環遍歷對象的屬性for...of— 循環遍歷可迭代對象的值while— 在指定條件為真時重複一段代碼do...while— 循環一段代碼，直到特定條件為真
在下一節中，我們將通過一個示例討論每個 JavaScript 循環。讓我們從舊的 for 開始 循環。
for 循環
for 循環用於迭代 JavaScript 中的數組和 NodeList。它的語法如下：
for (init; condition; expr) {
// code block to be executed
}
如上所示，for 循環有三個語句：
init在代碼塊開始執行之前只執行一次。您可以在此處定義是循環整個數組還是中途開始。condition定義條件，直到循環繼續執行代碼塊。這是一種在循環的每次迭代後都會檢查的測試。如果返回true，循環將繼續執行。如果返回false，循環結束。expr每次代碼塊完成執行後都會執行。您可以使用此語句來增加或減少計數器變量。
讓我們看一個例子：
const birds = ['🐦', '🦅', '🦆', '🦉'];
// loop all birds
for (let i = 0; i < birds.length; i++) {
console.log(birds[i]); // current value
console.log(i); // current index
}
在上面的例子中，我們使用 init 設置變量的語句 i 作為計數器變量。在 condition 聲明，我們確保計數器變量總是小於數組元素的總數。最後，expr 每次代碼塊執行完畢後，語句只會將 counter 變量加 1。
在循環體內，我們可以使用計數器變量 i 從數組中訪問當前項。
forEach() 循環
Array.forEach() 方法是在 ES6 中引入的，它對數組的每個元素按升序運行一次指定的函數。
這是一個演示如何使用 forEach() 的示例 在 JavaScript 中遍歷數組元素：
const birds = ['🐦', '🦅', '🦆', '🦉'];
birds.forEach((bird, index) => {
console.log(`${index} -> ${bird}`);
});
// 0 -> 🐦
// 1 -> 🦅
// 2 -> 🦆
// 3 -> 🦉
index 參數是可選的。不需要的可以跳過：
birds.forEach(bird => console.log(bird));
不幸的是，沒有辦法終止 forEach() 循環。
for...in 循環
for...in 語句遍歷對象的屬性。
這是一個例子：
const person = {
name: 'John Doe',
email: '[email protected]',
age: 25
};
for (const prop in person) {
console.log(prop); // property name
console.log(person[prop]); // property value
}
for..in 語句不僅限於對象，它也應該工作 對於數組（雖然不推薦）：
const digits = [2, 3, 5];
for (const index in digits) {
console.log(digits[index]);
}
// 2
// 3
// 5
for...of 循環
for...of 語句是在 ES6 中引入的。它循環遍歷數組、字符串、映射、集合等可迭代對象的值。
這是一個例子：
const birds = ['🐦', '🦅', '🦉'];
// iterate over all values
for (const bird of birds) {
console.log(`Hey ${bird}`);
}
// Hey 🐦
// Hey 🦅
// Hey 🦉
for...in 的主要區別 和 for...of 聲明是前者迭代屬性名稱，而後者迭代屬性值。
while 循環
while 只要指定條件為真，循環就會遍歷代碼塊。這是一個例子：
const cars = ['BMW', 'Porsche', 'Audi', 'Tesla'];
let i = 0;
while (i < cars.length) {
console.log(i); // index
console.log(cars[i]); // value
i++;
}
不要忘記增加計數器變量 i 值，否則循環將永遠不會結束。您可以終止 一個 while 使用 break 循環 聲明：
while(i < cars.length) {
// terminate if index = 2
if(i === 2) {
break;
}
// TODO: do whatever you want to here
}
跳過 一次迭代，只需使用 continue 聲明：
while(i < cars.length) {
// skip 2nd iteration
if(i === 2) {
continue;
}
// TODO: do whatever you want to here
}
do...while 循環
do...while 循環類似於 while 環形。唯一的區別是 do...while 循環執行一次代碼塊，然後檢查條件。如果為真，只要條件為真，就會重複代碼塊。
這是 do...while 的示例 循環：
const cars = ['BMW', 'Porsche', 'Audi', 'Tesla'];
let i = 0;
do {
console.log(i); // index
console.log(cars[i]); // value
i++;
} while (i < cars.length);
就像 while , 你可以使用 break 和 continue 用於終止循環或跳過迭代的語句。
