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

循环是编程中控制流程的核心工具。本文将详细介绍 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];
   }

五、循环选择指南

总结建议

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

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

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

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

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

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