JS数组遍历方法这么多，for/forEach/forof我该怎么选？

在 JavaScript 里，forEach、for 和 for...of 循环都能用来遍历数组，不过适用场景存在差异，下面为你详细分析：

1. for 循环

这是一种较为基础的循环结构，它的优势在于能够灵活控制循环的起始、结束条件以及步长。

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

适用场景 ：当你需要精确控制循环的索引，比如在循环中对索引进行一些运算，或者需要反向遍历数组时，for 循环是不错的选择。

2. forEach 方法

forEach 是数组的一个方法，它会为数组的每个元素执行一次提供的函数。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
    console.log(number);
});

适用场景 ：当你只需要对数组的每个元素执行相同的操作，且不需要中途跳出循环时，forEach 方法可以让代码更加简洁易读。不过，forEach 不能使用 break 或 continue 语句来控制循环流程。

3. for...of 循环

for...of 循环可以遍历可迭代对象，包括数组、字符串、Set、Map 等。

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
    console.log(number);
}

适用场景 ：当你只关心数组元素的值，而不关心索引，并且需要使用 break 或 continue 语句来控制循环流程时，for...of 循环是比较合适的选择。

总结

• 若要精确控制索引，或需要反向遍历数组，推荐使用 for 循环。
• 若仅需对数组元素执行相同操作，且无需中途跳出循环，使用 forEach 方法会让代码更简洁。
• 若只关注元素值，且需要使用 break 或 continue 控制循环，建议使用 for...of 循环。

如果都可以的场景，优先推荐哪一种?

在各种循环方式都适用的场景下，优先推荐使用 for...of 循环，以下是具体原因：

1. 代码简洁性与可读性

和传统的 for 循环相比，for...of 循环不需要手动管理索引变量，代码结构更加简洁。它能让阅读代码的人迅速理解你只是想逐个访问数组里的元素。例如：

const arr = [10, 20, 30];

// 使用 for...of 循环
for (const num of arr) {
    console.log(num);
}

// 使用传统 for 循环
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

可以看到，for...of 循环的代码更加简洁直观。

2. 灵活性

for...of 循环允许使用 break、continue 语句，这使得在循环过程中可以根据特定条件灵活控制循环流程，而 forEach 方法无法使用这些语句。例如，当遇到特定元素时跳出循环：

const arr = [10, 20, 30, 40, 50];
for (const num of arr) {
    if (num === 30) {
        break;
    }
    console.log(num);
}

3. 可迭代对象的通用性

for...of 循环不仅能用于数组，还能用于其他可迭代对象，像字符串、Set、Map 等。这意味着在处理不同类型的可迭代数据时，你可以使用统一的循环方式。例如：

// 遍历字符串
const str = 'hello';
for (const char of str) {
    console.log(char);
}

// 遍历 Set
const set = new Set([1, 2, 3]);
for (const value of set) {
    console.log(value);
}

4. 性能表现

在大多数情况下，for...of 循环的性能和传统 for 循环相近，而且比 forEach 方法更好，因为 forEach 方法在调用回调函数时会有额外的函数调用开销。

综上所述，在各种循环方式都适用的场景下，for...of 循环是一个更优的选择。

什么！你用map或reduce？