JavaScript 中 for...of 循环迭代数组的正确姿势

本文旨在解决 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 循环迭代数组的方法：

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

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. 使用对象解构获取数组元素的属性

如果数组中的元素是对象，并且我们只需要访问对象的某些属性，可以使用对象解构来简化代码。

AssemblyAI

转录和理解语音的AI模型

65

查看详情

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 循环的工作原理，并掌握不同的迭代方法，我们可以更有效地处理数组数据。 在选择迭代方法时，需要综合考虑代码简洁性和性能因素，选择最适合的方案。

以上就是JavaScript 中 for...of 循环迭代数组的正确姿势的详细内容，更多请关注php中文网其它相关文章！