JavaScript 循環方法對比指南

---

1. 標準 for 循環

語法：

for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}

優點

? 完全控制索引，適合需要精確控制遍歷順序或步長的場景。
? 性能最優，在超大規模數據遍歷時比高階方法（如 forEach）更快。
? 支持 break、continue、return，可靈活控制循環流程。

缺點

? 代碼較冗長，需要手動管理索引。
? 不適用于對象遍歷（除非結合 Object.keys()）。

適用場景

• 需要基于索引的操作（如逆序遍歷、間隔遍歷）
• 性能敏感的場景（如大數據量處理）

---

2. for…in 循環

語法：

for (const key in obj) {console.log(key, obj[key]);
}

優點

? 可遍歷對象的所有可枚舉屬性（包括原型鏈上的屬性）
? 適用于普通對象的鍵值遍歷

缺點

? 不推薦用于數組，因為會遍歷非數字鍵和原型鏈屬性
? 遍歷順序不確定（尤其在涉及繼承屬性時）
? 無法直接獲取值，需通過 obj[key] 訪問

適用場景

• 遍歷普通對象的屬性（需配合 hasOwnProperty 檢查）
• 調試時快速查看對象結構

改進方案

for (const key in obj) {if (obj.hasOwnProperty(key)) {  // 過濾原型鏈屬性console.log(key, obj[key]);
}

---

3. for…of 循環

語法：

for (const item of iterable) {console.log(item);
}

優點

? 直接遍歷值，無需手動索引或鍵名
? 支持所有可迭代對象（數組、字符串、Map、Set 等）
? 支持 break、continue、return
? 代碼簡潔易讀，是"增強 for 循環"的最佳實踐

缺點

? 不能直接遍歷普通對象（需先轉換為數組，如 Object.entries(obj)）

適用場景

• 數組或可迭代對象的遍歷（推薦替代 forEach）
• 需要提前終止循環的場景（如查找第一個符合條件的元素）

示例

const arr = [1, 2, 3];
for (const num of arr) {if (num === 2) break;  // 支持 breakconsole.log(num);      // 輸出 1
}

---

4. Array.prototype.forEach

語法：

arr.forEach((item, index) => {console.log(item, index);
});

優點

? 函數式編程風格，鏈式調用方便（如結合 map、filter）
? 無需手動管理索引

缺點

? 無法中斷循環（不支持 break 或 return）
? 性能略低于 for 或 for…of（尤其在大數據量時）
? 不適用于異步操作（除非配合 async/await 的特殊處理）

適用場景

• 簡單遍歷數組且無需中斷邏輯
• 與其他高階函數（如 map、filter）組合使用

不適用場景

// 錯誤示例：嘗試用 forEach 中斷循環
arr.forEach(item => {if (item === 2) break;  // ? 報錯：Illegal break statement
});

---

5. 其他遍歷方法

方法	特點
while / do…while	適合條件循環（如讀取流數據），但需手動控制終止條件
for await…of	異步遍歷（如遍歷異步生成器或 Promise 數組）
Object.keys() + forEach	安全遍歷對象屬性的替代方案（避免 for…in 的原型鏈問題）

---

6. 總結：如何選擇循環方法

需求	推薦方法
遍歷數組且需要中斷	for…of 或 for
遍歷對象屬性	Object.keys() + forEach 或 for…in（需過濾）
簡單數組遍歷且無需中斷	forEach
高性能遍歷（大數據量）	標準 for 循環
異步遍歷	for await…of

---

7. 性能對比（僅供參考）

const largeArray = Array(1e6).fill(0);// 1. 標準 for 循環（最快）
for (let i = 0; i < largeArray.length; i++) {}// 2. for...of（次快）
for (const item of largeArray) {}// 3. forEach（較慢）
largeArray.forEach(() => {});

?? 實際性能差異在大多數場景下可忽略，優先考慮代碼可讀性！