javascript - Array.push 修改现有元素

Question

我正在做一个小的个人项目，我遇到了一些我不明白的东西，我希望有人能向我解释一下。我的模块中的方法之一是 SaveSet()，它接受一个数组并将其作为一个元素添加到另一个数组，因此它变成二维数组，这里是 SaveSet() 的代码:

function SaveSet() {
    anim.push(set)
}  

当我运行这段代码时，我希望它能获取 set 数组中的任何内容，并将其作为这样的元素添加到 anim 数组中。

Set = [1,2,3,4]
SaveSet()
Set = [3,4,5,6]
SaveSet()

我应该得到这样的结果:

[
   [1,2,3,4]
   [3,4,5,6]
]

但是，我的 SaveSet() 正在修改现有的并添加一个新的，所以我最终得到这样的结果

[
  [1,2,3,4,3,4,5,6]
  [1,2,3,4,3,4,5,6]
]

我通过将 SaveSet() 更改为以下内容找到了解决方法:

function SaveSet() {
    let temp = JSON.stringify(set)
    anim.push(JSON.parse(temp));
}  

但是，我仍然不明白为什么 anim.push 也在修改现有的。如果有人想看的话，这是完整的代码。正如我所说，这是一个个人快速项目，因此代码和设计的质量非常低。 https://codepen.io/anon/pen/oJZeJy?editors=1111

Answer 1

您始终对所有数据使用相同的数组。

发生的事情是您在代码中全局初始化一个 set = [] once。

然后每次保存一个集合时，您都会将此数组添加到 anim 数组中，但您永远不会更新变量 set 指向的内容。

因此，您只需一遍又一遍地添加相同的 set 数组:

var set = [];
var anim = [];

function addToSet() {
  set.push(String(Math.random()).slice(2,3));
  console.log(set);
}

function saveSet() {
  anim.push(set); // <--- you are always pushing the same array
  console.log(anim);
}

<button id="add" onclick="addToSet()">Add to set</button>
<button id="save" onclick="saveSet()">Save set</button>

每次保存一个集合时，您都应该创建一个新集合:

function saveSet() {
  anim.push(set);
  set = []; // <---- reset the set to a new array
}