JavaScript 中的 Object.assign() 方法可以用来将多个对象合并成一个对象。在前端开发中，我们常常需要将一个对象深度拷贝到另一个对象中。本文将介绍如何使用 Object.assign() 方法来解决对象深拷贝的问题。
Object.assign() 方法
Object.assign() 方法用于将一个或多个源对象的属性复制到目标对象中。它的语法如下：
Object.assign(target, ...sources)
其中，target 是目标对象，sources 是一个或多个源对象。该方法会返回目标对象。
对象深拷贝
在 JavaScript 中，对象的属性可以是原始类型，也可以是对象类型。因此，简单的使用 Object.assign() 方法进行对象拷贝可能会导致一些问题。
假设我们有一个原始对象 obj1 如下：
const obj1 = {
a: 1,
b: {
c: 2
}
};如果我们简单地使用 Object.assign() 方法进行拷贝：
const obj2 = Object.assign({}, obj1);那么 obj2 中的属性 b 实际上仍然是一个引用类型的对象。也就是说，修改 obj2.b.c 的值，会同时修改 obj1.b.c 的值。
这不是我们想要的结果。我们希望对拷贝后的对象进行修改时，不会影响原始对象。因此，我们需要使用对象深拷贝的方法。
对象深拷贝的实现
实现对象深拷贝的方法有很多，本文介绍两种常见的方法。
方法一：JSON.parse() 和 JSON.stringify()
我们可以使用 JSON.parse() 和 JSON.stringify() 方法来实现对象的深拷贝。具体步骤如下：
- 首先将原始对象转换为一个 JSON 字符串：
const jsonString = JSON.stringify(obj1);
- 然后将这个 JSON 字符串转换为一个新的对象：
const obj2 = JSON.parse(jsonString);
这样就得到了一个新的对象，它与原始对象没有任何关联，互不影响。
不过需要注意的是，这种方法只适用于原始对象中不包含函数、Symbol 等类型的属性。因为这些类型的属性会在 JSON 序列化时被省略掉。
方法二：递归拷贝
递归拷贝是实现对象深拷贝的另一种常见方法。具体实现如下：
-- -------------------- ---- -------
-------- ------------- -
-- ------- --- --- -------- -- --- --- ----- -
------ ----
-
----- ------ - ------------------ - -- - ---
------------------------------ -- -
----------- - -------------------
---
------ -------
-上面的代码首先判断了目标对象的类型，如果是原始数据类型，直接返回该值。如果是对象类型，递归拷贝每个属性值并返回新的对象。
需要注意的是，这个方法可能无法正确处理对象循环引用的情况（即一个对象的属性值指向它自身），需要采用其他方法处理。
使用 Object.assign() 实现深拷贝
除了上面介绍的方法之外，我们还可以利用 Object.assign() 方法实现对象深拷贝。具体实现如下：
-- -------------------- ---- -------
-------- ------------- -
----- ------ - ---
------------------------------ -- -
----- ----- - ---------
-- ------- ----- --- -------- -- ----- --- ----- -
----------- - ----------------
- ---- -
----------- - ------
-
---
------ ----------------- ---- --------
-上述代码中，我们首先使用递归拷贝的方法复制了原始对象的属性，然后返回一个新的对象，将该对象与原始对象进行合并，即可得到一个深拷贝后的对象。
需要注意的是，当属性值是原始类型时，使用 Object.assign() 直接赋值即可。当属性值是对象类型时，需要递归拷贝。
总结
本文介绍了 JavaScript 中的 Object.assign() 方法，并详细讲解了对象深拷贝的实现方法。除了传统的 JSON 方案和递归拷贝外，我们可以使用 Object.assign() 方法实现对象的深拷贝。这对于开发中遇到的对象拷贝问题有着非常重要的指导意义。
示例代码：https://codepen.io/mindplace/pen/zYvMqvN
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486761d48841e98945043b4