JavaScript中map和each对数组元素的影响

一、数组元素为【值类型的元素】，使用map不对原数组造成影响。

const arrData = [1,2];
const new_arrData = arrData.map(item=>{
    item = ++item;
    return item;
})
console.log("arrData:");
console.log(arrData)
//输出：[ 1, 2 ] 原数组元素没有变化
console.log("new_arrData:");
console.log(new_arrData);
//输出：[ 2, 3 ] 新数组是在原数组复制一个新的数组。

二、数组元素为【引用类型的元素，object】，使用map处理将对原数组产生影响

const arrData = [{a:1,b:2}];
const new_arrData = arrData.map(item=>{
    item.a = 10;
    item.b = 20;
    return item;
})
console.log("arrData:");
console.log(arrData)
//[ { a: 10, b: 20 } ] 对原数组产生了变化
console.log("new_arrData:");
console.log(new_arrData);
//[ { a: 10, b: 20 } ] 新数组是变化之后的

三、数组元素为【值类型的元素】，forEach处理将对原数组产生影响

const arrData = [1,2];
const new_arrData = [];
arrData.forEach(item=>{
    item = ++item;
    new_arrData.push(item);
})
console.log("arrData:");
console.log(arrData)
//输出：[ 1, 2 ]  
console.log("new_arrData:");
console.log(new_arrData);
//输出：[ 2, 3 ] 

 

四、数组元素为【引用类型的元素，object】，forEach处理将对原数组产生影响

const arrData = [{a:1,b:2}];
const new_arrData = [];
arrData.forEach(item=>{
    item.a = 10;
    item.b = 20;
    new_arrData.push(item);
})
console.log("arrData:");
console.log(arrData)
//[ { a: 10, b: 20 } ] 对原数组产生了变化
console.log("new_arrData:");
console.log(new_arrData);
//[ { a: 10, b: 20 } ] 新数组是变化之后的

最后总结：

使用map和forEach是否对原数组产生影响的主要因素在于，原数组中的元素是值类型，还是引用类型的。如果是值类型则不影响原数组元素，否则影响。

在开发过程中经常遇到这个问题。

如果数组的元素是对象的话，那么循环就会对原始元素产生影响，解决的办法就是：循环的过程中复制个新的出来，然后对新的进行操作。

 

const arrData = [{a:1,b:2}];
const new_arrData = [];
arrData.forEach(item=>{
    //建立一个复制品
    const _item = Object.assign({},item);
    _item.a = 10;
    _item.b = 20;
    new_arrData.push(_item);
})
console.log("arrData:");
console.log(arrData)
//[ { a: 1, b: 2 } ] 原数组不变化
console.log("new_arrData:");
console.log(new_arrData);
//[ { a: 10, b: 20 } ] 新数组是变化之后的