javascript有哪些循環結構

# JavaScript有哪些循環結構

循環是編程中用于重復執行代碼塊的核心結構。JavaScript提供了多種循環方式以適應不同場景的需求，本文將詳細介紹7種主要的循環結構及其使用場景。

## 1. for循環

最經典的循環結構，適合已知迭代次數的場景：

```javascript
for (let i = 0; i < 5; i++) {
  console.log(i); // 輸出0-4
}

特點： - 包含初始化、條件判斷和迭代器三個部分 - 循環變量通常用let聲明避免作用域問題 - 支持break和continue控制

2. while循環

當不確定循環次數但知道終止條件時使用：

let x = 0;
while (x < 5) {
  console.log(x);
  x++;
}

注意事項： - 必須手動更新循環條件，否則會導致無限循環 - 適合處理異步操作等待等場景

3. do…while循環

至少執行一次的循環結構：

let y = 0;
do {
  console.log(y);
  y++;
} while (y < 5);

與while的區別： - 條件判斷在后，確保代碼塊至少執行一次 - 適用需要先執行再判斷的場景

4. for…in循環

遍歷對象可枚舉屬性（包括原型鏈）：

const obj = {a: 1, b: 2};
for (const key in obj) {
  console.log(key, obj[key]); // 輸出"a 1", "b 2"
}

注意點： - 不保證屬性順序（尤其數字屬性） - 使用hasOwnProperty檢查避免遍歷原型屬性 - 不推薦用于數組遍歷

5. for…of循環（ES6+）

遍歷可迭代對象（Array, Map, Set等）的值：

const arr = ['a', 'b'];
for (const value of arr) {
  console.log(value); // 輸出"a", "b"
}

優勢： - 直接獲取值而非索引 - 支持自定義迭代器 - 不能直接用于普通對象

6. forEach方法

數組專用的迭代方法：

['a', 'b'].forEach((value, index) => {
  console.log(index, value);
});

特點： - 無法使用break/continue（需用return模擬） - 會跳過空位（sparse array） - 鏈式調用的理想選擇

7. 特殊循環控制

標簽語句

配合break/continue實現多層循環控制：

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1) break outer;
  }
}

遞歸循環

函數調用自身的替代方案：

function countDown(n) {
  if (n < 0) return;
  console.log(n);
  countDown(n - 1);
}

循環性能對比

最佳實踐建議

1. 數組遍歷優先選擇for...of或forEach
2. 需要索引時使用傳統for循環
3. 對象遍歷使用for...in+hasOwnProperty檢查
4. 避免在循環內聲明函數和頻繁DOM操作
5. 大數據集考慮使用while或分片處理

掌握這些循環結構的特性，可以讓你在JavaScript開發中根據具體場景選擇最合適的迭代方案。 “`