理解 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. 获取数组中对象的属性：使用对象解构
如果你的数组中包含的是对象，并且你只想直接访问这些对象的特定属性，那么可以使用对象解构。
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还提供了其他几种迭代数组的方式，每种方式都有其适用场景和性能特点。
-
Array.prototype.forEach()： 这是一种常用的迭代方法，它接受一个回调函数，对数组中的每个元素执行一次。回调函数可以接收元素值、索引和原数组作为参数。
collection.forEach((item, index) => { console.log(`索引: ${index}, 值:`, item); });forEach在可读性方面表现良好，但无法使用break或continue中断循环。
-
传统 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) 提供了最简洁的语法。
理解这些差异有助于开发者在实际项目中做出明智的选择，兼顾代码的可读性、维护性与执行效率。
