JS引用类型深度拷贝浅拷贝

今天遇到一个拷贝JS引用类型的例题,把A拷贝到B,在B或A中修改值不会影响对方的数据,在考虑这个问题时首先涉及JS的变量类型,分为基本类型值和引用类型值。JS基本类型值和引用类型拷贝时情况是不同的,首先基本类型有以下5种:Undefined,Null,Boolean,Number和String,而引用类型值指那些可能由多个值构成的对象,比如数组,对象等,实践了一下,代码及结果如下:
1 对JS基本值类型拷贝(也就是赋值)代码如下:

var c = 3;
var d = c;
console.log(c)//->3;
console.log(d)//->3;
d = 4;
console.log(c)//->3;
console.log(d)//->4;

小结:值类型赋值,原变量和拷贝变量有明确区分,两边的值在各自改变时不影响另外一个。

2 对JS引用值数组的浅拷贝代码如下:

function arrayClone(array){//浅克隆函数实现
            var temp = new Array();
            temp = array;
            return temp;
        }

        var array1 = [1,2,3,4,5];//观察未修改初始值
        var array2 = arrayClone(array1);
        console.log(array1[0]);//->1
        console.log(array2[0]);//->1

        array1[0] = 9;//查看修改原变量后两数组变化
        console.log(array1[0]);//->9
        console.log(array2[0]);//->9

        array2[0] = 8;//查看修改拷贝值后两数组变化
        console.log(array1[0]);//->8
        console.log(array2[0]);//->8

小结:在引用类型进行直接赋值方式的拷贝完成后,两个变量是相互联系的,一个改变,另一个也会跟着改变。

2 对JS引用值类型的深拷贝:

function test(src){//引用值深拷贝实现函数
            var cc = new Array();
            for(var i=0; i<src.length; i++){
                cc.push(src[i]);
            }
            return cc;
        }
        var array1 = [1,2,3,4,5];
        var array2 = test(array1);
        console.log(array1[0]);//->1
        console.log(array2[0]);//->1

        array1[0] = 9;//查看修改原变量后两数组变化
        console.log(array1[0]);//->9
        console.log(array2[0]);//->1

        array2[0] = 8;//查看修改拷贝值后两数组变化
        console.log(array1[0]);//->9
        console.log(array2[0]);//->8

小结:使用遍历赋值的深拷贝后,引用类型变量各不牵扯,没有浅拷贝中一个改变另一个随之改变的现象。

不太熟悉JS值类型和引用类型的同学现在可能有点困惑,同样是等号赋值,值类型和引用类型呈现的结果却并不相同,为什么?
javascript和其他语言不同,其不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间,那我们操作的是什么呢?实际上,是操作对象的引用,所以引用类型的值是按引用访问的。当从一个变量向另一个变量复制引用类型的值时,同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是,这个值的副本实际上是一个指针,而这个指针指向存储在堆中的一个对象,复制操作结束后,两个变量实际上将引用同一个对象,因此改变其中一个变量,就会影响另一个变量。示例图如下:
这里写图片描述
所以在浅拷贝的情况不能满足我们的某些需求,这就需要深拷贝,深拷贝定义一个引用类型对象,然后再遍历原对象对新定义的对象进行赋值,这样在得到我们需要数据的同时,又不会影响后来的操作。两个各有其优点,视情况使用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值