循环（for、forEach、map)区别、性能_map和for循环的区别-CSDN博客

本文链接：https://blog.csdn.net/xbczrz/article/details/123069801

本文探讨了JavaScript中for、forEach和map循环的区别，包括它们的相似点和不同点，并分析了它们的性能差异。for循环在固定长度时效率最高，而forEach和map提供便利但牺牲了性能，特别是map因创建新数组导致性能较低。这些方法的设计旨在应对不同场景，如不确定长度的数组或作用域数据管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

for 与 forEach、map的区别

在固定长度或者长度不需要计算的时候for循环效率高于foreach和map，for循环中可以通过break终止。
在不确定长度或者计算长度有损性能的时候用foreach和map比较方便

forEach、map的区别

相同点：

都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项），index（索引值），arr（原数组）
匿名函数中的this都是指向window
只能遍历数组
都不会改变原数组

不同点：

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
forEach方法不会返回新数组

性能：

for > forEach > map
for 循环当然是最简单的，因为它没有任何额外的函数调用栈和上下文
forEach 其次，因为它其实比我们想象得要复杂一些。它不是普通的 for 循环的语法糖，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能；
map 最慢，因为它的返回值是一个等长的全新的数组，数组创建和赋值产生的性能开销很大。

为什么map和forEach性能没有for好，要在ES5时设计出这两个方法

在不确定长度或者计算长度有损性能时可以使用
作用域保存数据的问题
例：

<input type="button" value="a" />
<input type="button" value="b" />
<input type="button" value="c" />
<script>
var arr=document.getElementsByTagName("input"), i=0, len=arr.length;
for( ; i<len; i++ ){
arr[i].onclick = function(){
alert( i );
}
}
</script>
//答案实际上是2，原因是i是全局变量，根据代码的执行顺序，当点击按钮的时候，for循环早就执行完了，那么i就是2