for...of循环遍历数组的正确用法

本篇文章给大家分享《for...of循环遍历数组的正确用法》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

本文旨在阐明 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 变量。

为什么 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 循环。

到这里，我们也就讲完了《for...of循环遍历数组的正确用法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！