JavaScript中的浅拷贝与深拷贝

简述

-在面试中经常被问到深拷贝(深复制)和浅拷贝(浅复制),下面就对其进行简单的说明一下。
-浅拷贝:
在使用JavaScript对数组进行操作的时候,如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生。

var arr = ['aa','bb','cc'];
var arr2 = arr;
arr2[0] = '新来的';
console.log(arr);//输出  '新来的','bb','cc'

由此可见对数组arr2进行修改时,而arr内数据也会随之改变。这种直接赋值的方式就是浅拷贝现象。那到底是为什么呢?
因为JavaScript存储对象都是存地址的,所以浅复制会导致 arr 和 arr2 指向同一块内存地址,大概的示意图如下。


所以当修改arr2中的数据时,由于arr也指向此处,所以arr的数据也就被“修改了”。
-深拷贝
一般都是开辟一块新的内存地址,将原对象的各个属性逐个复制出去。如下图所示:


所以当修改arr2中的数据时,由于arr与arr2地址不同,所以arr的数据还是原来的。

数组的深拷贝

var arr = ['aa','bb','cc'];
var arr2 = arr.slice(0);
arr2[0] = "新来的";
console.log(arr);//输出:数组的原始值:'aa','bb','cc'
console.log(arr2);//输出:数组的新值:'新来的','bb','cc'

Json的深拷贝

在这里利用JSON下的两个方法来实现对象的深拷贝。

var json = {a:12,b:5};
var str = JSON.stringify(json);//这里将json内的数据转换成一个字符串存起来
var json2 = JSON.parse(str);//这里将字符串的内容"还原"成原来的"面目"
console.log(json2);//输出 {a:12,b:5}

总结

其实在js中还有很多方法能进行深拷贝,例如利用数组下的cancat方法;对Json进行遍历然后给新的对象,等等。

补充

谢谢@年轻小子,以上我只考虑了纯数组或者纯对象(json串)的情况,当互相嵌套时确实有问题,经过查阅资料找到了一个函数,与大家分享一下,大家有啥好的方法也欢迎留言,共同进步!

        function cloneObject( obj, deep ){
            if ( obj === null || obj === undefined || typeof (obj) !== 'object' ){
                return obj;
            }
            var deep = !!deep;
            var cloned = null;
            if ( obj.constructor === Array ){
                if ( deep === false ) return obj;
                cloned = [];
                for ( var i in obj ){
                    cloned.push( cloneObject( obj[i], deep ) );
                }
                return cloned;
            }
            cloned = {};
            for ( var i in obj ){
                cloned[i] = deep ? cloneObject( obj[i], true ) : obj[i];
            }
            return cloned;
        }
        
        var arr = [1, 3, 5, {a: 5}]
        var newArr =cloneObject(arr,true);
        newArr[3].a = 9
        console.log(arr, newArr)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 值类型与引用类型 谈浅拷贝与深拷贝之前,我们需要先理清一个概念,即值类型与引用类型。 什么是值类型与引用类型?这要...
    franose阅读 626评论 1 8
  • 本文为转载: 作者:zyydeveloper 链接:http://www.jianshu.com/p/5f776a...
    Buddha_like阅读 932评论 0 2
  • 1、对象拷贝有两种方式:浅复制和深复制。顾名思义,浅复制,并不拷贝对象本身,仅仅是拷贝指向对象的指针;深复制是直接...
    滴答大阅读 790评论 0 2
  • 1.背景介绍 什么是栈内存和堆内存? JavaScript中的变量的存放有有原始值与引用值之分,原始值代表了原始的...
    lx2487阅读 3,369评论 0 2
  • 我要变得优秀,为了能够和你肩并肩。 人与人之间是存在着差距的,人以群分,物以类聚。我要努力一点,和你一起同...
    c米子籽阅读 459评论 0 0