JavaScript浅层克隆与深度克隆示例详解

下面是详细讲解“JavaScript浅层克隆与深度克隆示例详解”的完整攻略。

什么是克隆？

在 JavaScript 中，克隆是指将一个对象（或数组）的所有属性（或元素）复制到另一个对象（或数组）中。克隆的主要目的是防止对原对象的修改影响到其他对象。在一些特定的场景下，克隆还可以用于混淆对象结构以保证数据的安全性。

JavaScript 中的克隆分为两种：浅层克隆和深度克隆。

浅层克隆

浅层克隆是指将原对象的所有属性复制到新对象中，但是如果原对象属性的值是对象或数组，则只是复制了它的引用。这意味着当原对象属性的值对象被修改时，克隆对象对应属性的值也会发生变化。

以下是一个浅层克隆的示例：

let obj1 = {
  name: 'Jane',
  age: 20,
  address: {
    city: 'Beijing',
    district: 'Haidian'
  }
};

let obj2 = Object.assign({}, obj1);

在这个示例中，Object.assign 方法将 obj1 的所有属性复制到一个新的对象 obj2 中。现在我们来修改 obj1.address.city 的值，然后查看 obj2：

obj1.address.city = 'Shanghai';

console.log(obj2.address.city); // 输出 'Shanghai'

可以发现，当我们修改 obj1.address.city 的值时，obj2.address.city 的值也随之修改了。这是因为浅层克隆只复制了 obj1.address 对象的引用，而不是这个对象本身。

深度克隆

深度克隆与浅层克隆最大的不同在于，它会递归地复制原对象的所有属性，包括属性值是对象或数组的情况，直到所有属性的值都不是对象或数组为止。这样，即使修改原对象属性值的引用，克隆对象对应属性的值也不会发生变化。

以下是一个深度克隆的示例：

function deepClone(obj) {
  let newObj = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      newObj[key] = deepClone(obj[key]);
    } else {
      newObj[key] = obj[key];
    }
  }

  return newObj;
}

let obj1 = {
  name: 'Jane',
  age: 20,
  address: {
    city: 'Beijing',
    district: 'Haidian'
  }
};

let obj2 = deepClone(obj1);

在这个示例中，我们自定义了一个 deepClone 函数，使用递归的方式深度复制了 obj1 对象，并将结果保存在一个新的对象 obj2 中。现在我们来修改 obj1.address.city 的值，然后查看 obj2：

obj1.address.city = 'Shanghai';

console.log(obj2.address.city); // 输出 'Beijing'

可以发现，当我们修改 obj1.address.city 的值时，obj2.address.city 的值没有随之修改。这是因为深度克隆递归地复制了 obj1.address 对象，而不是这个对象的引用。

结语

以上就是 JavaScript 浅层克隆与深度克隆的详细介绍，希望能对您有所帮助。值得注意的是，深度克隆递归地复制对象结构可能会导致性能问题和内存溢出，因此在实际应用中需要根据具体情况选择合适的克隆方式。