前端循环全解析：JS/ES/TS循环写法与实战示例

循环是编程中控制流程的核心工具。本文将详细介绍 JavaScript、ES6+ 及 TypeScript 中各种循环的写法、特性，并通过实际示例帮助你掌握它们的正确使用姿势。

---

目录

传统三剑客

for 循环

while 循环

do...while 循环

ES6 新特性

forEach

for...of

for...in

数组高阶方法

map

filter

TypeScript 特别注意事项

循环对比与选择指南

---

一、传统三剑客 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 特别注意事项

类型注解：

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

枚举遍历：

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

对象遍历：

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简单数组遍历❌undefinedmap数组元素转换❌新数组filter数组元素过滤❌新数组

---

总结建议

优先考虑可读性：在性能差异不大时，选择更语义化的方式

注意类型安全：TypeScript 中要确保循环变量正确类型

避免副作用：尽量使用纯函数式方法处理数据

性能关键场景：大数据量时优先考虑传统 for 循环

掌握各种循环的特点，根据具体场景选择合适的迭代方式，将显著提升代码质量和开发效率。

如果对你有帮助，请帮忙点个👍