深拷贝揭秘：从入门到精通

前端

2023-03-18 19:55:53

深拷贝：深入理解和应用

在 JavaScript 中，理解深拷贝的概念至关重要。它是一个强大的技术，可以帮助你创建对象副本，避免意外修改，并为广泛的应用场景提供支持。

什么是深拷贝？

深拷贝，顾名思义，是将一个对象所有属性和值的深入拷贝到另一个对象中。与浅拷贝不同，后者只复制对象的引用，深拷贝会创建一个全新的内存空间，将原始对象的每个元素都复制过来。

为什么我们需要深拷贝？

当复制引用值时，如果不使用深拷贝，可能会遇到这样的问题：修改一个变量也会影响另一个变量。这是因为复制变量只会将其指向要复制变量的引用内存。深拷贝通过创建新的内存空间来解决这一问题，确保对一个变量的修改不会影响另一个变量。

如何实现深拷贝？

有几种方法可以在 JavaScript 中实现深拷贝：

JSON.parse(JSON.stringify()) ：这种方法通过将对象转换为 JSON 字符串，然后将其解析为新对象来实现深拷贝。

const originalObject = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    number: 123
  }
};

const deepCopy = JSON.parse(JSON.stringify(originalObject));

// 修改 deepCopy 中的属性
deepCopy.name = "Jane";

// 检查 originalObject 是否受到影响
console.log(originalObject.name); // 仍然是 "John"

Object.assign() ：这种方法可以将一个对象的属性和值复制到另一个对象中。然而，它只支持一级拷贝。对于嵌套对象，需要使用递归实现深拷贝。

const originalObject = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    number: 123
  }
};

const deepCopy = Object.assign({}, originalObject);

// 修改 deepCopy 中的属性
deepCopy.name = "Jane";

// 检查 originalObject 是否受到影响
console.log(originalObject.name); // 仍然是 "John"