Каждый элемент в моем массиве, перезаписывается последним элементом в толчке

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

Это потому, что вы добавляете ссылку на массив, так что каждый объект имеет ссылку на тот же массив, попробуйте для клонирования массива с использованием среза:

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