js 深拷贝对象|极客笔记

js 深拷贝对象

在JavaScript中，有时我们需要复制一个对象并且确保这个复制的对象是独立于原始对象的，即对复制对象的修改不会影响到原始对象。这就涉及到了对象的深拷贝。

什么是深拷贝？

深拷贝是指在复制一个对象的同时，递归地复制其所有的子对象，以确保复制后的对象与原始对象完全独立，互不影响。

与深拷贝相对的是浅拷贝，浅拷贝只复制对象本身的值，而不包括子对象。

深拷贝的应用场景

在实际开发中，深拷贝对象通常用于以下情况：

当需要对一个对象进行修改，但又不希望影响到原始对象时；
当需要比较两个对象的值是否相等时，避免因引用关系导致错误的结果。

实现深拷贝的方法

方法一：递归复制对象

递归复制对象是一种常见的实现深拷贝的方法，它通过递归地复制对象及其所有子对象来达到深拷贝的效果。

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;
}

// 测试
let obj1 = {
  name: 'Alice',
  age: 20,
  skills: ['JavaScript', 'HTML', 'CSS'],
  details: {
    address: '123 Street',
    phone: '123-456-7890'
  }
};

let obj2 = deepClone(obj1);

obj2.name = 'Bob';
obj2.skills.push('React');

console.log(obj1);
console.log(obj2);

运行上面的代码，可以看到obj1和obj2是完全独立的对象，修改obj2并不会影响到obj1。

方法二：利用JSON序列化和反序列化

另一种实现深拷贝的方法是利用JSON的序列化和反序列化功能。

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

// 测试
let obj1 = {
  name: 'Alice',
  age: 20,
  skills: ['JavaScript', 'HTML', 'CSS'],
  details: {
    address: '123 Street',
    phone: '123-456-7890'
  }
};

let obj2 = deepClone(obj1);

obj2.name = 'Bob';
obj2.skills.push('React');

console.log(obj1);
console.log(obj2);

需要注意的是，利用JSON序列化和反序列化的方法虽然简单，但有一些局限性：