当前位置：首页 > 全部内容 > JavaScript数组遍历的四种方式：for、for-in、forEach与for-of详解

JavaScript数组遍历的四种方式：for、for-in、forEach与for-of详解

作者：半夏时间：2026-10-24 07:33:06浏览：110

本文深入对比JavaScript中遍历数组的四种主要方式：传统for循环、for-in循环、Array.prototype.forEach()以及ES6引入的for-of循环。文章详细分析了各方法的语法特性、优缺点及适用场景，指出for-of在可读性、异步支持和中断控制方面的优势，并探讨了forEach的中断替代方案及entries()方法的使用。

本文对JavaScript中遍历数组的四种常见方式进行比较与总结。

第一种方式是传统的for循环。


for (let index=0; index < someArray.length; index++) {
 const elem = someArray[index];
 // ···
}

第二种方式是for-in循环。


for (const key in someArray) {
 console.log(key);
}

第三种方式是数组内置的.forEach()方法。


someArray.forEach((elem, index) => {
 console.log(elem, index);
});

第四种方式是ES6引入的for-of循环。


for (const elem of someArray) {
 console.log(elem);
}

通常情况下，for-of是遍历数组的最佳选择，下文将阐述具体原因。

for循环 [ES1]

JavaScript中的for循环历史最为悠久，早在ECMAScript 1规范中就已存在。该循环通过记录数组arr中每个元素的索引和值来进行遍历：


const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (let index=0; index < arr.length; index++) {
 const elem = arr[index];
 console.log(index, elem);
}

// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'

for循环的优缺点是什么？

  • 它的适用范围非常广泛，但在处理数组遍历时显得较为繁琐。
  • 如果不需要从数组的第一个元素开始循环，for循环依然非常有用，而其他循环机制实现这一需求则较为困难。

for-in循环 [ES1]

for-in循环与for循环同样古老，在ECMAScript 1中就已存在。以下代码展示了使用for-in循环输出数组arr的键（key）：


const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const key in arr) {
 console.log(key);
}

// Output:
// '0'
// '1'
// '2'
// 'prop'

for-in并不是遍历数组的理想方法，原因如下：

  • 它访问的是属性键，而非属性值。
  • 作为属性键，数组元素的索引是字符串类型，而非数字类型。
  • 它会访问所有可枚举的属性键（包括自身属性和继承属性），而不仅仅是Array元素本身的属性。

for-in访问继承属性的实际应用场景是：遍历对象的所有可枚举属性。

数组方法.forEach()[ES5]

鉴于for和for-in都不太适合直接用于数组遍历，ECMAScript 5引入了一个辅助方法：Array.prototype.forEach()：


const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

arr.forEach((elem, index) => {
 console.log(elem, index);
});

// Output:
// 'a', 0
// 'b', 1
// 'c', 2

这种方法确实提供了便利，使我们无需执行大量操作即可访问数组元素和索引。若结合ES6引入的箭头函数，语法上会更加简洁优雅。

.forEach()的主要缺点在于：

  • 无法在循环体内部使用await关键字。
  • 无法提前退出.forEach()循环。相比之下，在for循环中可以使用break语句实现提前退出。

中止.forEach()的解决方法

若希望中止类似.forEach()的循环，存在一种变通方案：.some()方法同样会遍历所有数组元素，但当其回调函数返回真值时停止遍历。


const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
 if (index >= 2) {
 return true; // 中止循环
 }
 console.log(elem);
 //此回调隐式返回 `undefined`，这
 //是一个伪值。 因此，循环继续。
});

// Output:
// 'red'
// 'green'

这种做法可以说是对.some()的滥用，与使用for-of配合break语句相比，理解这段代码的难度较大。

for-of循环 [ES6]

for-of循环从ECMAScript 6开始得到支持：


const arr = ['a', 'b', 'c'];
arr.prop = 'property value';

for (const elem of arr) {
 console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'

在遍历数组时，for-of表现出极高的效率：

用于直接遍历数组元素。

支持在循环中使用await。

  • 如有需要，可以轻松地迁移至for-await-of语法。

甚至可以在外部作用域中灵活使用break和continue语句。

for-of和可迭代对象

for-of不仅能遍历数组，还能遍历其他可迭代对象，例如遍历Map：


const myMap = new Map()
 .set(false, 'no')
 .set(true, 'yes')
;
for (const [key, value] of myMap) {
 console.log(key, value);
}

// Output:
// false, 'no'
// true, 'yes'

遍历myMap会生成[键，值]对，通过解构可以直接访问每一对数据。

for-of和数组索引

数组方法.entries()返回一个可迭代的[index，value]对。如果使用for-of并结合此方法进行解构，可以方便地访问数组索引：


const arr = ['chocolate', 'vanilla', 'strawberry'];

for (const [index, elem] of arr.entries()) {
 console.log(index, elem);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'

总结

for-of循环的可用性优于for、for-in和.forEach()。

通常这四种循环机制之间的性能差异可以忽略不计。如果涉及大量运算，建议切换到WebAssembly以获得更好的性能。

到此这篇关于JS中循环遍历数组的四种方式总结的文章就介绍到这了,更多相关JS循环遍历数组内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13

相关标签：

JavaScript数组遍历