Javascript 尝试存储'；撤消'；p5js中的函数

我在p5js中制作了一种绘图应用程序——我有一个多维数组，名为

points

，它由形状组成，形状的点有x，y坐标。因此：

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

等等

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

undoArr

然后，当用户拖动鼠标时，形状数组中的坐标将更新。如果用户随后决定撤消，我有一个功能

按键

，我希望能够使用

undoArr

中的值填充

shapes

数组

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

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

然后将状态记录到

mousererelease

：

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

我可以验证它们在开始和结束时是否具有不同的值。我可以从日志中确认mousePressed没有在不应该被触发的时候被意外触发，mousePressed也是如此

P5js有一个draw函数，它根据用户用鼠标拖动的位置不断重新定位

形状

数组的点。在这个draw函数中，我可以放置一个log语句，并验证它在

mousePressed

之后和

mouseereleased

之前触发

但是，如果我尝试将shapes数组的值存储在鼠标按下的位置上，

undoArr=[…shapes]

，然后按下键，尝试用

undoArr

的内容填充

shapes

数组，它不会起任何作用，因为

undoArr

总是包含与

shapes

相同的数据

我是否复制阵列不正确？我尝试过使用spread

undoArr=shapes.slice（）

来代替spread，但也不起作用。我甚至尝试先清空阵列，但似乎没有任何效果

---

A

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

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

Lodash具有强大的cloneDeep功能：

---

或者你也可以自己写一本。

是的！我才意识到。哇，编程很长时间了，从来没有意识到数组中的嵌套值仍然是对原始值的引用。（这篇帖子给我通风报信：）。我写了自己的函数，但很高兴了解lodash。谢谢。很乐意帮忙！！