深拷与浅拷：探寻 JavaScript 对象复制的本质

2024-01-29 00:24:56

在 JavaScript 开发过程中，经常会遇到复制对象的情况。然而，简单的赋值并不能真正复制对象，而是创建了一个对原始对象的引用。这可能会导致意外的修改，因为对副本的修改也会影响原始对象。这就是深拷贝和浅拷贝概念的由来。

浅拷贝

浅拷贝只复制对象的第一层属性，而嵌套的对象或数组仍保持对原始对象的引用。这意味着对浅拷贝的修改会影响原始对象。例如：

const originalObject = {
  name: 'John',
  address: {
    street: '123 Main Street'
  }
};

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

shallowCopy.name = 'Jane';
shallowCopy.address.street = '456 Elm Street';

console.log(originalObject); // { name: 'Jane', address: { street: '456 Elm Street' } }

深拷贝

与浅拷贝不同，深拷贝会递归复制对象的所有属性，包括嵌套对象和数组。这确保了副本与原始对象完全独立，对副本的修改不会影响原始对象。实现深拷贝的方法有多种，其中一种方法是使用 JSON.parse(JSON.stringify(originalObject))。

const originalObject = {
  name: 'John',
  address: {
    street: '123 Main Street'
  }
};

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

deepCopy.name = 'Jane';
deepCopy.address.street = '456 Elm Street';

console.log(originalObject); // { name: 'John', address: { street: '123 Main Street' } }

使用场景

选择深拷贝还是浅拷贝取决于具体的使用场景。如果需要一份与原始对象完全独立的副本，则应使用深拷贝。常见的场景包括：