map和forEach的区别和用法

Posted 2023-04-29

参考技术A

相同：forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item-当前项，index当前项索引值，array原数组；
不同：
map
1.map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
2.map方法不会对空数组进行检测，若arr为空数组，则map方法返回的也是一个空数组，map方法不会改变原始数组。
3.浏览器支持：chrome、Safari1.5+、opera都支持，IE9+

运行结果

forEach
1.forEach方法用来调用数组的每个元素，将元素传给回调函数
2.forEach对于空数组是不会调用回调函数的,即没有返回值。

运行结果

性能上来说for>forEach>map

但是选用方法时不用太过考虑性能，一般简单遍历用forEach，对会产生有规律的变化的新数组时用map

JS中map()与forEach()的区别和用法

相同点：

1.都是循环遍历数组中的每一项

2.每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）

3.匿名函数中的this都是指向window

4.只能遍历数组

 

不同点：

map（）

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

也就是map（）进行处理之后返回一个新的数组

??注意：map（）方法不会对空数组进行检测

map方法不会改变原始数组

var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){
console.log(this); //Window
console.log(this);
console.log(item);
console.log(‘原数组arr：‘,arr); // 会执行五次
return item/2;},this);console.log(str); //[0,1,2,3,4]
forEach

 

forEach方法用于调用数组的每个元素，将元素传给回调函数

??注意： forEach对于空数组是不会调用回调函数的 ，

没有返回一个新数组&没有返回值

应用场景：为一些相同的元素，绑定事件处理器！

不可链式调用 

var arr = [0,2,4,6,8]

var sum =0;

var str = arr.forEach(item,index.arr){sum+= item;console.log("sum的值为：",sum);})