浅拷贝与深拷贝：揭开JavaScript中的拷贝秘密

2023-12-10 14:40:22

在JavaScript中，变量可以保存两种类型的数据：值类型和引用类型。值类型变量直接存储数据，而引用类型变量存储的是对数据的引用。因此，当您对值类型变量进行拷贝时，您将获得该变量所存储的副本。但是，当您对引用类型变量进行拷贝时，您将获得该变量所存储的引用的副本，而不是数据的副本。

浅拷贝仅复制最外层数据，而深拷贝则复制整个数据结构，包括最外层数据和所有内层数据。

浅拷贝

浅拷贝是指将对象中所有的一级属性拷贝到一个新的对象中。也就是说，浅拷贝只拷贝最外层的数据，而不会拷贝内层的数据。

浅拷贝方法：

const newObject = Object.assign({}, oldObject);

示例：

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

const newPerson = Object.assign({}, person);

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

console.log(person);
// { name: 'John', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(newPerson);
// { name: 'Jane', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }

在这个例子中，newPerson是person的浅拷贝。当我们更改newPerson的属性时，person的属性也会发生变化，因为它们指向同一个地址。

深拷贝

深拷贝是指将对象中所有的一级属性和所有内层属性都拷贝到一个新的对象中。也就是说，深拷贝会拷贝整个数据结构，包括最外层数据和所有内层数据。

深拷贝方法：

const newObject = JSON.parse(JSON.stringify(oldObject));

示例：

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

const newPerson = JSON.parse(JSON.stringify(person));

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

console.log(person);
// { name: 'John', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(newPerson);
// { name: 'Jane', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }