深拷贝和浅拷贝：一场爱恨情仇的解读

2023-09-07 10:31:04

在软件开发的世界里，数据拷贝是一项至关重要的操作，它可以让程序员在不同的程序或数据结构之间安全地移动数据。在JavaScript中，就有两种常用的数据拷贝方式：深拷贝和浅拷贝。它们之间有着微妙的区别，在不同的场景下有着不同的应用，了解它们的特性对于程序员来说非常重要。

深拷贝与浅拷贝的异同

浅拷贝

浅拷贝，顾名思义，只复制对象的表面数据，即只复制对象中的基本数据类型的值，而对于对象中的引用数据类型，浅拷贝只会复制引用，而不会复制引用所指向的实际数据。

深拷贝

深拷贝则不同，它会复制对象中的所有数据，包括基本数据类型的值和引用数据类型的值。换句话说，深拷贝会创建一个与原对象完全相同的新对象，而浅拷贝只会创建一个与原对象外表相同的新对象。

举例

// 对象 A
const a = {
  name: "Alice",
  age: 20,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

// 浅拷贝对象 A 到对象 B
const b = { ...a };

// 修改对象 B 中的 address 属性
b.address.street = "456 Elm Street";

// 打印对象 A 和 B 的 address 属性
console.log(a.address.street); // 123 Main Street
console.log(b.address.street); // 456 Elm Street

在上面的示例中，我们使用扩展运算符 (...) 来创建一个对象的浅拷贝。浅拷贝只复制了对象 A 中的基本数据类型的值，而对于对象 A 中的引用数据类型 address，浅拷贝只是复制了引用，并没有复制实际的数据。因此，当我们修改对象 B 中的 address 属性时，对象 A 中的 address 属性并没有受到影响。

// 对象 A
const a = {
  name: "Alice",
  age: 20,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

// 深拷贝对象 A 到对象 B
const b = JSON.parse(JSON.stringify(a));

// 修改对象 B 中的 address 属性
b.address.street = "456 Elm Street";

// 打印对象 A 和 B 的 address 属性
console.log(a.address.street); // 123 Main Street
console.log(b.address.street); // 456 Elm Street

在上面的示例中，我们使用 JSON.stringify() 和 JSON.parse() 来创建一个对象的深拷贝。深拷贝复制了对象 A 中的所有数据，包括基本数据类型的值和引用数据类型的值。因此，当我们修改对象 B 中的 address 属性时，对象 A 中的 address 属性并没有受到影响。

深拷贝与浅拷贝的优缺点

特性	深拷贝	浅拷贝
复制深度	复制所有数据，包括基本数据类型的值和引用数据类型的值	只复制基本数据类型的值，只复制引用数据类型的引用，不复制实际的数据
内存消耗	更高	更低
性能	更慢	更快
应用场景	当我们需要完全复制一个对象及其所有数据时	当我们需要快速复制一个对象的基本数据类型的值时