我數組中的每個元素都被最后一個元素推入覆蓋

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)
}