JavaScript 中的循環方法

循環的基本概念

為什麼需要循環？ 想像你要印出 1 到 10 的數字，如果不用循環，就得寫 10 行程式碼；用循環，只需幾行就能搞定。
如何測試？ 在瀏覽器開啟 Console，貼上程式碼，按 Enter 執行，就能看到結果。
注意事項： 所有範例都用 JavaScript（ES6 以上版本），變數用 let 或 const 宣告，避免 var 的問題（如作用域洩漏）。

常見的循環方法

這裡列出 7 種最常用的（從傳統到現代）：

for 循環：傳統的計數循環，適合固定次數的執行。
while 循環：根據條件重複執行，先檢查條件再跑程式碼。
do...while 循環：類似 while，但先執行一次程式碼，再檢查條件。
for...in 循環：用來遍歷物件的屬性（key），不適合陣列。
for...of 循環：用來遍歷可迭代物件的值（如陣列、字串），現代且簡潔。
forEach() 方法：陣列專用，無法中斷循環，適合簡單遍歷。
while 與 do...while 的變形：但重點在條件控制。

差異比較

以下用表格比較這些方法的差異，讓你一看就懂。表格包括：

適用對象：用在什麼資料上。
優點：好處。
缺點：壞處或限制。
是否可中斷：能不能用 break 或 return 停下來。
效能：大致速度（傳統 for 最快，forEach 較慢因為是函式呼叫）。

方法	適用對象	優點	缺點	是否可中斷	效能
for	陣列、字串、計數（用索引）	靈活、可控制索引、效能高	語法較繁瑣，容易出錯（如忘記遞增）	是（break/continue）	高
while	條件不明的重複執行	簡單，適合未知次數	需手動管理計數器，易無限循環	是（break/continue）	高
do...while	至少執行一次的條件循環	保證至少跑一次程式碼	條件檢查在後，易無限循環	是（break/continue）	高
for...in	物件屬性（key）	適合遍歷物件鍵值	不適合陣列（會亂序），忽略非枚舉屬性	是（break/continue）	中
for...of	可迭代物件（如陣列、Map）	簡潔、直接取值、不用索引	不適合物件屬性	是（break/continue）	高
forEach()	陣列	語法乾淨、無需索引	無法中斷、無法改變原陣列	否（只能用 return）	中（函式呼叫）

總結差異：
- 傳統 vs. 現代：for、while 是傳統的，適合需要精確控制（如遊戲計時器）；for...of、forEach 是 ES6 現代的，適合前端開發（如 React 元件中處理資料）。
- 陣列 vs. 物件：陣列用 for...of 或 forEach；物件用 for...in。
- 效能考量：如果資料很大（上萬筆），用 for 最快；forEach 因為是陣列方法，會多一層函式呼叫。
- 中斷與修改：傳統循環可以用 break 跳出、continue 跳過這次；forEach 只能結束這次迭代，無法整個停止。

// 準備測試資料：一個陣列和一個物件
const fruits = ["蘋果", "香蕉", "橘子", "鳳梨"];
const person = { name: "小明", age: 25, city: "台北" };

// 1. for 循環：用索引遍歷陣列
console.log("=== for 循環 ===");
for (let i = 0; i < fruits.length; i++) {
  console.log(`索引 ${i}: ${fruits[i]}`);
}

// 2. while 循環：條件為真就繼續
console.log("=== while 循環 ===");
let j = 0;
while (j < fruits.length) {
  console.log(`位置 ${j}: ${fruits[j]}`);
  j++; // 記得遞增，否則無限循環！
}

// 3. do...while 循環：先執行一次
console.log("=== do...while 循環 ===");
let k = 0;
do {
  console.log(`至少一次: ${fruits[k]}`);
  k++;
} while (k < fruits.length);

// 4. for...in 循環：遍歷物件屬性
console.log("=== for...in 循環 ===");
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

// 5. for...of 循環：遍歷陣列值
console.log("=== for...of 循環 ===");
for (let fruit of fruits) {
  console.log(`水果: ${fruit}`);
}

// 6. forEach() 方法：陣列專用
console.log("=== forEach() 方法 ===");
fruits.forEach(function (fruit, index) {
  console.log(`索引 ${index}: ${fruit}`);
});

// 額外：示範中斷（在 for 中用 break）
console.log("=== for 循環中斷範例 ===");
for (let m = 0; m < 5; m++) {
  if (m === 3) {
    console.log("中斷在索引 3");
    break; // 跳出循環
  }
  console.log(m);
}

循環的基本概念​

常見的循環方法​

差異比較​

循環的基本概念

常見的循環方法

差異比較