扒开JS对象拷贝的深度奥秘：浅拷贝与深拷贝

2023-11-24 15:35:05

一、认识JS对象拷贝

在JavaScript中，对象是一种基本的数据类型，用于存储一系列键值对。为了满足不同场景的需求，对象拷贝应运而生。对象拷贝，顾名思义，就是将一个对象再复制一份，使其成为另一个独立的对象。然而，复制的方式不同，将会得到截然不同的结果，即浅拷贝和深拷贝。

二、浅拷贝与深拷贝的本质

浅拷贝 ：浅拷贝只复制对象本身的属性，而不会复制其子对象。因此，浅拷贝的对象和原对象共享相同的子对象。如果修改浅拷贝对象的子对象，那么原对象也会受到影响。

深拷贝 ：深拷贝不仅复制对象本身的属性，还会递归地复制其子对象，直到所有子对象都被复制完毕。因此，深拷贝的对象和原对象完全独立，不会互相影响。

三、浅拷贝与深拷贝的代码示例

为了更直观地理解浅拷贝和深拷贝，我们通过代码示例来加以说明：

浅拷贝示例：

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

const obj2 = Object.assign({}, obj1);

obj2.address.street = '456 Elm Street';

console.log(obj1); // { name: 'John Doe', address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(obj2); // { name: 'John Doe', address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }

在这个例子中，我们使用Object.assign()方法对obj1进行浅拷贝，并将结果存储在obj2中。当我们修改obj2的address属性时，obj1的address属性也会受到影响，因为它们共享同一个地址对象。

深拷贝示例：

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

const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.address.street = '456 Elm Street';

console.log(obj1); // { name: 'John Doe', address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(obj2); // { name: 'John Doe', address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }