在 JavaScript 中深度克隆对象

1. 浅拷贝与深拷贝
2. JavaScript 中的浅拷贝方法
3. JavaScript 中的深拷贝方法

JavaScript 是一种对象语言。几乎所有内容都是 JavaScript 中的对象。布尔值、数字、字符串、日期、数学、Regex、数组、函数和对象本身都是对象。它们是由各种属性和方法组成的键值对的集合。它们直接存储在内存中，并且只能通过引用进行复制。变量不存储对象，而只是在内存中对该对象的引用。因此，当我们尝试复制对象变量时，最终会创建对同一对象的额外引用。此方法称为浅拷贝。这是不理想的，因为我们不希望更改原始对象来影响其克隆。这就需要一种方法来深度克隆对象。本教程讲授如何在 JavaScript 中深度克隆对象。

浅拷贝与深拷贝

浅拷贝是对象的按位拷贝。创建的新对象成功复制了诸如数字、布尔值和字符串等基元，但未复制对对象的任何引用。只有引用地址会导致指向同一对象的指针。对原始对象所做的任何更改都会反映在浅拷贝中。

另一方面，深拷贝不仅将地址/引用复制到原始对象，还复制整个对象。创建的新对象与复制的对象没有任何依赖关系。JavaScript 为我们提供了各种内置方法来复制对象，但是浅拷贝是大多数方法中的默认行为。

JavaScript 中的浅拷贝方法

我们将简要介绍浅拷贝方法，以使你了解深拷贝的一些错误方法。

在 JavaScript 中使用 Spread 语法来浅拷贝对象

我们可以通过创建一个新对象来克隆对象，然后使用 Spread 语法将对象内部的内容枚举为对象本身。这似乎是正确的方法，但它会创建数据的浅拷贝。

const obj = {
  a: 1,
  b: {c: 2}
}

const clone = {...obj};  // creates a shallow copy

obj.b.c = 5;
console.log(clone.b.c);  // outputs 5

在上面的代码中，我们使用 spread 语法创建对象的浅拷贝。然后，我们在原始对象中修改了引用对象的属性之一，并表明在克隆的对象中该属性已被修改。

在 JavaScript 中使用 Object.assign() 浅拷贝对象

object.assign() 方法将对象的浅拷贝分配给新的对象变量。它有两个参数：target 和 source。target 通常是一对空括号，用于表示要在其中复制的空对象。它是一个可选参数，但是传递它可以确保我们最终不会更改原始对象。第二个参数是要复制的对象。

const obj = {
  a: 1,
  b: {c: 2}
}

const clone = Object.assign({}, obj);  // creates a shallow copy

obj.b.c = 5;
console.log(clone.b.c);  // outputs 5

在上面的代码中，我们使用 Object.assign() 创建对象的浅拷贝。然后，我们在原始对象中修改了引用对象的属性之一，并表明在克隆的对象中该属性已被修改。

JavaScript 中的深拷贝方法

在 JavaScript 中使用 JSON.parse() 和 JSON.stringify() 深度克隆对象

JSON.stringify() 用于将 JavaScript 对象转换为 JSON 字符串，JSON.parse() 用于将 JSON 字符串转换为 JavaScript 对象。我们可以将 JSON.parse()包裹在 JSON.stringify()周围，以首先将 JavaScript 对象转换为 JSON String，然后对其进行解析以获得该对象的副本。

var user = {name: 'Harshit', age: 21, Profession: 'Software Engineer'};
let fakeDeepCopy = JSON.parse(JSON.stringify(user));

此方法创建深拷贝，但仅适用于没有功能的对象。与其他引用对象一样，它在任何循环依赖方面都有问题。复制对象中属性的顺序也可能与原始对象不同。因此，如果我们有一个简单的对象而原始数据类型很少，那么此方法是一个很好的技巧，但不建议在现实世界中使用。

在 JavaScript 中使用本机深度克隆深度克隆对象

我们可以使用 Node.js v8 模块的序列化算法来深度克隆对象。尽管它仅限于某些内置数据类型，但它保留了克隆数据中的引用。它允许我们复制 JSON 方法不支持的几个循环和递归结构。

const v8 = require('v8');

const structuredClone = obj => {
  return v8.deserialize(v8.serialize(obj));
};

我们反序列化然后序列化对象，就像 JSON 方法的 stringify 和 parse 一样。但是它保留了循环依赖关系，并且稍微好一些。

在 JavaScript 中使用 Lodash 库深度克隆对象

Lodash 库具有浅拷贝和深拷贝的函数，即 clone 和 clonedeep。这是一个很棒的库，它允许我们仅导入所需的功能，而不导入完整的库。clonedeep 方法的工作方式是递归地复制值，然后保留所有对象继承，从而创建对象的真实副本。

const lodashClonedeep = require('lodash.clonedeep');
let obj = {a: 1, b: {c: 2}} let deepClone = lodashClonedeep(obj);

在这里，我们从 lodash 加载 clonedeep 函数，并使用它来深克隆对象。它是一个经过良好测试和维护的库，但只能与 Node.js 一起使用，不能与 Vanilla JavaScript 一起使用。

在 JavaScript 中使用 jQuery extend() 方法深度克隆对象

我们可以使用 jQuery 的 .extend() 进行对象的浅拷贝和深拷贝。这是最可靠的深度克隆方法，不会丢失数据或破坏数据。它的主要功能是合并两个或更多对象。但是也可以用于克隆对象。它带有以下参数：[deep]、target、object1 ..... objectN。

1. [deep]：这是一个可选参数。它唯一允许的值为 true。如果在函数中传递它，则该函数将创建对象的深拷贝。否则，它将形成一个浅拷贝。
2. target：要扩展的对象。它将接收所有合并的对象。
3. object1, ..., objectN：这些是要合并/克隆到新对象中的对象。

let obj = {a: 1, b: {c: 2}} let shallowClone =
    $.extend({}, obj);                    // creates a shallow copy
let deepClone = $.extend(true, {}, obj);  // creates a deep copy

一个更明显的解决方案可以是遍历源对象的每个属性，然后将它们复制到新对象中。上面讨论的所有方法都与所有主要的浏览器兼容。