深拷贝和浅拷贝：你了解它们之间的区别吗？

前端

2024-02-19 22:02:16

在 JavaScript 中，对象是一个复杂且功能强大的数据类型。它们允许您存储各种数据，并使用键值对来访问数据。当您需要复制一个对象时，有两种方法可以做到：深拷贝和浅拷贝。

深拷贝

深拷贝会复制一个对象的所有属性，包括嵌套的对象。这意味着，如果原始对象包含另一个对象，那么深拷贝也会复制该嵌套对象。

浅拷贝

浅拷贝只复制一个对象的最顶层属性。这意味着，如果原始对象包含另一个对象，那么浅拷贝不会复制该嵌套对象。

深浅拷贝的区别

深拷贝和浅拷贝之间的主要区别在于，深拷贝会复制一个对象的所有属性，包括嵌套的对象，而浅拷贝只复制一个对象的最顶层属性。

深拷贝和浅拷贝的数据存储方式

深拷贝会创建一个新的对象，并将原始对象的所有属性复制到这个新对象中。这意味着，原始对象和深拷贝对象是两个独立的对象，它们不会相互影响。

浅拷贝不会创建一个新的对象，而是直接将原始对象的所有属性复制到目标对象中。这意味着，原始对象和浅拷贝对象是同一个对象，它们会相互影响。

深浅拷贝的样例

以下是一个深拷贝的示例：

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

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

console.log(originalObject === deepCopy); // false
console.log(originalObject.address === deepCopy.address); // false

在这个示例中，我们使用 JSON.stringify() 和 JSON.parse() 来创建一个原始对象的深拷贝。当我们比较原始对象和深拷贝对象时，我们可以看到它们是两个独立的对象，它们不会相互影响。

以下是一个浅拷贝的示例：

const originalObject = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

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

console.log(originalObject === shallowCopy); // false
console.log(originalObject.address === shallowCopy.address); // true