解决 ES6 中对象深度复制的方式及其应用

在前端开发中，我们常常需要将一个对象复制到另一个对象，这在对象比较大或者嵌套比较深时就会变得很麻烦。ES6 中提供了一些方法来解决这个问题，本文将为大家介绍如何用 ES6 中的方法来实现对象的深度复制，并且讲解其应用和指导意义。

浅复制和深复制

在开始介绍对象深度复制的方法之前，我们先了解一下浅复制和深复制的概念。浅复制只复制了对象的引用，而没有复制对象本身。深复制则是将对象本身复制一份，包括对象内部的所有元素和引用，也就是完全复制了一个新对象。因此，深复制比浅复制更完整，更安全。

当我们不需要对对象进行修改，只是需要将对象作为返回值或者传递给其他函数时，可以使用浅复制。但是如果需要修改对象，或者需要保存对象的状态，就需要使用深复制。

对象深度复制的方法

ES6 提供了两个方法来实现对象的深度复制：Object.assign 和 JSON.parse(JSON.stringify())。接下来我们分别讲解这两个方法的使用。

使用 Object.assign

Object.assign 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它是一个浅复制，但是可以通过嵌套使用它来实现深度复制。

以下是 Object.assign 的基本使用方法：

let obj1 = { a: 1 };
let obj2 = { b: 2 };

let newObj = Object.assign({}, obj1, obj2);
console.log(newObj); // 输出 { a: 1, b: 2 }

我们可以传入一个或多个源对象到 Object.assign 方法中，第一个参数是目标对象，也可以传入空对象 {} 作为目标对象。如果某个源对象和目标对象中存在相同的属性，那么后面的属性值会覆盖前面的。在上面的例子中，obj1 和 obj2 中的属性都被成功地复制到了新对象 newObj 中。

如果源对象中包含嵌套的对象，我们可以通过多次使用 Object.assign 方法来实现深度复制。以下是一个例子：

let obj1 = { a: 1, b: { c: 2 } };
let obj2 = { d: 3 };

let newObj = Object.assign({}, obj1, { b: Object.assign({}, obj1.b) }, obj2);
console.log(newObj); // 输出 { a: 1, b: { c: 2 }, d: 3 }

在上面的例子中，我们将 obj1.b 拷贝到一个新的对象中，然后用这个新对象作为源对象的属性传入到 Object.assign 方法中，这样就达到了深度复制的效果。

使用 JSON.parse(JSON.stringify())

另一种实现对象深度复制的方法是使用 JSON.parse(JSON.stringify())。这个方法先将对象序列化为 JSON 格式的字符串，然后再将这个字符串解析成一个新的对象。由于 JSON 格式的字符串不支持函数和 undefined 等数据类型，因此使用这个方法时需要注意。

以下是 JSON.parse(JSON.stringify()) 的使用方法：

let obj = { a: 1, b: { c: 2 } };
let newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj); // 输出 { a: 1, b: { c: 2 } }

在上面的例子中，我们先用 JSON.stringify 方法将对象 obj 序列化成 JSON 格式的字符串，然后用 JSON.parse 方法解析这个字符串，得到一个新的对象 newObj。这样，我们就完成了对象的深度复制。

需要注意的是，由于 JSON.parse(JSON.stringify()) 会将对象转为 JSON 格式的字符串再解析成新的对象，因此如果对象中包含函数、undefined 等数据类型，这些数据将会丢失。

应用

对象深度复制在实际开发中非常常见，以下是一些应用场景：

1. 状态管理：将当前状态保存在一个对象中，并将它传递给下一个组件或者页面（React 中可以使用 Context 或者 Redux 实现状态管理）。

2. 公用数据：多个组件或者页面需要共享某些数据，但是需要保证它们之间互不干扰。

3. 数据备份：将数据备份到本地或者服务器，保证数据不丢失。

指导意义

深度复制可以帮助我们避免意外修改对象的情况，同时也能保留对象原有状态。在开发过程中，我们应该尽可能地避免直接修改数据，而应该使用深度复制在数据的基础上进行修改。

同时，深度复制的实现方法也有其优劣。Object.assign 的性能比 JSON.parse(JSON.stringify()) 好，但是对于数组和嵌套层次比较深的对象，JSON.parse(JSON.stringify()) 的性能会更好。

总之，在具体使用时，我们应该根据情况选择合适的深度复制方式，尤其是需要处理嵌套层次比较深的对象时，最好使用 JSON.parse(JSON.stringify()) 方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd0142a231b2b7edef9a92