如何在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指向内存中的相同数组，因此您更改其中一个会更改另一个。由于对象内部更加复杂-即使您设法在内存中创建不同的数组-它仍可能指向与先前数组相同的对象，从而导致再次-一次更改更改。

相反的情况是深度复制-使用包含相同数据值而不是引用的新对象创建新数组。有几种方法，您可以阅读更多here，我推荐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方法来映射较旧的数组，并使用spread operator创建每个对象的深层副本。