Javascript深拷贝与浅拷贝的原理和实现指南

前端

2024-01-01 12:37:40

简介

当我们对JavaScript对象进行赋值操作时，如果只是简单的=赋值，那么实际上只是复制了对象的引用，并没有复制对象本身。这意味着，对副本的任何修改都会影响到原对象，这就是浅拷贝。

如果我们要复制对象本身，而不是仅仅复制对象的引用，那么就需要使用深拷贝。深拷贝会创建原对象的一个完全独立的副本，对副本的任何修改都不会影响到原对象。

浅拷贝与深拷贝的区别

浅拷贝只复制对象的引用，而深拷贝则复制对象本身。
浅拷贝不会创建新对象，而深拷贝会创建新对象。
浅拷贝对副本的修改会影响到原对象，而深拷贝对副本的修改不会影响到原对象。

浅拷贝的实现

实现浅拷贝的代码非常简单，我们只需要使用=赋值运算符即可。例如：

const obj1 = {
  name: 'John Doe',
  age: 30
};

const obj2 = obj1;

obj2.name = 'Jane Doe';

console.log(obj1); // { name: 'Jane Doe', age: 30 }

在这个例子中，我们使用=赋值运算符将obj1赋值给了obj2。这只是复制了obj1的引用，并没有复制obj1本身。因此，当我们修改obj2的name属性时，obj1的name属性也会被修改。

深拷贝的实现

实现深拷贝的代码就比较复杂了，我们需要遍历原对象的所有属性，并将每个属性的值复制到副本中。我们可以使用递归的方式来实现深拷贝，代码如下：

const deepCopy = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map((item) => deepCopy(item));
  }

  const copy = {};

  for (const key in obj) {
    copy[key] = deepCopy(obj[key]);
  }

  return copy;
};

在这个例子中，我们使用了一个递归函数deepCopy来实现深拷贝。函数首先检查对象的类型，如果是基本类型（如字符串、数字、布尔值等），则直接返回该值。如果是数组，则使用map()方法对数组中的每个元素进行深拷贝，然后返回一个新的数组。如果是对象，则使用for...in循环遍历对象的所有属性，并将每个属性的值复制到副本中。最后返回副本。