应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点

Question

由于js中的数组是引用类型，所以可以利用类似指针的特性通过改变另一个变量去修改原始的值。我认为这其实是js中的缺陷，所以我不喜欢利用这个"缺陷"去实现一些功能，在最近的一次code review中，同事指出了这个问题。所以我希望有更多朋友能给我一些建议。

下面就是简单的例子。

let arr = [{
    a:1,
    b:2,
}, {
    a:3,
    b:4,
}];

如果有以上数组，我需要将每一项的a改为3。大概有两种写法，一种是用forEach，另一种是用map来返回一个新数组(暂不考虑for循环)。

forEach:

arr.forEach((item) => {
    item.a = 3; 
});

map:

arr = arr.map((item) => {   //  有同事指出应该声明一个新变量来存储map的结果，这个建议我认为是对的。
    item.a = 3;
    return item;
});

Answer 1

补充下，刚才没仔细看题目。题目的map方法不够“纯粹”，实际上还是直接修改了每个item的属性，要想不影响原有对象，应该这么写：

arr = arr.map((item) => {   //  有同事指出应该声明一个新变量来存储map的结果，这个建议我认为是对的。
    return {
        ...item,
        a:3
    }
});

==============

map方法体现的是数据不可变的思想。该思想认为所有的数据都是不能改变的，只能通过生成新的数据来达到修改的目的，因此直接对数组元素或对象属性进行操作的行为都是不可取的。这种思想其实有很多好处，最直接的就是避免了数据的隐式修改。immutable.js是实现数据不可变的一个库，可通过专属的API对引用类型进行操作，每次形成一个新的对象。

但具体到项目中还是要看团队的要求，都用或者都不用。单单局部使用是没有效果的。

如果使用了React + Redux 的技术栈，是比较推荐使用的

另外有一点，forEach和map还存在一个编程思想的区别，前者是命令式编程，后者是声明式编程，如果项目的风格是声明式的，比如React，那么后者显然更统一。

Answer 2

网络上找了一点儿关于这个的一些比较和介绍，希望对你有所帮助！

原生JS forEach()和map()遍历的异同点

共同点：

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

2、forEach()和map()里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。

3、匿名函数中的this都是指Window。

4、只能遍历数组。

1.forEach()

没有返回值

arr[].forEach(function(value,index,array){

　　//do something

})

参数：value数组中的当前项, index当前项的索引, array原始数组；
数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是可以自己通过数组的索引来修改原来的数组；

var ary = [12,23,24,42,1];  
var res = ary.forEach(function (item,index,input) {  
       input[index] = item*10;  
})  
console.log(res);//--> undefined;  
console.log(ary);//--> 通过数组索引改变了原数组；

2.map()

有返回值，可以return 出来。

arr[].map(function(value,index,array){

　　//do something

　　return XXX

})

参数：value数组中的当前项,index当前项的索引,array原始数组；

区别：map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；

var ary = [12,23,24,42,1];  
var res = ary.map(function (item,index,input) {  
    return item*10;  
})  
console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份，并进行了修改
console.log(ary);//-->[12,23,24,42,1]；  原数组并未发生变化

兼容写法：

不管是forEach还是map在IE6-8下都不兼容（不兼容的情况下在Array.prototype上没有这两个方法）,那么需要我们自己封装一个都兼容的方法，代码如下：

 
/** 
* forEach遍历数组 
* @param callback [function] 回调函数； 
* @param context [object] 上下文； 
*/  
Array.prototype.myForEach = function myForEach(callback,context){  
    context = context || window;  
    if('forEach' in Array.prototye) {  
        this.forEach(callback,context);  
        return;  
    }  
    //IE6-8下自己编写回调函数执行的逻辑  
    for(var i = 0,len = this.length; i < len;i++) {  
        callback && callback.call(context,this[i],i,this);  
    }  
}   
 
/** 
* map遍历数组 
* @param callback [function] 回调函数； 
* @param context [object] 上下文； 
*/  
Array.prototype.myMap = function myMap(callback,context){  
    context = context || window;  
    if('map' in Array.prototye) {  
        return this.map(callback,context);  
    }  
    //IE6-8下自己编写回调函数执行的逻辑  
    var newAry = [];  
    for(var i = 0,len = this.length; i < len;i++) {  
        if(typeof  callback === 'function') {  
            var val = callback.call(context,this[i],i,this);  
            newAry[newAry.length] = val;  
        }  
    }  
    return newAry;  
}