相同点:
- 都是循环遍历数组中的每一项
- forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item(当前每一项),index(索引值),arr(原数组)
- 匿名函数中的this都是指向window
- 只能遍历数组
区别:
map
1.map方法支持return返回值,通过return可返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
2…map()要比.forEach()执行速度更快。但是他们都比for()要更好用
3.map因为返回数组所以可以链式操作
4.对于是否会改变原数组
1)、当数组的值为基本类型的时候,map遍历数组,当对数组中的值做处理的时候,的确不会改变原数组。
let a = [1,2,3]
b=a.map(item => {
return item = item+1
})
console.log(a) // [1,2,3]
console.log(b) // [2,3,4]
2)、当数组是一个对象数组的时候,我们发现,map遍历数组,通过打印发现原数组发生改变了
var array=[
{
name:'小明',
age:14
},
{
name:'小红',
age:18
}
];
var newArray=array.map(function(item,index){
return Object.assign(item,{index:index});
});
console.log(array,newArray);
为了不让map改变对象数组这样的原数组,我们可以这样写。
var newArray=array.map(function(item,index){
let obj={...item}
obj.index=index;
return obj;
});
原因:
我们对对象数组中的item值,通过扩展运算符…深拷贝
给obj,不在原数组中直接操作item的值,而是操作obj中值,这样原数组就不会改变了。
注意:扩展运算符只对对象的第一层
是深拷贝!!!所以当有人问你,扩展运算符是深拷贝还是浅拷贝的时候,应该分情况回答。这里不作详细解释。
forEach
1.forEach方法用来调用数组的每个元素,将元素传给回调函数
2.forEach对于空数组是不会调用回调函数的。
3.forEach会改变原数组
var newArray2=array.forEach(function(item,index){
console.log(item);
return Object.assign(item,{index:index});
})
console.log(array,newArray2);//undefined
无论arr是不是空数组,forEach返回的都是undefined。这个方法只是将数组中的每一项作为callback的参数执行一次。