JavaScript for...of循环与数组解构：深度解析与性能考量

理解 for...of 循环与解构赋值的原理

在javascript中，for...of循环旨在迭代可迭代对象的值。当应用于一个数组时，它会依次取出数组中的每个元素。例如，对于一个包含对象的数组：

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

for (const item of collection) {
  console.log(item);
}
// 输出:
// { name: 'music', views: 20 }
// { name: 'abc', views: 32 }
// { name: 'bob', views: 20 }

此时，item变量在每次迭代中都会接收到一个数组元素（即一个对象）。

问题出现在尝试对这些对象进行数组解构时：

for (const [k, v] of collection) { // 错误！
  console.log(k, v);
}

这里，for...of循环将collection中的第一个元素{ name: 'music', views: 20 }赋值给[k, v]。然而，{ name: 'music', views: 20 }是一个普通对象，它本身并不是一个可迭代的数组结构，因此无法被解构为[k, v]这种数组形式，从而导致TypeError: ... is not iterable的错误。尽管collection本身是一个数组且可迭代，但其内部的元素在尝试进行数组解构时却不满足条件。

正确的迭代与解构方式

针对不同的需求，有以下两种主要且正确的for...of解构方式：

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

1. 获取数组索引和值：使用 Array.prototype.entries()

如果你需要同时获取数组元素的索引和值，Array.prototype.entries()方法是理想的选择。它返回一个迭代器，该迭代器每次生成一个[索引, 值]的数组。

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

// 使用 Array.prototype.entries() 获取索引和值
for (const [index, item] of collection.entries()) {
  console.log(`索引: ${index}, 值:`, item);
  // 如果需要，可以进一步解构 item
  // const { name, views } = item;
  // console.log(`  名称: ${name}, 浏览量: ${views}`);
}
// 输出:
// 索引: 0, 值: { name: 'music', views: 20 }
// 索引: 1, 值: { name: 'abc', views: 32 }
// 索引: 2, 值: { name: 'bob', views: 20 }

在这个例子中，collection.entries()返回的是一个迭代器，每次迭代会产生一个形如[0, {name: 'music', views: 20}]的数组，这个数组可以被[index, item]正确地解构。

2. 获取数组中对象的属性：使用对象解构

如果你的数组中包含的是对象，并且你只想直接访问这些对象的特定属性，那么可以使用对象解构。

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

67

查看详情

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

// 直接对数组中的对象进行对象解构
for (const {
    name,
    views
  } of collection) {
  console.log(`名称: ${name}, 浏览量: ${views}`);
}
// 输出:
// 名称: music, 浏览量: 20
// 名称: abc, 浏览量: 32
// 名称: bob, 浏览量: 20

这里，for...of循环每次迭代取出collection中的一个对象（例如{ name: 'music', views: 20 }），然后这个对象被{ name, views }这个对象解构模式正确地处理，提取出name和views属性。

其他迭代方式及性能考量

除了for...of循环，JavaScript还提供了其他几种迭代数组的方式，每种方式都有其适用场景和性能特点。

1. Array.prototype.forEach()： 这是一种常用的迭代方法，它接受一个回调函数，对数组中的每个元素执行一次。回调函数可以接收元素值、索引和原数组作为参数。

   collection.forEach((item, index) => {
     console.log(`索引: ${index}, 值:`, item);
   });

   登录后复制

   forEach在可读性方面表现良好，但无法使用break或continue中断循环。

2. 传统 for 循环： 这是最基础也是通常情况下性能最高的迭代方式。

   for (let i = 0; i < collection.length; i++) {
     console.log(`索引: ${i}, 值:`, collection[i]);
   }

   登录后复制

   传统for循环提供了最大的控制权，可以随时中断或跳过迭代。

性能对比

在处理大型数组时，不同迭代方式的性能差异会变得显著。根据基准测试结果（例如在Chrome浏览器中对千万级数组的测试），大致的性能顺序如下：

• 最快： 传统 for (let i = 0; i < arr.length; i++) 循环。
• 次之： Array.prototype.forEach() 和直接的 for...of 循环（不带entries()）。这两种方式在实现上通常非常接近，性能也相当。
• 较慢： 使用 for (const [index, item] of collection.entries()) 方式。entries()方法需要创建并返回一个迭代器，这会带来额外的开销，导致其性能通常比前两者慢1.5到2倍。

总结：

• 如果对性能有极致要求，并且需要索引，请优先考虑传统 for 循环。
• 如果仅需遍历数组元素值，且不需要中断循环，forEach() 或 直接 for...of 是简洁且高效的选择。
• 如果需要同时获取元素的索引和值，且代码可读性优先于微小性能差异，for (const [index, item] of collection.entries()) 是一个清晰的解决方案，但需注意其相对较低的性能。
• 当数组中包含对象，并且你只想访问对象的特定属性时，for (const { prop1, prop2 } of collection) 提供了最简洁的语法。

理解这些差异有助于开发者在实际项目中做出明智的选择，兼顾代码的可读性、维护性与执行效率。

以上就是JavaScript for...of循环与数组解构：深度解析与性能考量的详细内容，更多请关注php中文网其它相关文章！