JavaScript中使用扩展运算符复制数组后修改仍影响原数组的问题

为什么原数组会被修改？ #

[...users]这种展开语法做的是浅拷贝——它只会复制数组本身的结构，但数组里的元素是对象类型，拷贝的只是对象的引用，不是对象本身。也就是说，list里的每个元素和users里的对应元素指向的是同一个内存里的对象。

你在map里直接修改x.userName的时候，本质上是在修改那个共享的对象，所以原数组users里的对象自然也会跟着变。

怎么实现不影响原数组的修改？ #

要避免修改原数组，你需要在map的时候创建新的对象，而不是直接修改原对象的属性。可以用对象展开语法来生成新对象：

var users = [{userUID : '123', userName : 'TOTO'},{userUID : '345', userName : 'TITI'},{userUID : '678', userName : 'TATA'}]
// 直接在map里生成新对象，无需额外拷贝数组
var listModifie = users.map(x => {
  // 创建新对象，复制原对象所有属性后修改指定字段
  return {
    ...x,
    userName: x.userUID === '678' ? '' : x.userName
  }
})

console.log(users) // 原数组完全不受影响
console.log(listModifie) // 得到修改后的新数组

这样listModifie里的每个元素都是全新的对象，和原数组users里的对象没有引用关系，修改新对象就不会影响原数组了。

内容的提问来源于stack exchange，提问作者user10863293