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

前端循环：for、forEach、map 指南

news 来源：原创 2025/5/18 20:32:32

一、基础语法与使用场景

1. for 循环

语法结构：

for (初始化; 条件; 迭代) {
  // 循环体
}

经典用例：

const arr = [1, 2, 3];
for (let i=0; i<arr.length; i++) {
  console.log(`索引 ${i}: 值 ${arr[i]}`);
}
// 输出：
// 索引 0: 值 1
// 索引 1: 值 2
// 索引 2: 值 3

核心特点：

灵活控制：可通过 break 中断循环，continue 跳过迭代
性能优先：处理超大数据时效率最高（如 10万+ 元素）

2. forEach 方法

语法结构：

arr.forEach((当前值, 索引, 原数组) => {
  // 回调函数
});

典型场景：

const users = ['Alice', 'Bob', 'Charlie'];
users.forEach((user, index) => {
  console.log(`${index+1}. ${user}`);
});
// 输出：
// 1. Alice
// 2. Bob
// 3. Charlie

关键特性：

简洁直观：无需手动管理索引
不可中断：无法通过 return 或 break 提前终止循环

3. map 方法

语法形式：

const newArr = arr.map((当前值, 索引, 原数组) => {
  return 新值;
});

数据转换示例：

const prices = [100, 200, 300];
const discounted = prices.map(price => price * 0.8);
console.log(discounted); // [80, 160, 240]

核心价值：

无副作用：返回新数组，不修改原数据
链式调用：适合函数式编程组合

const result = data
  .filter(item => item.active)
  .map(item => ({ ...item, score: item.value * 10 }));

二、深度使用注意事项

1. for 循环的陷阱

索引越界：错误边界导致死循环

// 危险示例（i <= arr.length）
for (let i=0; i<=arr.length; i++) {
  // 最后一次循环访问 arr[3]（undefined）
}

性能优化：缓存数组长度

// 优化前：每次循环计算 length
for (let i=0; i<arr.length; i++) {}

// 优化后：缓存 length
for (let i=0, len=arr.length; i<len; i++) {}

2. forEach 的隐藏问题

无效的 return：试图用 return 中断循环

arr.forEach(item => {
  if (item === 'stop') return; // 无效！继续执行
});

异步陷阱：无法等待异步操作完成

// 错误示例：并行执行所有异步操作
async function process() {
  arr.forEach(async item => {
    await fetch(item); // 不会按顺序执行
  });
}

3. map 的常见误区

滥用副作用：错误地修改原数组

// 反模式：通过 map 修改原数组
arr.map(item => {
  item.value += 10; // 原数组元素被修改（若元素是对象）
  return item;
});

不必要的映射：忽略返回值导致资源浪费

// 错误：用 map 替代 forEach
arr.map(item => {
  console.log(item); // 返回 undefined 数组
});

三、最佳实践指南

1. 选择循环方式的决策树


    A[需要返回值吗？] -->|是| B[使用 map]
    A -->|否| C{需要中断循环？}
    C -->|是| D[使用 for]
    C -->|否| E{处理大数据？}
    E -->|是| F[优先 for]
    E -->|否| G[使用 forEach]

2. 性能敏感场景优化

// 超大数据处理技巧
const bigData = new Array(1000000).fill(0);

// 最佳方案：for 循环 + 缓存长度
for (let i=0, len=bigData.length; i<len; i++) {
  // 高性能操作
}

// 次优方案：倒序循环
for (let i=bigData.length; i--; ) {
  // 利用 i-- 的布尔判断
}

3. 现代 JavaScript 的替代方案

for...of：更简洁的迭代语法

for (const item of arr) {
  if (item === 'break') break; // 支持中断
}
reduce：复杂聚合操作

const total = arr.reduce((sum, item) => sum + item, 0);