前端面试系列【003】 - 深拷贝详解：与浅拷贝的异同与实现方法

2024-01-16 01:11:54

前端面试中，拷贝是一个经常被问到的问题。其中，深拷贝 和浅拷贝 更是面试官考察重点。那么，什么是深拷贝和浅拷贝？两者之间有什么区别？本篇文章将深入浅出地为你讲解这些概念，让你在前端面试中游刃有余。

浅拷贝与深拷贝

在 JavaScript 中，变量主要分为两类：基础类型 和引用类型 。基础类型的值直接存储在变量中，而引用类型的值存储的是对象的地址。

浅拷贝 ：当对一个引用类型的变量进行浅拷贝时，只是复制了该变量指向的对象的地址。也就是说，浅拷贝后的两个变量指向了同一个对象。

深拷贝 ：当对一个引用类型的变量进行深拷贝时，不仅复制了该变量指向的对象的地址，还复制了对象本身及其所有属性的值。也就是说，深拷贝后的两个变量指向了不同的对象，这两个对象具有相同的数据。

深拷贝与浅拷贝的区别

特点	浅拷贝	深拷贝
操作方式	复制引用	复制值
指向对象	同一个对象	不同的对象
内存占用	小	大
修改影响	相互影响	互不影响

手动实现深拷贝

可以使用递归的方式来实现深拷贝。递归函数会遍历对象的所有属性，如果属性的值是引用类型，则继续递归复制该属性的值。

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

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

  const newObj = {};
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }

  return newObj;
}