本文旨在阐述 JavaScript 中 for…of 循环与数组迭代的正确用法。for…of 循环用于迭代可迭代对象的值，而非键值对。当需要同时访问数组的索引和值时，应使用 Array.entries() 方法。此外，本文还将比较不同迭代方式的性能差异，并提供最佳实践建议，帮助开发者选择合适的数组迭代方法。
理解 for…of 循环
for…of 循环是 es6 引入的一种新的迭代语句，它用于遍历可迭代对象，如数组、字符串、map、Set 等。与 for…in 循环不同，for…of 循环迭代的是对象的值，而不是键或索引。
例如，以下代码展示了如何使用 for…of 循环遍历一个数组：
const myArray = ['a', 'b', 'c']; for (const element of myArray) { console.log(element); // 输出 'a', 'b', 'c' }
使用 Array.entries() 获取索引和值
如果需要在 for…of 循环中同时访问数组的索引和值，可以使用 Array.entries() 方法。Array.entries() 方法返回一个迭代器，该迭代器生成数组中每个元素的 [index, value] 对。
立即学习“Java免费学习笔记（深入）”；
const myArray = ['a', 'b', 'c']; for (const [index, value] of myArray.entries()) { console.log(`Index: ${index}, Value: ${value}`); // 输出： // Index: 0, Value: a // Index: 1, Value: b // Index: 2, Value: c }
对象解构简化代码
如果数组中的元素是对象，并且只需要访问对象的特定属性，可以使用对象解构来简化代码：
const collection = [ { name: 'music', views: 20 }, { name: 'abc', views: 32 }, { name: 'bob', views: 20 } ]; for (const { name, views } of collection) { console.log(`Name: ${name}, Views: ${views}`); // 输出： // Name: music, Views: 20 // Name: abc, Views: 32 // Name: bob, Views: 20 }
性能考量
虽然 Array.entries() 方法方便易用，但在性能方面可能不是最优选择。根据一些基准测试，使用 Array.entries() 的迭代速度可能比 foreach() 循环或传统的 for 循环慢。
以下是一些常见的数组迭代方式及其性能比较：
-
for 循环: 这是最传统的迭代方式，通常也是性能最高的。
const arr = new Array(10000000).fill(0); for (let i = 0; i < arr.length; i++) { // ... } -
forEach() 循环: forEach() 循环是 ES5 引入的，语法简洁，但性能略低于 for 循环。
const arr = new Array(10000000).fill(0); arr.forEach((element, index) => { // ... }); -
for…of 循环: for…of 循环的性能与 forEach() 循环相当。
const arr = new Array(10000000).fill(0); for (const element of arr) { // ... } -
Array.entries() 和 for…of 循环: 这种方式通常是最慢的，因为它涉及到创建迭代器对象。
const arr = new Array(10000000).fill(0); for (const [index, value] of arr.entries()) { // ... }
总结:
在选择数组迭代方式时，需要根据具体的需求和性能要求进行权衡。
- 如果需要最高的性能，并且需要访问索引，请使用传统的 for 循环。
- 如果只需要访问值，并且对性能要求不高，可以使用 forEach() 或 for…of 循环。
- 如果需要在 for…of 循环中同时访问索引和值，可以使用 Array.entries() 方法，但要注意性能影响。
- 如果只需要访问数组元素对象的特定属性，可以使用对象解构来简化代码。
选择合适的迭代方式可以提高代码的可读性和性能。
