如何在 JavaScript 中深克隆一个对象？

在 JavaScript 中，复制一个对象有两种方法：浅复制和深复制。浅复制只复制对象的引用，而深复制则复制对象本身和其内部的所有对象。本文将介绍如何使用深克隆来复制 JavaScript 中的对象。

方法一：使用 JSON.stringify() 和 JSON.parse()

最简单的方法是将对象序列化为字符串，然后将其反序列化为新对象。这个过程会创建一个新对象，其中包含原始对象的副本。可以使用 JSON.stringify() 和 JSON.parse() 函数来实现此目的。

const obj = {name: 'John', age: 30, hobbies: ['reading', 'traveling']};

// 使用 JSON.stringify() 和 JSON.parse() 进行深拷贝
const newObj = JSON.parse(JSON.stringify(obj));

// 修改原始对象
obj.hobbies.push('cooking');

// 输出结果
console.log(obj);      // {name: 'John', age: 30, hobbies: ['reading', 'traveling', 'cooking']}
console.log(newObj);   // {name: 'John', age: 30, hobbies: ['reading', 'traveling']}

但是，这种方法也有一些限制。例如，如果待复制的对象中包含函数、undefined 或 Symbol 类型，JSON.stringify() 会将它们忽略掉。

方法二：使用递归函数

另一种方法是编写一个递归函数，该函数可以遍历对象的所有属性，然后为每个属性创建一个新副本。

这是一个简单的递归函数的示例：

function deepClone(obj) {  
  let clone = {};  
  for (let i in obj) {
    if (typeof obj[i] == 'object') {
      clone[i] = deepClone(obj[i]);   // 如果是对象，递归调用
    } else {
      clone[i] = obj[i];             // 否则直接赋值
    }
  }
  return clone;  
}

const obj = {name: 'John', age: 30, hobbies: ['reading', 'traveling']};

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

// 修改原始对象
obj.hobbies.push('cooking');

// 输出结果
console.log(obj);      // {name: 'John', age: 30, hobbies: ['reading', 'traveling', 'cooking']}
console.log(newObj);   // {name: 'John', age: 30, hobbies: ['reading', 'traveling']}

这个函数递归地复制对象的属性，并为每个属性创建一个新的副本。由于递归需要耗费大量的时间和内存，因此不适用于大型或高嵌套的对象。

结论

以上是两种克隆对象的方法，它们各有优点和局限性。选择哪种方法取决于你的需求和数据的规模。无论你选择哪种方法，请记住，深复制创建的是一个新对象，而不是使用现有对象的引用。