深拷贝实现：如何在 JavaScript 中克隆对象

---

🧑‍💻 深拷贝实现：如何在 JavaScript 中克隆对象

在 JavaScript 中，我们经常需要将一个对象的所有数据复制到另一个对象中。这种操作可以分为 浅拷贝 和 深拷贝。而深拷贝则是指完全复制一个对象及其所有嵌套的对象，而不仅仅是对象的引用。

今天，我们将深入探讨深拷贝的概念，以及如何使用不同的方法实现深拷贝。让我们一起看看如何优雅地复制复杂对象吧！🎉

🧐 1. 什么是深拷贝？

深拷贝（Deep Copy）是指创建一个新的对象，并且递归地复制原对象及其所有嵌套的子对象。这样，原对象和新对象之间就没有任何共享的引用，即修改新对象的属性不会影响原对象。

相对而言，浅拷贝（Shallow Copy）只是创建一个新对象，但只复制对象的第一层属性。如果原对象中某些属性是引用类型（例如数组或对象），那么拷贝的新对象和原对象中的这些属性仍然指向相同的内存地址（即引用相同的对象）。

深拷贝 vs 浅拷贝

特性	浅拷贝	深拷贝
复制层级	仅复制第一层属性	递归复制所有层级的属性
引用类型属性	引用类型属性复制的是地址，即共享同一内存区域	引用类型属性被完全复制，不再共享内存区域
修改后效果	修改浅拷贝对象中的引用类型属性会影响原对象	修改深拷贝对象中的引用类型属性不会影响原对象

🧠 2. 为什么要使用深拷贝？

我们使用深拷贝通常是为了确保复制的对象是完全独立的，即不受原对象的影响。常见的使用场景包括：

• 在修改对象时，避免影响原对象。
• 在保存对象的备份时，确保原对象和备份对象之间没有相互影响。
• 在处理复杂的数据结构（如嵌套对象或数组）时，避免对原始数据的意外修改。

⚡ 3. 深拷贝的实现方法

3.1 使用 JSON.parse() 和 JSON.stringify()

JSON.parse() 和 JSON.stringify() 是一种常见的深拷贝方法。它们通过将对象转换为字符串，然后再将字符串转换回对象的方式实现拷贝。

示例：使用 JSON.parse() 和 JSON.stringify()

const original = {
  name: "Alice",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  }
};

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

// 修改深拷贝对象
deepCopy.address.city = "Los Angeles";

console.log(original.address.city); // 输出：New York
console.log(deepCopy.address.city); // 输出：Los Angeles

这种方法非常简单，能够有效地复制大部分对象，但有一些限制：

• 不能拷贝函数、undefined、Symbol、RegExp 等特殊对象。
• 会丢失对象的 prototype。
• 不能处理循环引用的对象。

3.2 使用递归实现深拷贝

我们可以手动实现一个深拷贝函数，通过递归的方式遍历对象的每一层，复制每一层的属性。这个方法比较灵活，能处理大多数场景。

示例：递归实现深拷贝

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj; // 如果是基本类型，直接返回
  }

  let copy;
  if (Array.isArray(obj)) {
    copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepClone(obj[i]); // 递归复制数组元素
    }
  } else {
    copy = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepClone(obj[key]); // 递归复制对象属性
      }
    }
  }

  return copy;
}

const original = {
  name: "Alice",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  },
  hobbies: ["Reading", "Traveling"]
};

const deepCopy = deepClone(original);

// 修改深拷贝对象
deepCopy.address.city = "Los Angeles";
deepCopy.hobbies[0] = "Writing";

console.log(original.address.city); // 输出：New York
console.log(original.hobbies[0]);  // 输出：Reading
console.log(deepCopy.address.city); // 输出：Los Angeles
console.log(deepCopy.hobbies[0]);  // 输出：Writing

这个实现能够递归地处理对象和数组，也能处理嵌套的对象和数组。每个属性都会被复制，并且没有共享引用。

3.3 使用 structuredClone() (现代浏览器)

在现代 JavaScript 环境中，structuredClone() 方法是一个非常方便的深拷贝工具。它是浏览器提供的原生方法，可以克隆对象并保留原对象中的循环引用、Date、Map、Set 等特殊对象。

示例：使用 structuredClone()

const original = {
  name: "Alice",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  },
  hobbies: ["Reading", "Traveling"]
};

const deepCopy = structuredClone(original);

// 修改深拷贝对象
deepCopy.address.city = "Los Angeles";
deepCopy.hobbies[0] = "Writing";

console.log(original.address.city); // 输出：New York
console.log(original.hobbies[0]);  // 输出：Reading
console.log(deepCopy.address.city); // 输出：Los Angeles
console.log(deepCopy.hobbies[0]);  // 输出：Writing

structuredClone() 不仅可以处理对象、数组，还能处理更多类型的对象，如 Map、Set 和 ArrayBuffer，并且支持循环引用。

3.4 使用第三方库（如 Lodash）

Lodash 提供了一个功能强大的深拷贝方法 _.cloneDeep()，它能够处理更多类型的对象，并且是一个非常稳定的实现。对于复杂应用，使用 Lodash 会更加简便和高效。

示例：使用 Lodash 的 _.cloneDeep()

// 需要引入 Lodash 库
const _ = require('lodash');

const original = {
  name: "Alice",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  },
  hobbies: ["Reading", "Traveling"]
};

const deepCopy = _.cloneDeep(original);

// 修改深拷贝对象
deepCopy.address.city = "Los Angeles";
deepCopy.hobbies[0] = "Writing";

console.log(original.address.city); // 输出：New York
console.log(original.hobbies[0]);  // 输出：Reading
console.log(deepCopy.address.city); // 输出：Los Angeles
console.log(deepCopy.hobbies[0]);  // 输出：Writing

Lodash 的 cloneDeep() 函数可以处理复杂的对象，包括嵌套的对象、数组、Map、Set 等，且避免了我们手动实现深拷贝时可能遇到的坑。

⚠️ 4. 深拷贝的限制

虽然深拷贝非常有用，但它也有一些限制和性能问题：

• 性能开销：深拷贝需要递归遍历所有属性，尤其是在对象层级较深或者属性较多时，会导致性能下降。
• 无法复制一些特殊对象：如 function、undefined、RegExp、Symbol 等，这些需要额外处理。
• 循环引用：有些深拷贝方法（如 JSON.parse()）无法处理循环引用，而需要通过特殊的技巧来避免死循环。

🏁 5. 总结

深拷贝是克隆 JavaScript 对象时的一个重要技术，它能够确保新对象与原对象完全独立。在实现深拷贝时，我们可以选择使用简单的 JSON 方法、递归方法、现代 API structuredClone()，或者使用强大的第三方库（如 Lodash）。

深拷贝的核心思想是递归地复制对象的每一层，并确保没有共享引用。掌握深拷贝的实现可以帮助你更好地管理复杂的数据结构，避免不必要的副作用。