本文旨在解决 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免费学习笔记（深入）”；
正确遍历数组的方法
使用 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 两个变量。
使用对象解构获取数组中对象的属性
如果数组中的元素是对象，并且你只想访问对象的特定属性，可以使用对象解构。
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 两个变量。
使用 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 } ...});
使用传统的 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 循环仍然是一种不错的选择。选择哪种方法取决于具体的需求和性能要求。
以上就是JavaScript 中 for…of 循环遍历数组的正确姿势的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518300.html
微信扫一扫 
支付宝扫一扫 
