我数组中的每个元素都被最后一个元素推入覆盖

Question

这是一个小提琴： https : //jsfiddle.net/reko91/998woow6/

它是我项目中零件的基本版本。 基本上，正如问题所述，当我将一个元素推入数组时，数组中已有的所有其他元素都会被最后一个推入的元素覆盖。

解决问题：

• 按下AddToArray按钮，这会将nodes和edges推入对象，然后将该对象推入thisArray数组。

• 然后单击DeleteNodes或DeleteEdges ，它们从nodes或edges数组中弹出最后一个元素。

• 然后再次按AddToArray将更新的nodes和edges推入对象，然后推入thisArray数组，您会注意到原始对象（索引为0的对象）被刚刚推入的对象覆盖。

我尝试过在线查找，它一定与闭包有关，但是我没有运气来弄清楚这个。

如果更容易在此处查看，请参见以下代码：

 var thisArray = []; var nodes = [1, 2, 3, 4, 5]; var edges = [1, 2, 3, 4, 5]; function addToArray() { var thisData = { nodes: nodes, edges: edges } thisArray.push(thisData) console.log('thisArray') console.log(thisArray) } function deleteNodes() { nodes.pop(); console.log(nodes) } function deleteEdges() { edges.pop(); console.log(edges) } 

 <button onclick='addToArray()'> AddToArray </button> <button onclick='deleteNodes()'> Delete Nodes </button> <button onclick='deleteEdges()'> Delete Edges </button> 

Answer 1

这是因为您要添加对数组的引用，因此每个对象都具有对同一数组的引用，请尝试使用slice克隆该数组：

function addToArray() {
  var thisData = {
    nodes: nodes.slice(),
    edges: edges.slice()
  }
  thisArray.push(thisData)
  console.log('thisArray')
  console.log(thisArray)
}