JavaScript：深拷贝和浅拷贝的奥秘

2023-10-21 08:15:34

导言

在 JavaScript 的浩瀚世界中，数据克隆是一个至关重要的概念。它允许我们创建现有数据结构的副本，而无需修改原始数据。JavaScript 中有两种主要的数据克隆方法：浅拷贝和深拷贝。了解它们之间的区别对于编写健壮且可维护的代码至关重要。

浅拷贝

浅拷贝创建一个新变量或对象，它指向原始变量或对象的相同内存地址。这意味着对新变量或对象的任何更改也会反映在原始变量或对象上。

实现方式：

对象浅拷贝：const newObject = oldObject;
数组浅拷贝：const newArray = oldArray;

深拷贝

深拷贝创建一个新变量或对象，它具有与原始变量或对象完全相同的值，但存储在不同的内存地址中。这意味着对新变量或对象的任何更改都不会影响原始变量或对象。

实现方式：

对象深拷贝：
- 使用 JSON.parse(JSON.stringify(obj))： 将对象转换为 JSON 字符串，然后再将其解析回一个新对象。
- 使用递归： 遍历对象并为每个属性创建新副本。
数组深拷贝：
- 使用 map() 方法： 为数组中的每个元素创建一个新副本。
- 使用 concat() 方法： 将数组与自身的一个空副本合并，创建一个新数组。

示例

浅拷贝：

const originalObject = {
  name: 'John Doe',
  age: 30
};

const shallowCopy = originalObject;

shallowCopy.age = 35;

console.log(originalObject.age); // 输出：35

在这种情况下，shallowCopy 只是指向 originalObject 的另一个引用。因此，对 shallowCopy 所做的任何更改也会反映在 originalObject 中。

深拷贝：

const originalObject = {
  name: 'John Doe',
  age: 30
};

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

deepCopy.age = 35;

console.log(originalObject.age); // 输出：30