【前端基础】深拷贝与浅拷贝

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

区别

浅拷贝：

创建一个新的对象，这个对象有着原始对象属性值得一份精确拷贝，如果属性是基本类型，拷贝的就是值，如果是引用类型，拷贝的是内存地址，原值发生改变，拷贝的值也会相应的改变

深拷贝：

将对象完整的拷贝出来，在内存中开辟了存储空间存放新的对象，修改新对象不会影响原对象

深拷贝实现

常见深拷贝方式： JSON.stringify（）与JSON.parse()配合使用

const obj = {};
JSON.parse(JSON.stringify(obj))

这个方法可以应对大部分场景，但是如果属性是函数、或者循环引用的情况就不适用了

当然面试时一般会让你手撕一个深拷贝的方法，核心就是用到递归，简易版实现

function deepClone(target, map= new map()){
  if(typeof target === 'object'){
    // 考虑数组的情况与循环引用情况
    const cloneObj = Array.isArray(target) ? [] : {};
    if(map.get(target)){
      return map.get(target);
    }
    map.set(target, cloneObj);
    for (const key in target){
      cloneObj[key] = deepClone(target[key], map);
    }
    return cloneObj;
  }else{
    return target;
  }
}

参考文章： juejin.cn/post/684490… 关于深拷贝涉及到很多知识点，值得深入学习研究