JavaScript 深拷贝 (DeepClone) 详解

什么是深拷贝？

深拷贝指的是将一个对象完整地复制到另一个对象中，新对象不仅包含了原对象的所有属性和方法，还包含了原对象引用的所有对象，也就是说，完全重新创建了一个新的对象。

为什么需要深拷贝？

在 JavaScript 中，对象是通过引用类型存储的，多个变量可能会引用同一个对象，这样在修改其中一个变量时，可能会影响到其他引用该对象的变量，而深拷贝可以避免这种问题。

如何实现深拷贝？

以下是几种常见的实现深拷贝的方法。

方法一：使用 JSON 解析和序列化

使用 JSON 的 stringify() 方法将对象转化为字符串，再使用 parse() 方法将字符串转化为新的对象。这种方法在大部分情况下都能够正常工作，但是有一些特殊类型的对象，如函数、正则表达式等，就无法转化，因此不适用于所有情况。

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

方法二：递归拷贝对象

使用递归的方式遍历对象和数组，复制每个属性。递归的过程中，需要判断当前属性是否是引用类型，如果是则继续递归拷贝，如果不是则直接赋值。

function deepClone(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  const newObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]);
    }
  }
  return newObj;
}

方法三：使用第三方库

除了手动实现深拷贝外，也可以使用第三方库来实现深拷贝，例如 lodash 提供了 cloneDeep() 方法，可以深度拷贝对象。使用第三方库的好处是代码更少，更易维护。

import cloneDeep from 'lodash/cloneDeep';

const obj = { foo: 'bar', arr: [{ a: 'b' }] };
const clonedObj = cloneDeep(obj);
console.log(clonedObj);

示例说明

示例一：深拷贝对象

const obj = {
  name: "张三",
  age: 24,
  skills: ["JavaScript", "CSS", "HTML"],
  education: {
    school: "清华大学",
    major: "计算机科学与技术",
  },
};

const clonedObj = deepClone(obj);
console.log(clonedObj);

运行以上代码，控制台打印结果为：

{
  name: "张三",
  age: 24,
  skills: ["JavaScript", "CSS", "HTML"],
  education: {
    school: "清华大学",
    major: "计算机科学与技术",
  },
}

示例二：深拷贝数组

const arr = [
  {
    id: 1,
    name: "张三",
    age: 24,
  },
  {
    id: 2,
    name: "李四",
    age: 25,
  },
];

const clonedArr = deepClone(arr);
console.log(clonedArr);