当前位置：首页 > news >正文

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

news 来源：原创 2025/4/25 17:53:52

循环是编程中控制流程的核心工具。本文将详细介绍 JavaScript、ES6+ 及 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	简单数组遍历	❌	undefined
map	数组元素转换	❌	新数组
filter	数组元素过滤	❌	新数组