JS遍历数组的常用方法：for、forEach、map与for...of详解

在 JavaScript 开发中，数组遍历是最基础且高频的操作。虽然经典 for 循环、forEach、map 与 for...of 都能逐项读取数组元素，但它们的设计初衷完全不同：for 循环提供最底层的下标索引与控制能力；forEach 是专为单向消费设计的声明式迭代器；map 遵循不可变原则用于生产等长新数组；而 for...of 依托 ES6 迭代器协议，是结合流程中断与异步等待的现代解法。明确这四者的驱动机制与适用边界，是写出整洁、高效且无竞态风险代码的前提。

一、经典 for 循环：精细化下标与流程控制

经典 for 循环通过显式初始化计数器变量，并在每轮循环后递增（或递减），直接利用数组索引读取内存槽位。这种命令式遍历不依赖任何原型链方法，由引擎提供原生底层优化，拥有最灵活的控制权限。

// 基础使用示例：配合 break 与 continue
const tasks = ['renderUI', 'fetchData', 'cacheClean', 'reportLog'];

for (let i = 0; i < tasks.length; i++) {
  if (tasks[i] === 'fetchData') {
    continue; // 跳过当前任务，继续执行后续项
  }
  if (tasks[i] === 'reportLog') {
    break; // 满足条件提前终止整场循环
  }
  console.log(`执行任务索引 [${i}]: ${tasks[i]}`);
}

经典 for 循环具备两个无可替代的特性：一是对索引步长的自由干预（例如倒序循环 i--、隔位遍历 i += 2 或根据条件回退下标）；二是天然支持 break、continue 与 return 语句。当遇到庞大数据集只需要检索目标元素时，执行 break 可以瞬间阻断后续不必要的计算开销。

二、Array.prototype.forEach：声明式副作用消费

forEach 是 ECMAScript 5 引入的数组实例高阶方法。它接受一个回调函数，数组会依次将当前元素、对应索引以及原数组引用传给回调函数。开发者无需手动声明与维护下标变量，代码意图更具声明式风格。

// 基础使用示例：单纯打印或修改外部状态（副作用）
const users = [
  { id: 101, name: '张三', score: 85 },
  { id: 102, name: '李四', score: 92 },
  { id: 103, name: '王五', score: 78 }
];

let totalScore = 0;
users.forEach((user, index) => {
  totalScore += user.score;
  console.log(`第 ${index + 1} 位学员: ${user.name}`);
});
console.log(`总分统计结果: ${totalScore}`);

三、Array.prototype.map：不可变数据流与一对一投影

map 同样接收回调函数，但与 forEach 存在根本定位差异：map 的核心使命是“映射衍生”，它在内存中分配一个与原数组等长的新数组，并将每次回调函数的返回值写入对应的槽位，最终返回该新数组，原数组完全不受影响。

// 基础使用示例：将数据对象转换为视图展示模型
const rawPrices = [19.9, 45.0, 99.8];

const formattedList = rawPrices.map((price, idx) => {
  const withTax = (price * 1.13).toFixed(2);
  return {
    id: idx + 1,
    original: price,
    finalPrice: Number(withTax)
  };
});

console.log(formattedList);
console.log(rawPrices); // 原数组保持未修改

在 React、Vue 等现代响应式前端框架中，不可变数据更新是状态管理的核心准则。如果需要将一组数据渲染为组件节点列表，或做链式数据过滤与塑形（如 arr.filter(...).map(...)），map 是首选工具。但必须强调：若无需返回新数组，切勿滥用 map 执行副作用；忽略 map 的返回值会导致无意义的临时内存分配，并在代码审查中传递混乱的语义。

四、for...of 循环：现代迭代器协议与控制流集大成者

for...of 随 ES6（ECMAScript 2015）发布，它作用于任何实现了 [Symbol.iterator] 协议的可迭代对象（包括 Array、Set、Map、String 及参数对象 arguments）。它的语法简洁度媲美高阶函数，同时完全保留了原生控制流能力。

// 基础使用示例：直观值提取与 break 控制
const devices = ['Phone', 'Tablet', 'Laptop', 'Desktop'];

for (const device of devices) {
  if (device === 'Laptop') {
    console.log('检测到核心工作站，停止搜索');
    break; // 原生语法支持提前跳出
  }
  console.log(`扫描设备: ${device}`);
}

如何在使用 for...of 时获取索引？

初学者常因 for...of 默认只产出元素值（value）而退回传统计数循环。实际上，配合数组的 entries() 方法与解构赋值，可以兼得优雅语法与索引访问：

// 使用 entries() 同步解构索引与元素
const colors = ['red', 'green', 'blue'];

for (const [index, color] of colors.entries()) {
  console.log(`Index ${index} -> ${color}`);
}

五、关键差异与高频陷阱剖析

1. 异步遍历的巨大陷阱：forEach 与 async/await 的不兼容性

在涉及网络请求或延迟任务的场景中，初学者极易写出 items.forEach(async (item) => { await fetch(...) })。这段代码会产生严重的时序 Bug：因为 forEach 内部只负责顺序触发回调，对回调返回的 Promise 对象完全无感知，也绝不会等待它完成。因此，外部代码会瞬间穿透继续向下执行，导致后续逻辑读取到未就绪的脏数据。

// ❌ 错误做法：forEach 无法等待异步完成
async function badAsyncFlow(urls) {
  console.log('开始请求...');
  urls.forEach(async (url) => {
    await fetchSimulation(url); // 这里的 await 无法阻断外部主流程
  });
  console.log('所有请求完成？（实际上并没有完成！）');
}

// ✔ 正确做法 1：需按顺序串行执行时，使用 for...of
async function serialAsyncFlow(urls) {
  console.log('按顺序串行请求...');
  for (const url of urls) {
    const res = await fetchSimulation(url); // 严格等待上一个完成再进入下一轮
    console.log(`拿到结果: ${res}`);
  }
  console.log('所有请求真正全部按序完成');
}

// ✔ 正确做法 2：需并发执行并聚合结果时，使用 map + Promise.all
async function parallelAsyncFlow(urls) {
  console.log('并发发起所有请求...');
  // 1. 同步 map 产出 Promise 数组
  const promises = urls.map((url) => fetchSimulation(url));
  // 2. 统一并发等待
  const results = await Promise.all(promises);
  console.log('所有并发任务同步收拢完成', results);
}

function fetchSimulation(val) {
  return new Promise((resolve) => setTimeout(() => resolve(`Data(${val})`), 50));
}

2. 稀疏数组（Sparse Array）空位处理差异

当数组存在未初始化的空槽位（例如 [1, , 3]）时，不同遍历方式的行为出现明显分歧：

• forEach 与 map：严格遵从规范，在调用回调前会通过内部机制判断该索引位置是否真实存在属性（即 hasOwnProperty）。对空槽位，它们会直接跳过，回调函数根本不会被调用。
• 传统 for 与 for...of：按物理逻辑读取槽位，空位会被解构为 undefined 正常进入循环体内部。

const sparseArr = [10, , 30]; // 索引 1 处为 empty

console.log('--- forEach 输出 ---');
sparseArr.forEach((val, i) => console.log(i, val)); // 仅输出 0 10 和 2 30

console.log('--- for...of 输出 ---');
for (const val of sparseArr) {
  console.log(val); // 输出 10、undefined、30
}

六、性能表现与规范选型依据

在大部分日常业务开发中，不同循环方式的微基准性能差异（几十微秒级别）完全被 DOM 操作、网络延迟和业务逻辑所掩盖，因此代码的可读性、语义准确性与可维护性应优先于微优化。但在几万至百万级节点的数据清洗、图形计算等密集型场景下，底层的差异依然清晰：

• 经典 for 循环：执行速度上限最高。因为没有闭包上下文创建、高阶函数压栈以及迭代器对象的分配开销，V8 引擎能对其进行最大深度的 JIT 内联优化与向量化加速。
• for...of：易读性好，开销仅比原生 for 循环略多一个 Iterator 对象的分配与 next() 调用，现代引擎对其有极佳的优化。
• forEach 与 map：每项都会触发一次独立函数调用，存在调用栈进出成本，无法被 JIT 直接消除。

七、总结与选型速查表

在实际编写代码时，可以依照以下速查表确定最佳方案：