反应深拷贝 - JavaScript

当我们需要在JavaScript中复制一个对象时，通常会使用简单的复制方法。 然而，对于某些对象，可能需要使用深拷贝方法，以确保复制的对象与原始对象是相互独立的。

简单复制

示例代码：

const obj = {a: 1, b: 2, c: 3};
const objCopy = Object.assign({}, obj);
console.log(objCopy);

输出：

{a: 1, b: 2, c: 3}

这里我们使用了 Object.assign() 方法来复制一个对象 obj 并将其分配给 objCopy。 请注意，我们在 Object.assign() 方法中使用了两个对象作为参数。 第一个对象是空对象 {}，当我们在第二个对象 obj 上调用 Object.assign() 时，它将成为复制的对象。 由于我们将空对象作为第一个参数传递，因此我们只是将原始对象的属性复制到新对象中。

深度复制

然而，试图使用简单的复制方法来复制复杂的对象（例如包含嵌套对象或数组的对象）时，我们将遇到各种问题。 在这种情况下，我们需要使用深拷贝方法。

示例代码：

const obj = { 
  a: 1, 
  b: {
    c: 2,
    d: 3
  }
};
 
const newObj = JSON.parse(JSON.stringify(obj));
console.log(obj);
console.log(newObj);

输出：

{ 
  a: 1, 
  b: {
    c: 2,
    d: 3
  }
}
{ 
  a: 1, 
  b: {
    c: 2,
    d: 3
  }
}

这里我们使用 JSON.stringify() 方法将对象转换为JSON字符串，然后使用 JSON.parse() 方法将其解析为新对象。 这个方法是深拷贝的一种方法，因为它会递归地复制每个嵌套对象或数组。 请注意，这种方法的缺点是它只适用于那些可以序列化为JSON的对象。

使用外部库

另外一个深拷贝方法是使用外部库，例如 Lodash 和 jQuery。 这些库提供了很多功能，包括深度复制。

示例代码：

const _ = require('lodash');
 
const arr = [1,2,[3,4]];
const newArr = _.cloneDeep(arr);
console.log(arr);
console.log(newArr);

在这个例子中，我们使用了 Lodash 库中的 cloneDeep() 方法来深复制包含嵌套数组的对象。 请注意，在这里，我们需要先使用 require() 命令加载 Lodash 库，然后才能使用其方法。

总结

在JavaScript中，有几种方法可以复制对象。 简单复制方法不会创建原始对象和副本之间的副本。 深度复制方法可以用于复杂对象的复制，而使用外部库也是一个好的选择。 了解这些方法将帮助您正确地复制和使用对象。