在 JavaScript 中，迴圈（loops）是用來重複執行一段程式碼的有效工具。除了基本的迴圈（如 for、while、do...while），還有一些進階的概念和技巧可以使你的迴圈更具彈性和效率。

1. for...of 和 for...in 迴圈

這兩種迴圈適合用來遍歷物件或陣列。

• for...of：用來遍歷「可迭代」的對象（如陣列、字串、Set、Map 等等）。

  const arr = [10, 20, 30];
  for (let value of arr) {
    console.log(value); // 10, 20, 30
  }
  

• for...in：用來遍歷物件的屬性名稱。

  const obj = {a: 1, b: 2, c: 3};
  for (let key in obj) {
    console.log(key, obj[key]); // a 1, b 2, c 3
  }
  

2. Array.prototype.forEach()

forEach() 是陣列上的方法，允許你在每個陣列項目上執行一個函數。這不會返回值，僅僅是執行動作。

const numbers = [1, 2, 3, 4];
numbers.forEach((num) => {
  console.log(num * 2); // 2, 4, 6, 8
});

3. Array.prototype.map()

map() 類似於 forEach()，但它會產生一個新的陣列，新的陣列會存放原陣列中的每個項目經過處理後的結果。

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

4. break 和 continue 關鍵字

• break：立即中斷並跳出迴圈。

  for (let i = 0; i < 5; i++) {
    if (i === 3) break;
    console.log(i); // 0, 1, 2
  }
  

• continue：跳過當前這一次迴圈，並開始下一次迴圈。

  for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i); // 0, 1, 3, 4
  }
  

5. 遞迴（Recursion）替代迴圈

遞迴是一種函數自我呼叫的技術，通常可以取代迴圈來完成某些操作。遞迴常用於解決樹結構或巢狀結構的問題。

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

6. 異步迴圈（Asynchronous Loops）

在處理異步操作（如 API 請求）時，常見的挑戰是如何處理異步的迴圈。常見的方式是使用 async/await。

const fetchData = async () => {
  // 模擬一個異步操作
  return new Promise((resolve) => setTimeout(() => resolve("data"), 1000));
};

const processItems = async () => {
  const items = [1, 2, 3];
  for (let item of items) {
    const data = await fetchData();
    console.log(`Item ${item}: ${data}`);
  }
};

processItems();

7. 巢狀迴圈（Nested Loops）

巢狀迴圈是指一個迴圈裡面再包含一個或多個迴圈。在處理多維陣列時很有用。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let row of matrix) {
  for (let value of row) {
    console.log(value); // 1, 2, 3, 4, 5, 6, 7, 8, 9
  }
}

8. reduce() 高階函數

reduce() 是用來累積陣列中的值。可以用它來簡單地取代許多傳統的迴圈結構，例如加總陣列的值。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10

總結

掌握這些進階技巧後，將可以更靈活地運用 JavaScript 的迴圈，讓程式碼更加簡潔且具效率。當你處理大量資料或需要更複雜的邏輯時，選擇正確的迴圈結構非常重要。