优化 JavaScript 循环：除了 for，还有这些更快的选择

循环是我们处理JavaScript数据集合的基本工具。虽然传统的 for 循环已经为我们服务多年，但现代 JavaScript 提供了更多高效、可读性更强的选择。分享一些替代方案，以及它们在性能和可读性方面的优势。

一、传统的 for 循环

首先，让我们回顾一下标准的 for 循环：

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

虽然这种方式熟悉且直观，但它有一些缺点：需要手动管理索引变量，容易出现边界错误，代码可读性不够优雅。

二、for…of 循环

ES6 引入的 for...of 循环提供了一种更简洁的遍历数组元素的方式：

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

优势：

• 语法更简洁，不需要管理索引
• 可以遍历任何可迭代对象（数组、字符串、Map、Set等）
• 避免了常见的边界错误

三、forEach 方法

数组的 forEach 方法提供了函数式编程风格的迭代方式：

优势：

• 函数式风格，更加声明式
• 无需管理循环状态
• 可以访问当前元素、索引和原数组

注意: forEach 不能使用 break 或 continue 语句中断循环，且不能直接返回值。

四、map、filter 和 reduce

这些高阶函数不仅仅是循环，更是数据转换的强大工具：

优势：

• 代码更具表达力，直接表明意图
• 链式调用可以创建复杂的数据处理管道
• 不可变操作，原数组不会被修改

五、性能优化技巧

除了选择合适的循环方式，还有一些通用的性能优化技巧：

1. 缓存数组长度

在传统 for 循环中，缓存数组长度可以避免每次迭代都计算长度：

2. 避免在循环中修改数组

在循环中修改正在遍历的数组会导致不可预测的结果：

3. 使用 for…in 遍历对象

对于对象属性的遍历，for...in 是合适的选择：

注意：ES2022 提供了 Object.hasOwn(obj, prop) 作为更现代的替代 hasOwnProperty。

4. 使用 Array.from 和第二个参数

Array.from 可以同时进行映射操作，避免额外的循环：

// 不推荐
const mapped = Array.from(someIterable).map(x => x * 2);

// 推荐: 一次性完成转换和映射
const mapped = Array.from(someIterable, x => x * 2);
1.
2.
3.
4.
5.