掌握对象拷贝精髓：浅拷贝和深拷贝的较量

2023-08-09 18:27:29

浅拷贝 vs 深拷贝：探索两种不同的对象拷贝方式

在 JavaScript 开发中，对象拷贝是操作对象数据时必不可少的。对象拷贝可以将一个对象中的数据复制到另一个对象中，但不同的拷贝方式会对复制后的对象与原对象之间的关系产生不同的影响。本文将深入探讨浅拷贝和深拷贝这两种截然不同的拷贝方式，帮助你了解它们的异同，并在实际开发中做出明智的选择。

1. 浅拷贝：只复制一层，引用关系保持不变

浅拷贝顾名思义，只复制对象的第一层属性值，不会复制嵌套对象或数组的引用关系。这意味着浅拷贝后的新对象只包含第一层属性值，而对嵌套对象或数组的引用仍然指向原对象。

const obj = {
  name: "John",
  age: 20,
  address: {
    street: "123 Main Street",
    city: "New York",
  },
};

const newObj = Object.assign({}, obj);

console.log(newObj);
// 输出：
// {
//   name: "John",
//   age: 20,
//   address: {
//     street: "123 Main Street",
//     city: "New York",
//   },
// }

在上例中，我们使用 Object.assign() 方法对 obj 进行浅拷贝，并将结果存储在新对象 newObj 中。我们可以看到，newObj 包含了 obj 的所有第一层属性值，包括 name、age 和 address。但是，address 属性仍然指向 obj 中的嵌套对象，这意味着对 newObj 中 address 属性的修改也会影响到 obj 中的 address 属性。

2. 深拷贝：复制所有值和引用关系

深拷贝不仅复制对象的第一层属性值，还会递归地复制嵌套对象和数组的引用关系。这意味着深拷贝后的新对象包含了原对象的所有数据，包括嵌套对象和数组。

const obj = {
  name: "John",
  age: 20,
  address: {
    street: "123 Main Street",
    city: "New York",
  },
};

const newObj = JSON.parse(JSON.stringify(obj));

console.log(newObj);
// 输出：
// {
//   name: "John",
//   age: 20,
//   address: {
//     street: "123 Main Street",
//     city: "New York",
//   },
// }

在上例中，我们使用 JSON.stringify() 和 JSON.parse() 方法对 obj 进行深拷贝，并将结果存储在新对象 newObj 中。我们可以看到，newObj 不仅包含了 obj 的所有第一层属性值，还包含了嵌套对象 address 的所有属性值。这意味着对 newObj 中 address 属性的修改不会影响到 obj 中的 address 属性。