循環是編程中控制流程的核心工具。本文將詳細介紹 JavaScript、ES6+ 及 TypeScript 中各種循環的寫法、特性，并通過實際示例幫助你掌握它們的正確使用姿勢。

---

目錄

1. 傳統三劍客

   • for 循環

   • while 循環

   • do...while 循環

2. ES6 新特性

   • forEach

   • for...of

   • for...in

3. 數組高階方法

   • map

   • filter

4. TypeScript 特別注意事項

5. 循環對比與選擇指南

---

一、傳統三劍客

1. for 循環

特性：

• 最基礎的循環結構

• 明確控制循環次數

• 支持 break 和 continue

// JavaScript
for (let i = 0; i < 5; i++) {console.log(i); // 0-4
}// TypeScript
const items: number[] = [10, 20, 30];
for (let i: number = 0; i < items.length; i++) {console.log(items[i]);
}

2. while 循環

特性：

• 條件前置檢查

• 適合不確定循環次數的情況

let count = 0;
while (count < 3) {console.log(count++); // 0,1,2
}

3. do...while 循環

特性：

• 至少執行一次

• 條件后置檢查

let x = 5;
do {console.log(x--); // 輸出5后停止
} while (x > 5);

---

二、ES6 新特性循環

1. forEach

特性：

• 數組專用方法

• 無法使用 break/continue

• 回調函數參數豐富

const colors = ['red', 'green', 'blue'];// JavaScript
colors.forEach((color, index) => {console.log(`${index}: ${color}`);
});// TypeScript
interface ColorItem {id: number;name: string;
}const colorObjects: ColorItem[] = [{ id: 1, name: 'red' },{ id: 2, name: 'green' }
];colorObjects.forEach((item: ColorItem) => {console.log(item.id.toString());
});

2. for...of

特性：

• 支持所有可迭代對象

• 可直接獲取元素值

• 支持 break/continue

// 遍歷數組
const nums = [10, 20, 30];
for (const num of nums) {if (num > 20) break;console.log(num); // 10,20
}// 遍歷字符串
for (const char of 'Hello') {console.log(char); // H,e,l,l,o
}// TypeScript 泛型示例
const mixedArray: Array<string | number> = ['a', 1, 'b'];
for (const item of mixedArray) {if (typeof item === 'string') {console.log(item.toUpperCase());}
}

3. for...in

特性：

• 遍歷對象可枚舉屬性

• 會遍歷原型鏈屬性

• 數組索引為字符串類型

const obj = { a: 1, b: 2 };// JavaScript
for (const key in obj) {if (obj.hasOwnProperty(key)) {console.log(`${key}: ${obj[key]}`);}
}// TypeScript 類型斷言
interface MyObject {[key: string]: number;
}const typedObj: MyObject = { x: 10, y: 20 };
for (const key in typedObj) {const value = typedObj[key];console.log(value.toFixed(2));
}

---

三、數組高階方法

1. map

特性：

• 返回新數組

• 數據轉換專用

// TypeScript
const numbers: number[] = [1, 2, 3];
const squares: number[] = numbers.map(n => n * n);

2. filter

特性：

• 返回過濾后的新數組

• 條件篩選利器

const users = [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 17 }
];const adults = users.filter(user => user.age >= 18);

---

四、TypeScript 特別注意事項

1. 類型注解：

   // 明確聲明索引類型
   const arr: number[] = [1, 2, 3];
   for (let i: number = 0; i < arr.length; i++) {const item: number = arr[i];
   }

2. 枚舉遍歷：

   enum Color { Red = 'RED', Green = 'GREEN' }
   for (const colorKey in Color) {const colorValue = Color[colorKey as keyof typeof Color];
   }

3. 對象遍歷：

   interface User {id: number;name: string;
   }const user: User = { id: 1, name: 'Alice' };
   for (const key in user) {const value = user[key as keyof User];
   }

---

五、循環選擇指南

循環類型	最佳使用場景	是否可中斷	返回值
for	確定次數的循環	?	無
for...of	遍歷數組/可迭代對象	?	無
for...in	遍歷對象屬性	?	無
forEach	簡單數組遍歷	?	undefined
map	數組元素轉換	?	新數組
filter	數組元素過濾	?	新數組

---

總結建議

1. 優先考慮可讀性：在性能差異不大時，選擇更語義化的方式

2. 注意類型安全：TypeScript 中要確保循環變量正確類型

3. 避免副作用：盡量使用純函數式方法處理數據

4. 性能關鍵場景：大數據量時優先考慮傳統 for 循環

掌握各種循環的特點，根據具體場景選擇合適的迭代方式，將顯著提升代碼質量和開發效率。

如果對你有幫助，請幫忙點個👍