JavaScript 中 for 循环、for...of、forEach、map、filter 和 reduce 的性能比较

在 JavaScript 中，我们经常需要遍历数组或集合来执行某些操作。常用的遍历方式包括传统的 for 循环、for...of、forEach、map、filter 和 reduce。 虽然它们都能完成遍历，但在性能和使用场景方面存在显著差异。本文将对这些方法进行详细比较，并基于实际测试给出性能差异分析。

一、各遍历方式概述

1. for 循环

for (let i = 0; i < arr.length; i++) {
  // 操作 arr[i]
}

• 优势 ：性能极高、灵活、可中断（通过 break）。
• 缺点：语法相对冗长，可读性稍差。

2. for...of

for (const item of arr) {
  // 操作 item
}

• 优势：语法简洁，适合遍历可迭代对象。
• 缺点 ：无法访问索引，相对 for 略慢。

3. forEach

arr.forEach((item, index) => {
  // 操作 item
});

• 优势：函数式语法，简洁。
• 缺点 ：不可中断（不能用 break / return 终止外层循环），性能略差。

4. map

const newArr = arr.map(item => item * 2);

• 优势：返回一个新数组，语义清晰。
• 缺点：不适合只做副作用操作；每次都返回新数组，可能多余。

5. filter

const filtered = arr.filter(item => item > 10);

• 优势：用于筛选，代码可读性高。
• 缺点：只能做布尔判断；每次创建新数组。

6. reduce

const sum = arr.reduce((acc, item) => acc + item, 0);

• 优势：适合聚合、统计。
• 缺点：初学者阅读困难；过度使用可能导致可读性差。

二、性能对比（基准测试）

以遍历一个包含 1,000,000 个数字的数组为例，测试每种方法所需时间（单位：毫秒，浏览器环境 Chrome V8）：

方法	平均耗时（大约）
for	~6--12 ms
for...of	~10--18 ms
forEach	~15--25 ms
map	~18--28 ms
filter	~20--30 ms
reduce	~25--35 ms

📌 结论 ：性能从高到低依次为：for > for...of > forEach > map/filter > reduce。

三、性能差异背后的原因

1. 原始 for 循环 使用的是最低层的控制流语法，没有额外的函数调用、闭包等开销。
2. for...of 底层调用了迭代器接口（Symbol.iterator），引入了一些额外开销。
3. forEach/map/filter/reduce 都是函数式 API，需要回调函数，增加了闭包和函数调用栈的成本。
4. map/filter/reduce 会生成新数组或新值，对内存有额外消耗。

四、何时使用哪种？

需求场景	推荐方式
极致性能	for
简洁遍历，无需索引	for...of
函数式风格、无中断需求	forEach
需要映射生成新数组	map
需要条件筛选	filter
需要聚合计算	reduce

五、实用建议

• 追求性能 或在大数据量循环中 ，优先使用 for。
• 注重代码可读性和语义 ，推荐使用 map / filter / reduce。
• 避免在性能敏感场景中滥用函数式方法，尤其是 reduce，除非确实需要其表达力。

六、总结

虽然 for 循环性能最佳，但并不总是最合适的选择。理解每种方法的底层实现和适用场景，才能在实际开发中编写出既高效又优雅的代码。一般来说：

开发优先考虑可读性，关键路径优化性能。