如何在 Javascript 中的對象克隆數組中修改對象值

Question

我有一個像這樣的對象數組：

const arrA = [{a: true}];

我創建了一個數組的副本，如下所示：

const arrB = Array.from(arrA);

但是當我修改 arrB 中對象的值時，arrA 中的值也被修改了。

arrB[0].a = false
// arrB = [{a:false}]
// arrA = [{a:false}] - gets modified also

如何在不修改原始數組的情況下修改克隆數組中的對象值。

Answer 1

Array.from創建所謂的淺拷貝。 淺拷貝意味着你有 2 個變量 - arrA和arrB指向內存中的同一個數組，所以你改變一個就會改變另一個。 內部的對象更加復雜 - 因為即使您設法在內存中創建不同的數組 - 它可能仍然指向與前一個數組相同的對象，再次導致 - 一個改變兩者的變化。

相反的是深度復制——用保存相同數據值而不是引用的新對象創建一個新數組。 有幾種方法，你可以在這里閱讀更多，我推薦JSON.parse/stringify作為最簡單的方法：

const arrA = [{a: true}];
const arrB = JSON.parse(JSON.stringify(arrA));

這會給你你想要的:)

Answer 2

 const arrA = [{a: true}]; const arrB = arrA.map(x => ({...x})) arrB[0].a = false; console.log(arrA) console.log(arrB)

您可以使用map方法來映射舊數組，並使用擴展運算符創建每個對象的深層副本。