javascript - 数组中的每个元素都会被插入的最后一个元素覆盖

Question

这是一个 fiddle :https://jsfiddle.net/reko91/998woow6/

这是我项目中一部分的基本版本。基本上，正如问题所说，当我将一个元素插入数组时，数组中已有的所有其他元素都会被最后插入的元素覆盖。

重新解决问题:

• 按下AddToArray按钮，这会将节点和边推送到一个对象中，然后将该对象推送到thisArray 数组。

• 然后点击DeleteNodes或DeleteEdges，从节点或边缘弹出最后一个元素> 数组。

• 然后再次按 AddToArray 将更新后的节点和边推送到对象中，然后推送到 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

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

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