深入浅出 JavaScript 浅拷贝和深拷贝

2024-01-06 10:25:55

在 JavaScript 中，拷贝对象有两种主要方式：浅拷贝和深拷贝。理解这两种方式之间的区别非常重要，因为它们对数据的复制行为有本质上的不同，浅拷贝只复制对象的引用，而深拷贝复制对象的实际值。

浅拷贝

浅拷贝创建一个新对象，其拷贝了原对象的第一层引用。即当原对象的属性值是基本数据类型时，直接拷贝其值；当原对象的属性值是对象时，将拷贝指向该对象的引用。

以下代码演示浅拷贝：

const originalObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

const copiedObject = Object.assign({}, originalObject);

console.log(copiedObject);

输出：

{
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
}

可以看到，copiedObject 中包含了 originalObject 中的所有属性，包括嵌套对象 address。但是，address 属性指向的是同一个对象，而不是它的副本。

深拷贝

深拷贝创建一个新对象，并复制原对象的所有属性值，包括嵌套对象的属性值。深拷贝的目的是创建一个完全独立的新对象，与原对象没有任何共享的引用。

以下代码演示深拷贝：

const originalObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

const copiedObject = JSON.parse(JSON.stringify(originalObject));

console.log(copiedObject);

输出：

{
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
}

可以看到，copiedObject 中包含了 originalObject 中的所有属性，包括嵌套对象 address。但是，address 属性指向的是一个新的对象，而不是与原对象共享引用。

浅拷贝和深拷贝的区别

下表总结了浅拷贝和深拷贝之间的主要区别：

特征	浅拷贝	深拷贝
复制方式	复制引用	复制实际值
共享引用	是	否
嵌套对象	引用嵌套对象	复制嵌套对象
性能	更快	更慢
用例	当您只需要复制对象的基本属性时	当您需要复制对象的所有属性，包括嵌套对象的属性时