使用slice拷贝数组后修改拷贝仍同步改变原数组问题咨询

问题原因 #

你使用的slice()仅能实现浅拷贝：当前数组内存储的是坐标引用类型对象，浅拷贝只会复制对象的内存地址，不会生成独立的新对象。所以修改任意一个数组内的对象的x、y属性，本质上操作的都是同一个对象，自然会出现两个数组同步变化的情况。

修复方法 #

拷贝数组时同步对每个坐标对象做深拷贝，替换两处拷贝逻辑即可：

1. 构造函数内的拷贝逻辑替换：

// 原代码：this.newArray = this.oldArray.slice();
this.newArray = this.oldArray.map(point => ({
  x: point.x,
  y: point.y
}))

2. return()方法内的拷贝逻辑替换：

// 原代码：this.newArray = this.oldArray.slice();
this.newArray = this.oldArray.map(point => ({
  x: point.x,
  y: point.y
}))

如果坐标对象还有其他需要保留的属性，可以直接展开对象一次性复制所有属性，写法更简洁：

this.newArray = this.oldArray.map(point => ({...point}))

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