Javascript深度克隆

在Javascript中，深度克隆是指创建一个完全独立于原始对象的新对象，并且所有的属性和值都被复制到新对象中。深度克隆非常有用，特别是当我们需要对对象进行修改时，而不想影响原始对象。

什么是深度克隆

当我们创建一个对象，并且其中包含其他对象作为属性时，只克隆顶层对象是不够的。 如果我们只复制引用，那么修改新对象中的属性将同时修改原始对象中的属性。因此，深度克隆是必需的，它确保每个嵌套属性都被完全独立地复制到新对象中。

实现深度克隆的方法

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

这是一种常用的方法，但是有一些限制。使用JSON.stringify()将对象转换为字符串，然后再使用JSON.parse()将字符串转换回对象。这种方法对于大部分简单的Javascript对象都有效，但是不能处理包含函数、正则表达式和特殊类型的对象。

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

2. 使用递归进行深度克隆

递归方法是一种更通用的深度克隆方法，可以处理任何类型的对象，包括函数、正则表达式和特殊类型的对象。

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  let clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  
  return clone;
}

这个递归深度克隆方法会遍历对象的每个属性，并通过递归调用deepClone来克隆嵌套的对象。

使用深度克隆

现在我们可以使用深度克隆方法来创建原始对象的独立副本。以下是一个示例:

const obj1 = {
  name: 'John',
  age: 30,
  hobbies: ['coding', 'reading'],
  address: {
    street: '123 Main St',
    city: 'New York'
  }
};

const obj2 = deepClone(obj1);

// 修改obj2不会影响obj1
obj2.name = 'Jane';
obj2.hobbies.push('writing');
obj2.address.city = 'San Francisco';

console.log(obj1); // { name: 'John', age: 30, hobbies: ['coding', 'reading'], address: { street: '123 Main St', city: 'New York' } }
console.log(obj2); // { name: 'Jane', age: 30, hobbies: ['coding', 'reading', 'writing'], address: { street: '123 Main St', city: 'San Francisco' } }

如上所示，原始对象（obj1）保持不变，而通过深度克隆创建的新对象（obj2）可以独立修改而不会影响原始对象。

总结：深度克隆使我们能够创建一个与原始对象完全独立的新对象，通过使用递归的克隆方法，可以处理任何类型的对象。