关于forEach与map方法说明

        在开发过程中forEach和map都是常用的方法，你会发现通过map也能完成forEach的操作。然后大家可能有误解，都可以的话，那我为什么用forEach方法呢，直接用map方法不就行了么？下面我们一起学习一下。

一、forEach方法

forEach方法：用于数据for循环进行遍历。接收三个参数（数据中每个元素，下标，数据），单纯的更改item，不会更改源数据。

const arr=[1,2,3,4,5,6]
 arr.forEach((item,index,data) => {
    console.log(item,index,data);
});

二、map方法

map方法：用于映射一个新的数组，不更改源数据。

const arr=[1,2,3,4,5,6]
const newArr= arr.map((item,index,data) => {
    return item+1
});
console.log(newArr);

三、两者相同之处

都可以当做数组的遍历方式。这也是为啥要讲的原因，好多同学喜欢拿着map当forEach使用，虽然可能最后的结果是好的，但是这样写代码，是有问题的，不便于后面的维护，不符合语义化等。

模拟代码操作：

const arr=[1,2,3,4,5,6]
//通过forEach处理数据
arr.forEach((item,index,data)=>{
    arr[index]=item+1
})
//通过map处理数据
const newArr= arr.map((item,index,data) => {
    arr[index]=item+1
});
console.log(arr);

这样你会发现结果是一样的，我们都得到了想要的数据，但处理的逻辑是遍历数据而不是映射，所以应该使用forEach。

四、两者不同及区分场景

区别：1.返回值：forEach是没有返回值的，返回undefined。2.map会产生一个新数组。

场景：

forEach：用于遍历的数据处理，比如数据判断，当满足某个条件时，进行对应的逻辑。

const arr=[1,2,3,4,5,6]
//通过forEach处理数据
arr.forEach((item,index,data)=>{
    if(item===1){
        console.log('我是1');
    }
})

map：用于取出我们所需要的数据，映射出一个新数组，更改映射出来的数据，不会对原数组产生影响。

const arr=[{name:'张三',age:16},{name:'李四',age:18},{name:'王二',age:20}]
//通过map处理数据
const newArr= arr.map((item,index,data) => {
    return {
        name:item.name
    }
});
console.log(newArr);