1.?傳統 for 循環
const arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {console.log(`索引 ${i}: 值 ${arr[i]}`);
}
// 輸出：
// 索引 0: 值 10
// 索引 1: 值 20
// 索引 2: 值 30特點：最基礎的循環，可通過索引精準控制
適用場景：需要索引操作、復雜循環控制（如
break/continue）注意：冗長但靈活性最高
2.?for...of 循環 (ES6)?
const fruits = ['🍎', '🍌', '🍊'];
for (const fruit of fruits) {if (fruit === '🍌') break; // 支持中斷console.log(fruit);
}
// 輸出： 🍎特點：直接獲取值（非索引），支持
break/continue適用場景：數組、字符串、Map/Set等可迭代對象
注意：不能遍歷普通對象（會報錯）
3.?for...in 循環?
const person = { name: 'Alice', age: 25 };
for (const key in person) {console.log(`${key}: ${person[key]}`);
}
// 輸出：
// name: Alice
// age: 25特點：遍歷對象鍵名（包括原型鏈上的可枚舉屬性）
適用場景：遍歷對象屬性，數組可用但不推薦（會遍歷非數字鍵）
注意：用
hasOwnProperty過濾原型屬性
?
4.?forEach 方法?
[1, 2, 3].forEach((num, index) => {console.log(num * index);
});
// 輸出：0 (1*0), 2 (2*1), 6 (3*2)特點：數組專用，為每個元素執行回調
適用場景：簡單遍歷數組，無需中斷的場景
注意：無法用
break中斷，返回值始終為undefined
5.?map 方法?
const nums = [1, 2, 3];
const squares = nums.map(num => num * num);
console.log(squares); // [1, 4, 9]特點：返回新數組（原數組不變），元素是一一映射的結果
適用場景：數據轉換（如 API 響應格式化）
注意：回調必須
return，否則新數組元素為undefined
?
6.?filter 方法?
const numbers = [10, 15, 20, 25];
const bigNumbers = numbers.filter(num => num > 15);
console.log(bigNumbers); // [20, 25]特點：返回通過測試的元素組成的新數組
適用場景：數據篩選（如過濾無效值）
注意：不會修改原數組
🔑 核心區別總結表
| 方法 | 主要用途 | 返回值 | 能否中斷循環 | 適用數據類型 |
|---|---|---|---|---|
for | 通用循環 | 無 | ? | 數組、字符串 |
for...of | 遍歷可迭代對象的值 | 無 | ? | 數組、字符串、Map/Set |
for...in | 遍歷對象鍵名 | 無 | ? | 對象 |
forEach | 數組遍歷 | undefined | ? | 數組 |
map | 數組元素轉換 | 新數組 | ? | 數組 |
filter | 數組元素篩選 | 新數組 | ? | 數組 |
?
💡 黃金實踐建議
遍歷數組：
需要索引 →?
for?或?forEach只需值 →?
for...of需返回新數組 →?
map/filter
遍歷對象?→?只用?
for...in?(記得用obj.hasOwnProperty(key)過濾)特殊需求：
需要中斷循環 →?
for/for...of操作DOM集合 → 先用
Array.from()轉數組再用數組方法
?? 避免用
for...in遍歷數組！它會遍歷非數字鍵和原型鏈屬性，導致意外行為。
-WEEKDAY(TODAY(),2)+1)
