JavaScript 中 for…of 循环迭代数组的正确方法

本文旨在阐明 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 循环。