前端面试题11（浅谈JavaScript深拷贝与浅拷贝）

在这里插入图片描述
在JavaScript中，数据的复制可以分为浅拷贝（Shallow Copy）和深拷贝（Deep Copy）。这两种拷贝方式主要区别在于如何处理对象中的嵌套对象。下面我会详细解释这两者的概念、区别，并提供相应的实现代码。

浅拷贝

浅拷贝是指创建一个新的对象，这个新对象的属性值是原对象属性值的引用（对于原始类型如字符串、数字、布尔值等是值的拷贝，而对于对象、数组等复杂类型则是引用的拷贝）。如果原对象的某个属性是一个对象，那么浅拷贝得到的新对象对应的属性将指向原对象中该属性所指向的对象的内存地址，也就是说拷贝得到的是同一个对象的引用。

实现浅拷贝的方法：

Object.assign()

javascript">const obj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, obj);

Spread Operator (扩展运算符)

javascript">const obj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj };

深拷贝

深拷贝则是递归地拷贝原对象的所有层级，直到遇到不可遍历的值（如基本类型）。这意味着，无论对象的嵌套层次多深，深拷贝都会创建一个全新的对象，拥有与原对象相同内容但完全不同内存地址的副本，包括所有子对象也会被拷贝。

实现深拷贝的方法：

JSON.parse() 和 JSON.stringify()
注意这种方法对于函数、undefined、循环引用等情况不适用。

javascript">const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));

递归实现
这种方法可以处理更多复杂情况，如函数、日期对象等。

javascript">function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);
  
  let cloneObj = new obj.constructor();
  hash.set(obj, cloneObj);
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}

const obj = { a: 1, b: { c: 2 }, d: new Date() };
const deepCopy = deepClone(obj);