js 深拷贝、浅拷贝深度解析

赋值操作:

javascript 复制代码
    let obj={
      a:1,
      b:[1,2,3],
      c:{
        m:2
      }
    }
    let newObj=obj
    newObj.a=2
    newObj.b.push(4)
    newObj.c.m=3
    console.log(obj,newObj);

将一个对象赋值给一个变量,其实就是将这个对象在栈内存中的引用地址复制给了这个变量,这两个对象指向堆内存中的同一个数据引用,所以,其中一个对象的值发生变化,另一个都会跟着变化。

浅拷贝的实现方法:

  1. Object.assign()

  2. Array.prototype.concat()

  3. Array.prototype.slice()

  4. 对象和数组的扩展运算符:{...obj},[...arr]

javascript 复制代码
    let obj={
      a:1,
      b:[1,2,3],
      c:{
        m:2
      },
    }
    const newObj={...obj}
    obj.a=3
    obj.b.push(4)
    console.log(obj,newObj);

浅拷贝会在堆内存中开辟新的空间。浅拷贝只复制对象的第一层属性值,如果属性值是基本类型(如数字、字符串、布尔值),则直接复制其值;如果属性值是引用类型(如数组、对象),则复制其引用地址,而不是创建一个新的对象或数组。因此,浅拷贝后的对象和原对象共享相同的引用类型的属性值,修改其中一个对象的这些属性值会影响到另一个对象。

深拷贝实现方法:

  1. JSON.parse(JSON.stringify())
javascript 复制代码
    let obj={
      a:1,
      b:[1,2,3],
      c:{
        m:2
      }
    }
    let newObj=JSON.parse(JSON.stringify(obj))
    newObj.a=2
    newObj.b.push(4)
    newObj.c.m=3
    console.log(obj,newObj);// 输出结果 obj的数据没有变化
javascript 复制代码
    let obj={
      a:null,
      b:[1,2,3],
      c:undefined,
      fn:()=>{console.log(123);}
    }
    let newObj=JSON.parse(JSON.stringify(obj))
    newObj.b.push(4)
    console.log(obj,newObj);

JSON.parse(JSON.stringify()) 可以实现深拷贝,缺点是,如果对象或数组中有函数或undefined,就会丢失。

  1. 封装深拷贝函数
javascript 复制代码
    let obj={
      a:1,
      b:[1,2,3],
      c:{
        m:2
      },
      k:undefined,
      g:null,
      fn:()=>{console.log(123);}
    }
    function deepCloneFunc(obj) {
      if(typeof obj !=='object') return obj
      const newObj=obj instanceof Array?[]:{}
      for(let key in obj){
        if(obj.hasOwnProperty(key)){
          const value = obj[key]
          newObj[key]=typeof value ==='object'?deepCloneFunc(value):value
        }
      }
      return newObj
    }
    const newObj=deepCloneFunc(obj)
    console.log(newObj);

深拷贝其实就是在堆内存中重新开辟了一块内存,创建了一个新的对象,这个对象和被拷贝的对象用于相同的属性和值,他们两个在栈内存中的引用地址也不一样,是相互独立的,因此修改任何一个对象的值,另一个都不会跟着变化。

相关推荐
遂心_13 分钟前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ34 分钟前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
程序员鱼皮1 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort2 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手2 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码2 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码2 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高0072 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴2 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong2 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript