for...of遍历数组的正确用法详解

还在为 JavaScript 中 `for...of` 循环遍历数组时遇到的 "is not iterable" 错误而烦恼吗？本文将深入剖析 `for...of` 循环的工作原理，并提供多种**正确迭代数组的方法**，包括使用 `Array.entries()` 获取索引和值，以及对象解构获取数组元素的属性。针对不同迭代方式的**性能**进行简要分析，助你选择**最佳方案**。掌握 `for...of` 循环的正确使用，提升你的 JavaScript 编程效率！本文旨在帮助开发者更高效地处理数组数据，避免常见错误，编写更简洁、更高效的代码。

本文旨在解决 JavaScript 中使用 for...of 循环迭代数组时遇到的 "is not iterable" 错误。我们将深入探讨 for...of 循环的工作原理，并提供多种正确的迭代数组的方法，包括使用 Array.entries() 获取索引和值，以及对象解构获取数组元素的属性。同时，本文也会对不同迭代方式的性能进行简要分析，帮助开发者选择最适合的方案。

理解 for...of 循环

for...of 循环是 ES6 引入的一种新的循环语法，用于迭代可迭代对象（iterable objects），例如 Array、String、Map、Set、TypedArray、arguments 对象等等。 它的主要作用是直接访问可迭代对象中的值，而不是键或索引。

当我们尝试直接在数组上使用 for...of 循环，并期望同时获取键（索引）和值时，就会出现 "is not iterable" 错误。 这是因为 for...of 默认只迭代值，不提供键。

正确使用 for...of 迭代数组

以下是几种正确使用 for...of 循环迭代数组的方法：

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

Array.entries() 方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对。 我们可以使用 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); // 输出索引和对象
}

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); // 输出 name 和 views 属性
}

3. 使用传统的 for 循环

虽然 for...of 循环更简洁，但在某些情况下，传统的 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]); // 输出索引和对象
}

4. 使用 forEach 方法

forEach 方法是另一种迭代数组的常用方法。 它接受一个回调函数作为参数，该回调函数会被应用到数组中的每个元素。

let collection = [
    { name: 'music', views: 20 },
    { name: 'abc', views: 32 },
    { name: 'bob', views: 20 }
];

collection.forEach((item, index) => {
    console.log(index, item); // 输出索引和对象
});

性能考量

不同的迭代方法在性能上可能存在差异。 根据测试，传统的 for 循环通常是最快的，而使用 Array.entries() 可能会稍微慢一些。 forEach 和 for...of 在性能上比较接近，但通常略逊于传统的 for 循环。

因此，在选择迭代方法时，需要根据实际情况进行权衡。 如果性能是关键因素，建议使用传统的 for 循环。 如果代码简洁性更重要，可以选择 forEach 或 for...of 循环。

总结

for...of 循环是 JavaScript 中一种强大的迭代工具，但需要正确使用才能避免错误。 通过理解 for...of 循环的工作原理，并掌握不同的迭代方法，我们可以更有效地处理数组数据。 在选择迭代方法时，需要综合考虑代码简洁性和性能因素，选择最适合的方案。

好了，本文到此结束，带大家了解了《for...of遍历数组的正确用法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！