JavaScript 复制对象

在本文中，我们将深入理解 JavaScript 中的对象复制。

JavaScript 中有多种复制对象的方法，如下所示：

• 使用展开 (...) 语法
• 使用 Object.assign() 方法
• 使用 JSON.stringify() 和 JSON.parse() 方法

我们将逐一详细学习每种方法。

使用展开 (...) 语法

我们可以借助展开 (...) 运算符在 JavaScript 中复制对象。

演示

在此演示中，我们将使用展开 (...) 运算符。

代码

输出

我们可以看到对象已通过展开 (...) 运算符复制。我们在控制台中打印了“person”和“p1”这两个对象。“person”是原始对象，“p1”是“person”的复制对象，因此它们是相同的。

使用 Object.assign() 方法

我们可以借助 Object.assign() 方法在 JavaScript 中复制对象。

演示

在此演示中，我们将使用 Object.assign() 方法。

代码

输出

我们可以看到对象已通过 Object.assign() 方法复制。我们打印了“person”和“p2”这两个对象。“person”是原始对象，“p2”是“person”的复制对象。

使用 JSON.stringify() 和 JSON.parse() 方法

我们可以借助 JSON.stringify() 和 JSON.parse() 方法在 JavaScript 中复制对象。

演示

在此演示中，我们将使用 JSON.stringify() 和 JSON.parse() 方法。

代码

输出

我们可以看到对象已通过 JSON.stringify() 和 JSON.parse() 方法复制。我们打印了“person”和“p3”这两个对象。“person”是原始对象，“p3”是“person”的复制对象。

展开 (...) 和 Object.assign() 都创建浅拷贝，而 JSON 方法创建深拷贝。

什么是浅拷贝？

浅拷贝创建一个新对象，它是原始对象的副本，具有新的引用，并且只存储对象的引用地址。浅拷贝仅复制原始对象的顶层属性。嵌套对象在原始对象和克隆对象之间共享，这意味着原始对象和克隆对象相互依赖。

什么是深拷贝？

深拷贝创建一个新对象，它是原始对象的一个精确副本，它复制并存储原始对象所有成员的副本，包括所有属性和嵌套对象。嵌套对象不在原始对象和克隆对象之间共享，这意味着原始对象和克隆对象是相互独立的。

浅拷贝演示

让我们通过演示来理解如何构建浅拷贝。

演示

在下面的演示中，我们使用 Object.assign() 方法创建了一个浅拷贝。

代码

说明

我们创建了一个名为“person”的对象，并使用 Object.assign() 方法对其进行了复制，然后我们更改了 firstName、street 和 city。之后，我们将复制的对象打印到控制台。

我们可以看到复制对象的 firstName、address-street 和 address-city 的值已更改。

现在，我们将使用以下代码将原始对象打印到控制台。

我们可以看到原始对象的 address-street 和 address-city 的值已更改。firstName 的值未更改，因为 firstName 是原始值，而其他 address 值是引用值。

深拷贝演示

让我们通过演示来理解如何构建深拷贝。

演示 1

在下面的演示中，我们使用 JSON.stringify() 和 JSON.parse() 方法创建了一个浅拷贝。

代码

说明

我们创建了一个名为“product”的对象，并使用 JSON.parse() 和 JSON.stringify() 方法对其进行了复制，然后我们更改了 productName、description-processor 和 description-memory。之后，我们将复制的对象打印到控制台。

我们可以看到复制对象的 productName、description-processor 和 description-memory 的值已更改。

现在，我们将使用以下代码将原始对象打印到控制台。

我们可以看到原始对象的值未更改，因为原始对象和复制对象已断开连接。

结论

在本文中，我们已经了解了 **JavaScript 对象复制**。我们已经学习了在 JavaScript 中复制对象的三个方法：使用展开 (...) 方法、Object.assign() 方法以及 JSON.stringify() 和 JSON.parse() 方法。