尝试在p5js中存储“撤消”功能的数组值

Question

我在p5js中创建了一种绘图应用程序 - 我有一个名为points的多维数组，它由形状组成，其形状有x，y坐标。所以：

shapes[0][0] = [10,10]
shapes[1][3] = [47,98]

等等

我有一个mousePressed功能。在按下鼠标时，在操纵这些形状的点之前，我想将原始形状数组存储为undoArr。

然后，当用户拖动鼠标时，更新形状数组中的坐标。如果用户然后决定撤消，我有一个函数keyPressed，我希望能够使用shapes中的值填充undoArr数组。

但无论我尝试什么 - 似乎撤销数组和形状数组总是具有相同的值，这很奇怪，因为如果我在形状数组中记录坐标的状态：

function mousePressed() {
  if (!isMousePressed){
    undoArr = [...shapes]; //define undoArr as the current shapes array
    console.log(shapes[0][0]); //outputs 10,41 (for example)

然后在mouseReleased上记录状态：

function handleMouseReleased(){
    console.log(shapes[0][0]); //outputs 69,122 (for example)

我可以验证他们在开始和结束时有不同的值。我可以从日志中验证mousePressed不会以某种方式被意外触发，而不应该以鼠标释放。

P5js有一个绘图功能，它根据用户用鼠标拖动它们的位置不断重新定位shapes数组的点。在那个绘制函数中，我可以放置一个日志语句并验证它在mousePressed之后和mouseReleased之前触发。

但是，如果我尝试将形状数组的值存储在mousePressed上，undoArr = [...shapes]然后在keyPressed上尝试使用shapes的内容填充undoArr数组，它什么都不做 - 因为某种方式undoArr总是包含与shapes相同的数据。

我不正确地复制数组吗？我试过而不是传播undoArr = shapes.slice()，但这也没有用。我甚至先尝试清空阵列，但似乎没什么用。

一个complete gist of the file is available here.

Answer 1

我认为你需要的是你的多维数组的深度克隆。看起来你只是复制引用而不是值。

扩展运算符（[...]）不进行深度克隆，因此它复制的对象将包含引用。

Lodash有一个很棒的cloneDeep功能：https://lodash.com/docs/4.17.11#cloneDeep

或者你可以自己写一个。