JavaScript 中对象的深拷贝

JavaScript 中对象的深拷贝是一个非常常见且实用的问题。对象的深拷贝是指在拷贝对象时，同时也将其内部所有子对象进行拷贝，而不仅仅是拷贝对象本身。

通常我们在进行拷贝时会用到 JSON 序列化，也可以使用递归等方式进行深拷贝。

下面将通过以下步骤来讲解对象的深拷贝：

1. 判断其类型

在进行深拷贝时，首先要判断要拷贝的对象是什么类型。其中分为两种情况：

• 要拷贝的是基础类型：不需要进行深拷贝，可以进行浅拷贝。
• 要拷贝的是对象类型：需要进行深拷贝。

判断方法如下：

function isObject(obj) {
  return typeof obj === 'object' && obj !== null;
}

2. 使用递归进行深拷贝

递归是进行深拷贝的一种常用方式。它通过遍历对象内部所有属性，并递归调用深拷贝函数，实现对整个对象的深度拷贝。

代码实例：

function deepClone(source) {
  if (!isObject(source)) {
    return source;
  }

  let target = Array.isArray(source) ? [] : {};

  for (let key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (isObject(source[key])) {
        target[key] = deepClone(source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }

  return target;
}

示例

下面给出两个示例，来说明对象的深拷贝：

// 示例一
const originalObj = {
  a: 'hello',
  b: {
    c: 'world'
  }
};

// 对 originalObj 进行深拷贝
const newObj = deepClone(originalObj);

// 修改拷贝后的 newObj
newObj.a = 'hi';
newObj.b.c = 'everybody';

// 输出结果
console.log(originalObj); // 输出 {a: "hello", b: {c: "world"}}
console.log(newObj); // 输出 {a: "hi", b: {c: "everybody"}}


// 示例二
const originalArr = [1, {a: 2}, [3, 4]];

// 对 originalArr 进行深拷贝
const newArr = deepClone(originalArr);

// 修改拷贝后的 newArr
newArr[0] = 10;
newArr[1].a = 20;
newArr[2][0] = 30;

// 输出结果
console.log(originalArr); // 输出 [1, {a: 2}, [3, 4]]
console.log(newArr); // 输出 [10, {a: 20}, [30, 4]]

可以看到，在两个示例中，深拷贝函数成功地将原始对象进行了拷贝，并且新对象与原始对象互不影响。

通过以上两个示例，可以看出对象深拷贝的实现方法及其重要性。