当前位置：首页 > 文章列表 > 文章 > 前端 > for...of循环遍历数组的使用方法

for...of循环遍历数组的使用方法

2025-09-18 16:56:08 0浏览收藏

**掌握 JavaScript 数组迭代：for...of 循环的正确用法与性能优化** 本文深入解析 JavaScript 中 `for...of` 循环在数组迭代中的应用，重点强调其用于遍历可迭代对象的值，而非键值对。当需要同时获取数组的索引和值时，推荐使用 `Array.entries()` 方法。文章对比了 `for` 循环、`forEach()`、`for...of` 以及 `Array.entries()` 结合 `for...of` 等多种迭代方式的性能差异，并提供了最佳实践建议，旨在帮助开发者根据实际需求选择最合适的数组迭代方案，从而提升代码效率和可读性。了解 `for...of` 循环的特性，避免性能陷阱，让你的 JavaScript 代码更上一层楼。

JavaScript 中 for...of 循环迭代数组的正确方式

本文旨在阐述 JavaScript 中 for...of 循环与数组迭代的正确用法。for...of 循环用于迭代可迭代对象的值，而非键值对。当需要同时访问数组的索引和值时，应使用 Array.entries() 方法。此外，本文还将比较不同迭代方式的性能差异，并提供最佳实践建议，帮助开发者选择合适的数组迭代方法。

理解 for...of 循环

for...of 循环是 ES6 引入的一种新的迭代语句，它用于遍历可迭代对象，如数组、字符串、Map、Set 等。与 for...in 循环不同，for...of 循环迭代的是对象的值，而不是键或索引。

例如，以下代码展示了如何使用 for...of 循环遍历一个数组：

const myArray = ['a', 'b', 'c'];

for (const element of myArray) {
  console.log(element); // 输出 'a', 'b', 'c'
}

使用 Array.entries() 获取索引和值

如果需要在 for...of 循环中同时访问数组的索引和值，可以使用 Array.entries() 方法。Array.entries() 方法返回一个迭代器，该迭代器生成数组中每个元素的 [index, value] 对。

const myArray = ['a', 'b', 'c'];

for (const [index, value] of myArray.entries()) {
  console.log(`Index: ${index}, Value: ${value}`);
  // 输出：
  // Index: 0, Value: a
  // Index: 1, Value: b
  // Index: 2, Value: c
}

对象解构简化代码

如果数组中的元素是对象，并且只需要访问对象的特定属性，可以使用对象解构来简化代码：

const collection = [
  { name: 'music', views: 20 },
  { name: 'abc', views: 32 },
  { name: 'bob', views: 20 }
];

for (const { name, views } of collection) {
  console.log(`Name: ${name}, Views: ${views}`);
  // 输出：
  // Name: music, Views: 20
  // Name: abc, Views: 32
  // Name: bob, Views: 20
}

性能考量

虽然 Array.entries() 方法方便易用，但在性能方面可能不是最优选择。根据一些基准测试，使用 Array.entries() 的迭代速度可能比 forEach() 循环或传统的 for 循环慢。

以下是一些常见的数组迭代方式及其性能比较：

for 循环: 这是最传统的迭代方式，通常也是性能最高的。

const arr = new Array(10000000).fill(0);
for (let i = 0; i < arr.length; i++) {
  // ...
}

forEach() 循环: forEach() 循环是 ES5 引入的，语法简洁，但性能略低于 for 循环。
```
const arr = new Array(10000000).fill(0);
arr.forEach((element, index) => {
  // ...
});
```

for...of 循环: for...of 循环的性能与 forEach() 循环相当。

const arr = new Array(10000000).fill(0);
for (const element of arr) {
  // ...
}

Array.entries() 和 for...of 循环: 这种方式通常是最慢的，因为它涉及到创建迭代器对象。
```
const arr = new Array(10000000).fill(0);
for (const [index, value] of arr.entries()) {
  // ...
}
```

总结:

在选择数组迭代方式时，需要根据具体的需求和性能要求进行权衡。