本文旨在阐明 JavaScript 中 for...of 循环与数组迭代的关系。重点解释了为什么直接对数组使用 for...of 循环无法同时获取索引和值，并提供了使用 Array.entries() 方法以及对象解构来实现所需功能的正确方法。同时，对不同迭代方式的性能进行了简要分析，以便开发者能够根据实际情况选择最优方案。
for...of 循环的基础
for...of 循环是 ES6 引入的一种新的迭代语句，用于遍历可迭代对象（iterable object），例如数组、字符串、Map、Set 等。它的主要作用是获取可迭代对象中的值，而不是键或索引。
例如，对于数组：
let myArray = ['a', 'b', 'c'];
for (const element of myArray) {
console.log(element); // 输出：a, b, c
}在这个例子中，for...of 循环直接遍历了 myArray 中的每个元素，并将它们依次赋值给 element 变量。
立即学习“Java免费学习笔记（深入）”；
为什么 for...of 不能直接获取索引？
for...of 循环的设计目标是简化值的迭代，而不是键值对的迭代。因此，它默认只提供值，不提供索引。尝试使用 for (const [k, v] of collection) 这样的语法直接获取索引和值，会导致 "TypeError: collection is not iterable" 错误，因为 collection 本身不是一个键值对的集合，而是一个值的集合。
如何使用 for...of 获取索引和值？
如果需要同时获取数组的索引和值，可以使用 Array.entries() 方法。Array.entries() 方法返回一个包含数组索引和值的迭代器。
let collection = [
{ name: 'music', views: 20 },
{ name: 'abc', views: 32 },
{ name: 'bob', views: 20 }
];
for (const [index, item] of collection.entries()) {
console.log(index, item); // 输出：0 { name: 'music', views: 20 }, 1 { name: 'abc', views: 32 }, 2 { name: 'bob', views: 20 }
}在这个例子中，collection.entries() 返回一个迭代器，每次迭代都会返回一个包含索引和值的数组。for...of 循环使用解构赋值将索引赋值给 index 变量，将值赋值给 item 变量。
对象解构的用法
如果只需要数组中对象的特定属性，可以使用对象解构：
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 和 views 属性的值分别赋值给对应的变量。
其他迭代方法
除了 for...of 循环，JavaScript 还提供了其他迭代数组的方法，例如 forEach 循环和传统的 for 循环。
-
forEach 循环:
collection.forEach((item, index) => { console.log(index, item); });forEach 循环提供索引和值作为回调函数的参数。
-
传统的 for 循环:
for (let i = 0; i < collection.length; i++) { console.log(i, collection[i]); }传统的 for 循环使用索引来访问数组元素。
性能考量
虽然 Array.entries() 方法可以方便地获取索引和值，但在处理大型数组时，其性能可能不如传统的 for 循环或 forEach 循环。根据一些测试结果，Array.entries() 的性能可能比 forEach 慢 1.5-2 倍，比传统的 for 循环慢 6 倍。
因此，在性能敏感的场景中，建议使用传统的 for 循环或 forEach 循环。
总结
for...of 循环是 JavaScript 中一种方便的迭代数组元素的方法。虽然它不能直接获取索引，但可以使用 Array.entries() 方法来同时获取索引和值。在选择迭代方法时，需要根据实际情况权衡代码的可读性和性能。如果需要同时获取索引和值，并且对性能要求不高，可以使用 Array.entries() 方法。如果对性能要求较高，建议使用传统的 for 循环或 forEach 循环。
