浅拷贝与深拷贝：JavaScript 开发中的数据克隆艺术

2024-01-27 02:18:08

在 JavaScript 中，我们经常需要对数据进行复制，即拷贝。然而，由于 JavaScript 中所有变量都是引用，而不是值，因此直接复制一个对象或数组并不会创建一个新的副本，而只是创建一个指向原始数据的指针。这意味着对副本所做的任何更改都会影响原始数据。

为了避免这种情况，我们需要使用浅拷贝或深拷贝来复制数据。

浅拷贝

浅拷贝只复制原始数据的顶层属性，而不复制嵌套属性。这意味着如果原始数据是一个对象，则浅拷贝将创建一个新对象，该对象具有与原始对象相同的属性值，但不会复制嵌套对象。

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

const shallowCopy = {...originalObject};

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

console.log(originalObject);
// { name: 'Jane Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA' } }

console.log(shallowCopy);
// { name: 'Jane Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA' } }

正如您所看到的，对浅拷贝所做的更改也会影响原始对象。这是因为浅拷贝只复制了顶层属性，而嵌套属性仍然指向原始数据。

深拷贝

深拷贝复制原始数据的顶层属性和所有嵌套属性。这意味着如果原始数据是一个对象，则深拷贝将创建一个新对象，该对象具有与原始对象相同的属性值，并且所有嵌套对象也都被复制。

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

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

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

console.log(originalObject);
// { name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA' } }

console.log(deepCopy);
// { name: 'Jane Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA' } }