如何在Javascript中修改克隆的对象数组中的对象值答案

【问题标题】：How do I modify an object value in a cloned array of objects in Javascript如何在Javascript中修改克隆的对象数组中的对象值
【发布时间】：2019-12-12 23:22:18
【问题描述】：

我有一个这样的对象数组：

const arrA = [{a: true}];

然后我像这样创建数组的副本：

const arrB = Array.from(arrA);

但是当我修改 arrB 中对象的值时，arrA 中的值也会被修改。

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

如何在不修改原始数组的情况下修改克隆数组中的对象值。

【问题讨论】：

接下来的问题是：如何克隆一个对象？您的数组不关心其内容，克隆数组不会克隆其中的对象，它只是创建一个引用这些对象的新数组。也许试试const arrB = Array.from(arrA).map(o => Object.assign({},o));

标签： javascript arrays

【解决方案1】：

Array.from 创建所谓的浅拷贝。浅拷贝意味着您有 2 个变量 - arrA 和 arrB 指向内存中的 同一个数组，因此您更改一个会更改另一个。内部的对象更加复杂-因为即使您设法在内存中创建不同的数组-它仍可能指向与前一个数组相同的对象，从而再次导致-两者都更改。

相反的是深拷贝——使用包含相同数据值的新对象创建一个新数组，而不是引用。有几种方法，你可以阅读更多here，我推荐JSON.parse/stringify作为最简单的方法：

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

这会给你你想要的:)

【讨论】：

【解决方案2】：

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

您可以使用map 方法映射您的旧数组并使用spread operator 创建每个对象的深层副本。

【讨论】：