js 浅拷贝 深拷贝

概念
浅拷贝
只把复杂类型数据的第一层做复制操作,深层次数据依然会相互影响
Object.assign( 新对象, 老对象)
把老对象第一层的数据拷贝一份给新对象,深层次的数据新、老对象依然会相互影响

深拷贝
把复杂类型数据中包含的所有数据都做复制操作,赋值之后不会相互影响

浅拷贝
如果是简单数据类型,改变值,另一个不会变,
如果是复杂数据类型,它是一个对象或者数组,里面存储空间是通过它的地址(在一个空间里),如果更改值,另外一个也会改变

   // 浅拷贝只拷贝一层,更深层次对象级别的只拷贝引用
   
   // 深拷贝拷贝多层,每一级别的数据都会拷贝
        var obj = {
            id: "1",//简单数据类型
            name: "andy", //简单数据类型
            msg: {  //复杂数据类型
                age: 18
            }
        }
        var o = {};
        // for (var k in obj) {
        //     // k 是属性名   obj[k] 属性值
        //     o[k] = obj[k];
        // }
        // console.log(o);
        // o.msg.age = 20;
        // console.log(obj);

        console.log('----------------');
        // Object.assign('新对象','旧对象')
        Object.assign(o, obj); //语法糖
        console.log(o);
        o.msg.age = 20;
        console.log(obj);
//深拷贝
深拷贝拷贝多层,每一级别的数据都会拷贝
// 封装一个函数接收新数组和旧数组的数据
     function deepCopy(newobj, oldobj) {
         //遍历拿到旧数组的数据
        for (var k in oldobj) {
          //申明变量接收它的属性值
          var item = oldobj[k];
          // 判断下旧的属性值是不是数组
          if (item instanceof Array) {
         //如果是就把旧数组的值传入新数组
              newobj[k] = [];
             deepCopy(newobj[k], item);
         // 判断下旧的属性值是不是一个函数
      } else if (item instanceof Function) {
         //如果是就把旧函数值的值传入新的函数
              newobj[k] = item;
            // 判断下旧的属性值是不是一个对象
      }else if (item instanceof Object) {
            //如果是就把旧对象值的值传入新对象
                newobj[k] = {};
                deepCopy(newobj[k], item);
          //最后把旧的简单数据类型的值给新对象
            } else {               
                newobj[k] = item;
             }
           }
        }
         deepCopy(o, obj);
         console.log(o);

         var arr = [];
         console.log(arr instanceof Array);
         o.msg.age = 20;
        console.log(obj);
//注意 数组判断必须写到对象的前面,因为数组它也是一个对象,如果在后面,会跟对象判断重合

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅拷贝深拷贝是针对JavaScript中的对象属性为对象的情况而言的。浅拷贝只是复制了对象的引用,也就是复制了内存地址,所以拷贝后的对象和原对象共用同一个内存地址,属性改变相互影响。而深拷贝则是创建了一个完全独立的对象,拷贝了所有的属性和属性,所以拷贝后的对象和原对象是完全独立的,互不影响。 在JavaScript中,可以通过不同的方法实现浅拷贝深拷贝浅拷贝可以使用手动实现、Object.assign()和拓展运算符等方法。手动实现的浅拷贝方法是遍历原始对象的属性,将属性赋给新对象。Object.assign()方法可以将一个或多个源对象的属性复制到目标对象中,也可以用于实现浅拷贝。拓展运算符(...)也可以用于实现浅拷贝深拷贝则需要递归地复制对象的属性和属性。可以通过手动实现一个深拷贝函数,在遍历原始对象的属性时,如果属性是对象类型,则递归调用深拷贝函数进行复制。这样可以创建一个完全独立的对象,拷贝了所有的属性和属性。 总结起来,浅拷贝只是复制了对象的引用,而深拷贝是创建了一个完全独立的对象。使用不同的方法可以实现浅拷贝深拷贝,根据具体的需求选择合适的方法进行使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JavaScript深拷贝浅拷贝概念与用法实例分析](https://download.csdn.net/download/weixin_38735570/14820137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [javascript深拷贝浅拷贝](https://blog.csdn.net/weixin_47417033/article/details/124899204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值