Javascript ES6类上带有参数的奇怪行为

我有一个类，它包含一个名为values的参数。这用于保存画布上表示特定形状的点的值

我需要实现一个功能，允许我拖动这些形状，所以我需要修改形状的每个特定点，从中删除拖动的量

所以我决定，当我触发mousedown事件（即方法StartMove）时，我会将我的点的值保存在startValues变量上，当我移动鼠标（方法move）时，我会更新这些值，使用StartValue和起点与当前鼠标位置之间的距离来确定我的新点位置

问题是，每次光标移动时，this.startValues实际上都会被更改以匹配this.values，我不知道为什么。有什么简单的东西我遗漏了吗

因为我将值存储为值，而不是坐标（帮助我在画布上平移和缩放），所以我首先将值转换为位置，然后修改位置，然后将其转换回值。我已经包含了父类Grf，因此您可以看到将值更改为位置和将位置更改为值的方法

带问题上课

类测试{
建造师（grf）{
this.grf=grf；//另一个类，它包含重要的方法
这个值为[]；
this.startValue=[]；
}
开始移动（p0）{//p0=[x，y]
const{grf}=这个；
this.startValues=[…this.values]；//我也试过this.startValues=this.values
这是0.p0=p0；
grf.canvas.addEventListener（'mousemove'，this.move）；
grf.canvas.addEventListener（'mouseup'，this.endMove）；
}
move=（evt）=>{//arrow函数，因此“this”绑定到测试类而不是grf.canvas
常数{grf，p0，值，起始值}=此；
const coords=grf.canvas.getBoundingClientRect（）；
const px=evt.clientX-coords.left；
const py=evt.clientY-coords.top；
for（设i=0，iMax=this.values.length；i{//arrow函数，因此“this”绑定到测试类而不是grf.canvas
const{grf}=这个；
grf.canvas.removeEventListener（'mousemove'，this.move）；
grf.canvas.removeEventListener（'mouseup'，this.endMove）；
}
}

另一个类

Grf类{
构造函数（canvas）{//不是实际的构造函数，只是值可能是什么样子的示例
这个.translateX=1000；
这个.translateY=1000；
该系数为10.7；
这是1.scaleX=11.2；
this.canvas=画布；
}
posX（值）{
返回（值this.translateX）*this.scaleX；
}
波西（价值）{
返回（this.canvas.height-（100*（值））-this.translateY）*this.scaleY；
};
valX（pos）{
返回（pos/this.scaleX）+this.translateX
}
山谷（pos）{
return（-1）*（（pos/this.scaleY）+this.translateY-this.canvas.height）/100
}
}

如何将值插入

Test

类中的

起始值和
值中？您可能会在两个数组中插入完全相同的对象，而不覆盖它，因此两个数组都包含相同的实例

请看一个例子：

constobj={a:10}；
常数a=[]；
a、 推（obj）；
常数b=[…a]；//创建新数组，但使用相同的对象
a[0].a=20；
log（b[0]）//给出“{a:20}”

要使其分离，您需要制作对象的副本：

a.push（{…obj}）
正如我发布的代码中的这一行所示，
this.startValues=[…this.values]
。所以我正在对它进行分解，使其与众不同。我还尝试了一些类似于
this.startValues=[…this.values，[0,0]]]
的操作，以确保它不是相同的值，并且结果仍然相同。这是我整个代码中唯一一个为This.startValues分配新值的地方
[…This.values]
只确保克隆数组，而不是克隆数组中的对象。有两个不同的数组，但它们包含完全相同的对象。您还需要克隆这些数组中的对象，例如：
this.startValues=this.values.map（obj=>（{…obj}））-map还返回新数组。这就是为什么像DeepClone这样的东西存在于javascript和python中。为此，您可能需要使用库：此行为是否也适用于阵列中的阵列？相同的行为适用于阵列中的阵列是的，以及阵列中阵列中的阵列。通常，默认情况下不会复制数组和对象，而是使用对现有对象/数组的引用。而且[…数组]和{…对象}不进行深度复制