JavaScript遍历数组读取所有元素的常用方法

作者：木棉

时间：2026-10-30

全面解析 JavaScript 中遍历数组读取所有元素的常用方法，包含标准 for 循环、for...of、forEach 的用法对比、注意事项与选型决策指南。

文章目录

在 JavaScript 开发中，数组是最基础且高频使用的数据结构之一。遍历数组并逐一读取所有元素，可以通过传统循环控制、现代迭代器语法以及高阶函数三种路径来实现。本文将系统拆解每种常用方法的语法特征、执行机制、中断控制与适用场景，帮助你在实际编码中做出最清晰、最高效的选择。

一、数组遍历的基本执行机制

JavaScript 数组本质上是一种以非负整数作为键名的特殊对象，具有由 length 属性维护的有序序列结构。遍历数组读取元素的过程，就是从第一个有效位置（通常为索引 0）开始，按照确定顺序依次访问每个元素，直到最后一个有效位置（索引 length - 1）为止。

理解这个底层流转过程，有助于我们在面对不同规模的数据集或异步控制逻辑时，准确评估每种遍历方式带来的性能开销与运行特征。

图 1：数组循环读取的生命周期与核心流转步骤

二、常用遍历方法详解与示例

1. 标准 for 循环：最基础且控制力最强的索引遍历

标准 for 循环直接操作数字索引，拥有对循环计数器、步长、边界条件以及中断行为的最高控制权。

// 示例：标准 for 循环读取数组
const skills = ['JavaScript', 'TypeScript', 'Node.js', 'React'];

for (let i = 0; i < skills.length; i++) {
  const item = skills[i];
  console.log(`索引: ${i}, 元素值: ${item}`);
  
  // 支持提前跳出循环
  if (item === 'Node.js') {
    console.log('遇到目标元素，提前结束遍历');
    break;
  }
}

注意事项： 在超大规模数组遍历中，可在初始化时缓存 len = skills.length，避免每次循环条件判断时重复访问属性。同时，标准 for 循环完全支持 break、continue 以及顶层函数的 return。

2. for...of 循环：现代 JavaScript 最推荐的值遍历语法

ES6 引入的 for...of 语句基于可迭代协议（Iterable Protocol），专门用于遍历具有迭代器接口的数据结构。针对数组，它直接产出具体的元素值，无需手动维护索引计数器。

// 示例：for...of 循环读取元素
const frameworks = ['Vue', 'React', 'Angular', 'Svelte'];

for (const framework of frameworks) {
  console.log('当前框架:', framework);
  
  // 同样完全支持 break 与 continue
  if (framework === 'React') {
    break;
  }
}

// 若同时需要读取索引，可配合 entries() 展开解构
for (const [index, framework] of frameworks.entries()) {
  console.log(`第 ${index + 1} 个框架是: ${framework}`);
}

for...of 语法简洁清晰，杜绝了由于索引越界或自增遗漏引发的边界错误，是日常业务开发中读取数组元素的首选结构。

3. Array.prototype.forEach()：简洁直观的函数式遍历

forEach 是数组原型上的内置高阶方法。它接收一个回调函数，数组会自动将每个元素、对应索引以及原数组本身作为参数传递给回调函数。

// 示例：forEach 遍历
const ports = [3000, 8080, 8000, 5173];

ports.forEach((port, index) => {
  console.log(`Port ${index}: ${port}`);
});

关键限制： forEach 的执行机制是将回调压入执行栈，在普通语法层面上不支持通过 break 或 continue 提前终止或跳过迭代；使用 return 只相当于在当前单次回调中提前返回，下一项仍会继续执行。如果必须中断，需要抛出异常，但这并不符合标准编码习惯。

4. for...in 循环的陷阱：为何通常不建议用来遍历数组

虽然 for...in 能够运行在数组上，但它的设计初衷是遍历对象的非 Symbol 可枚举属性键名。在数组上使用 for...in 会带来三个隐患：

键名类型为字符串： 输出的索引 '0'、'1' 为 String 类型，参与加法运算时容易造成隐式字符串拼接错误（如 '0' + 1 = '01'）。
遍历原型链拓展属性： 若任何第三方库或自定义代码在 Array.prototype 上挂载了自定义方法或属性，for...in 会一并遍历出来。
遍历顺序不保证： 规范并未强制规定属性遍历的严格数字升序，在稀疏数组上表现不可预期。

图 2：常用遍历方法的底层调用与控制流差异

三、关键维度对比与特性总结

在实际项目中，我们不仅关心如何读取出值，更要结合控制流中断、异步等待（async/await）、访问索引便捷度等实际编码需求综合判定。

遍历方式	读取值语法	索引获取	中途中断 (break)	异步等待 (await)	推荐指数与场景
for 循环	`arr[i]`	手动维护 `i`	支持	支持顺序等待	★★★★☆ 性能极致、复杂步长
for...of	直接获取变量	`arr.entries()`	支持	支持顺序等待	★★★★★ 业务读取元素首选
forEach	回调参数 `item`	回调参数 `index`	不支持	并发执行 (非顺序)	★★★★☆ 简单无中断的副作用操作
for...in	`arr[key]`	属性名 (字符串)	支持	支持	★☆☆☆☆ 不推荐用于普通数组

图 3：常用遍历方式的控制能力与安全矩阵

四、实际开发中的方法选型决策指南

面对具体业务场景，选择哪一种遍历方法并不应该仅凭个人习惯，而应遵循明确的工程逻辑：

是否需要从旧数组生成新数组？ 如果目标是生成新数组，应当优先选用专门的内置方法（如 map 转换、filter 过滤），而非使用命令式遍历去手动往空数组中 push。
是否需要中途提前跳出？ 若存在找到符合条件的元素即终止后续处理的需求，务必使用 for...of 或标准 for，以节省无谓的遍历计算。
是否存在串行异步请求？ 当遍历数组依次触发网络请求，且前一个请求必须完成后才执行下一个请求时，只有 for...of 或标准 for 配合 await 才能维持正确的串行等待。
纯粹读取全部元素并执行副作用： 无需中断、无复杂异步，希望代码行数尽量精简时，forEach 或 for...of 都是标准实现。

图 4：数组遍历方法的技术选型与分流流程

五、总结

遍历并读取数组元素是前端与服务端 JavaScript 的基本功。现代开发中，for...of 是兼顾代码可读性、控制流中断与异步安全的最通用选择；当专注于简洁的纯函数式回调时，forEach 能提供紧凑的语法；而在需要精细控制计数器步长、执行倒序扫描或追求极值性能的底层场景下，标准 for 循环依然是不可替代的基石。在绝大多数常规业务中，应避免在数组上滥用 for...in，以保障数据类型的纯粹与程序运行的确定性。