JavaScript 中 for...of 循环遍历数组的正确姿势

本文旨在解决 JavaScript 中使用 for...of 循环遍历数组时遇到的 "is not iterable" 错误。我们将深入探讨 for...of 循环的工作原理，解释为何直接在数组上使用 for...of 循环可能导致错误，并提供多种正确的遍历数组的方法，包括使用 Array.entries() 获取索引和值，以及利用对象解构获取数组中对象的属性。同时，我们也会讨论不同遍历方式的性能差异，帮助开发者选择最适合的方案。

理解 for...of 循环

for...of 循环是 ES6 引入的一种新的循环语法，用于遍历可迭代对象（iterable objects）。可迭代对象是指实现了 Symbol.iterator 方法的对象，例如数组、字符串、Map、Set 等。for...of 循环每次迭代都会从可迭代对象中取出一个值，并将其赋值给循环变量。

问题所在

直接在数组上使用 for...of 循环，循环变量接收的是数组的元素值，而不是键值对。如果你尝试解构数组元素，期望得到键和值，就会出现 "is not iterable" 错误。这是因为数组元素本身不是一个可迭代对象。

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

正确遍历数组的方法

1. 使用 Array.entries() 获取索引和值

   Array.entries() 方法返回一个包含数组索引和值的迭代器。我们可以使用 for...of 循环遍历这个迭代器，并使用数组解构来获取索引和值。

   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 } ...
   }

   在这个例子中，collection.entries() 返回一个迭代器，每次迭代返回一个包含索引和值的数组。for...of 循环将这个数组解构为 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 ...
   }

   在这个例子中，for...of 循环遍历 collection 数组，每次迭代将数组元素（一个对象）解构为 name 和 views 两个变量。

3. 使用 forEach 方法

   forEach 方法是数组的一个内置方法，它接受一个回调函数作为参数，并对数组中的每个元素执行该回调函数。回调函数可以接收三个参数：元素值、索引和数组本身。

   let collection = [
       { name: 'music', views: 20 },
       { name: 'abc', views: 32 },
       { name: 'bob', views: 20 }
   ];
   
   collection.forEach((item, index) => {
       console.log(index, item); // 输出：0 { name: 'music', views: 20 } ...
   });

4. 使用传统的 for 循环

   传统的 for 循环仍然是一种有效的遍历数组的方式，尤其是在需要高性能的场景下。

   let collection = [
       { name: 'music', views: 20 },
       { name: 'abc', views: 32 },
       { name: 'bob', views: 20 }
   ];
   
   for (let i = 0; i < collection.length; i++) {
       console.log(i, collection[i]); // 输出：0 { name: 'music', views: 20 } ...
   }

性能考量

虽然 for...of 循环和 forEach 方法在语法上更简洁，但在处理大型数组时，传统的 for 循环通常具有更好的性能。这是因为 for...of 循环和 forEach 方法需要在每次迭代时调用函数，而传统的 for 循环可以直接访问数组元素。

根据一些基准测试，使用 Array.entries() 等迭代器的方式通常比 forEach 和 for...of 循环慢，而传统的 for 循环是最快的。

总结

在 JavaScript 中，使用 for...of 循环遍历数组时，需要注意循环变量接收的是数组元素的值，而不是键值对。如果需要访问数组的索引和值，可以使用 Array.entries() 方法。如果只需要访问数组中对象的特定属性，可以使用对象解构。在性能敏感的场景下，传统的 for 循环仍然是一种不错的选择。选择哪种方法取决于具体的需求和性能要求。