数据类型的深拷贝和浅拷贝你弄清楚了吗？

2023-09-15 21:28:21

深入剖析JavaScript中的浅拷贝与深拷贝

在JavaScript的世界中，数据处理的精髓在于拷贝，因为它决定着修改副本时原始对象的影响程度。谈到拷贝，我们就不得不提及浅拷贝和深拷贝这两个概念，它们各司其职，满足不同的需求。

浅拷贝：轻描淡写的一笔

想象一个浅拷贝就像在沙滩上画画，当你划出一条线时，你并没有触及沙子的本质，而是仅仅在表面留下了痕迹。同理，浅拷贝创建一个新对象，它复制了原始对象所有的一级属性，但它并没有深入到嵌套的对象中。

代码示例：

const obj1 = {
  name: 'John Doe',
  age: 30,
  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', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(obj2); // { name: 'John Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }

在这个例子中，我们使用Object.assign()方法对obj1进行浅拷贝。obj2现在引用的是obj1在堆内存中的地址。这意味着当我们修改obj2.address.street时，我们实际上也在修改obj1.address.street，因为它们指向的是同一块内存空间。

深拷贝：复制本质

与浅拷贝的蜻蜓点水相比，深拷贝则像一位细心而耐心的工匠，它深入对象的每一层，一丝不苟地复制所有属性，包括嵌套的对象。

代码示例：

const obj1 = {
  name: 'John Doe',
  age: 30,
  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', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(obj2); // { name: 'John Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }

在这里，我们使用了JSON.stringify()和JSON.parse()方法来创建obj1的深拷贝。JSON.stringify()方法将obj1序列化为一个JSON字符串，而JSON.parse()方法将这个JSON字符串反序列化为一个新的对象obj2。obj2现在引用的是堆内存中一个全新的对象，与obj1完全独立。因此，当我们修改obj2.address.street时，我们不会影响到obj1。

什么时候使用？

选择使用浅拷贝还是深拷贝取决于我们的具体需求：