JavaScript 中 for...of 循环迭代数组的正确方式-js教程-PHP中文网

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

霞舞

发布： 2025-08-29 20:42:02

原创

330人浏览过

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] 对。

立即学习“Java免费学习笔记（深入）”；

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 循环慢。

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

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

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()) {
  // ...
}
```
登录后复制