object深复制与浅复制

最新推荐文章于 2023-04-16 09:00:00 发布

凌晨独舞

最新推荐文章于 2023-04-16 09:00:00 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： object 深复制

本文链接：https://blog.youkuaiyun.com/Merciwen/article/details/79514629

Javascript 专栏收录该内容

72 篇文章

订阅专栏

本文探讨了JavaScript中对象赋值的问题，介绍了浅复制的概念，并详细解释了三种实现深复制的方法：使用jQuery的$.extend()方法、递归复制以及利用JSON.parse()和JSON.stringify()组合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题由来

Javascript中对一个对象赋值，会存在以下问题

        var obj1 = {
        a: '1',
        b: '2',
        c:{
            d:'3',
            e:'4'
        }
    }
    var obj2 = obj1;
    console.log(obj2.c.d ); //3
    console.log(obj2.c.d === '3'); //true

    obj1.c.d = '33'
    console.log(obj2.c.d ); //33
    console.log(obj2.c.d === '3');//false

当你对一个对象进行赋值操作，其实并没有将这个对象在内存中重新拷贝一份出来，而是将原来内存的指针赋值，也就是说，obj1和obj2 在内存中指向的是同一个地方，那么如果一个发生修改，另一个也会发生变化。这就是浅复制。

那么如果可以复制一个obj 并不和原来的对象相关联那么就叫做深复制

··· 是我自己的理解

怎么进行深复制

我们平时的赋值都是浅复制，那怎么进行深复制呢？

方法一：jquery $.extend() 可以用参数来进行深复制

jQuery.extend第一个参数可以是布尔值，用来设置是否深度拷贝的:
    jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } ); //深复制
    jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } );  //浅复制

方法二：通过递归的方法

        var obj1 = {
            a: '1',
            b: '2',
            c:{
                d:'3',
                e:'4'
            }
        }
      //深复制，要想达到深复制就需要用递归
      function deepCopy(o,c){
        var c = c || {}
        for(var i in o){
        if(typeof o[i] === 'object'){
                  //要考虑深复制问题了
                      if(o[i].constructor === Array){
                        //这是数组
                        c[i] =[]
                    }else{
                        //这是对象
                        c[i] = {}
                    }
                    deepCopy(o[i],c[i])
               }else{
                 c[i] = o[i]
               }
           }
           return c
      }

      var obj2 = {}
      obj2 = deepCopy(obj1,obj2)
      console.dir(obj2)
      obj1.a = '111';
      console.dir(obj1)
      console.dir(obj2)

这里写图片描述

方法三：

var obj2 = JSON.parse(JSON.stringify(obj1))

深复制函数

    var cloneObj = function(obj){
    var str, newobj = obj.constructor === Array ? [] : {};
    if(typeof obj !== 'object'){
        return;
    } else if(window.JSON){
        str = JSON.stringify(obj), 
        newobj = JSON.parse(str); 
    } else {
        for(var i in obj){
            newobj[i] = typeof obj[i] === 'object' ? 
            cloneObj(obj[i]) : obj[i]; 
        }
    }
    return newobj;
};