深拷贝和浅拷贝

最新推荐文章于 2024-08-19 20:47:25 发布

pick豆子

最新推荐文章于 2024-08-19 20:47:25 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/qq_42964711/article/details/105942385

版权

深拷贝和浅拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用。
深拷贝拷贝多层，每一级数据都会拷贝。

浅拷贝：

在这里插入图片描述

造成的问题

把深层次的地址拷贝给了赋值对象。赋值对象更改深层次属性时，原对象也会发生改变。
原理：俩个对象指向同一块区域，共享属性

     <script>
         var obj={
             id:1,
             name:'andy',
             msg:{
                 age:18
             }
         };
         var o={};
         for(var k in obj){
             //k是属性名 obj[k]属性值
             o[k]=obj[k];
         }
         o.msg.age=20;
         console.log(o.msg.age);//20
         console.log(obj.msg.age);//20
     </script>

浅拷贝方式。把obj浅拷贝给o

 Object.assign(o,obj);

深拷贝

在这里插入图片描述

把深层次的地址拷贝给了赋值对象。赋值对象更改深层次属性时，原对象不会发生改变。
原理：赋值对象开辟了一个新的空间，指向了新的空间。

<body>
     <script>
         var obj={
             id:1,
             name:'andy',
             msg:{
                 age:18
             },
             color:['pink','red']
         };
         var o={};
         function deepCopy(newobj,oldobj){
             for(var k in oldobj){
                //判断属性属于简单还是复杂数据类型
               //1.获取属性值 oldobj[k]
               var item=oldobj[k];
               //2.判断这个值是不是数组
               if(item instanceof Array){
                 newobj[k]=[];
                 //等于o.color=[]，下一层;
                 deepCopy(newobj[k],item);
               }else if(item instanceof Object){
                  //3.判断是否为对象
                  newobj[k]={};
                  deepCopy(newobj[k],item);
               }else{
                 //4.判断是否为简单数据类型
                 //进行赋值
                 newobj[k]=item;
               }           
             }
         }
         deepCopy(o,obj);
         console.log(o);
  </script>