js中深拷贝和浅拷贝的区别及原理

时间: 2017-11-29阅读: 1890标签: 拷贝

JavaScript的深拷贝和浅拷贝主要是针对像Object, Array这样的复杂对象的,简单理解为浅拷贝只复制一层对象的属性,而深拷贝则递归复制了所有层级。  

下面是一个简单的浅拷贝实现: 

<script>
var obj = {
    name : 'tony',
    infor:[1,2],
};
var obj1 = {};
for (var i in obj) {
    obj1[i] = obj[i];
}

console.log(obj); //Object {name: "tony", infor: Array[2]}
obj1['infor'].push(3);
console.log(obj); //Object {name: "tony", infor: Array[3]}
console.log(obj1); //Object {name: "tony", infor: Array[3]}
console.log(obj1['infor']);//[1, 2, 3]
console.log(obj['infor']);//[1, 2, 3]
console.log(obj['infor'] === obj1['infor']);//true
</script>

从输出我们可以看出,当我们在obj1中的infor添加属性,取发现在obj中同样添加了。这就是因为浅拷贝对于属性是对象的时候,只是进行简单的地址拷贝,其引用关系也在;浅拷贝只有当单独修改第一层对属性的时候才不会相互修改,如:

obj1.name="haha"
console.log(obj1.name);//输出haha
console.log(obj);//输出tony


在来看下深拷贝的实现:

<script>
function inCopy(obj1,obj2){
    var obj1 = obj1 || {};
    for (var i in obj2) { 
        if(obj2.hasOwnProperty(i)){ //只拷贝实例属性,不进行原型的拷贝
            if(typeof obj2[i] == 'object') { //引用类型的数据单独处理
                obj1[i] = Array.isArray(obj2[i])?[]:{};
                inCopy(obj1[i],obj2[i]); //递归处理引用类型数据
            }else{
                obj1[i] = obj2[i]; //值类型的数据直接进行拷贝
            }
        }
    }
}
var obj = {
    name : 'tony',
    infor:[1,2],
};
var obj1 = {};
inCopy(obj1,obj);//深拷贝

console.log(obj); //Object {name: "tony", infor: Array[2]}
obj1['infor'].push(3);
console.log(obj); //Object {name: "tony", infor: Array[2]}
console.log(obj1); //Object {name: "tony", infor: Array[3]}
console.log(obj1['infor']);//[1, 2, 3]
console.log(obj['infor']);//[1, 2]
</script>


可以看出深拷贝对两者之间的改变是互不影响的,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 obj1 的 infor属性指向同一个对象的问题。


值得注意的是如果对象比较大,层级也比较多,深拷贝会带来性能上的问题。在遇到需要采用深拷贝的场景时,可以考虑有没有其他替代的方案。在实际的应用场景中,也是浅拷贝更为常用。  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/194

对象的浅拷贝与深拷贝

本文整理的为部分对象的浅拷贝与深拷贝,与基本数据类型的概念不一样。eg:就浅拷贝来说,如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址

javascript实现数组或对象的深拷贝

可以看出来,改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;同样:改变原数组arr,并没有对新数组copyArr产生影响;改变新数组copyArr也没有对原数组arr产生影响;

理解JS中的深拷贝与浅拷贝

了解深拷贝也不仅仅是为了应付面试题,在实际开发中也是非常有用的。例如后台返回了一堆数据,你需要对这堆数据做操作,但多人开发情况下,你是没办法明确这堆数据是否有其它功能也需要使用,直接修改可能会造成隐性问题

使用jquery克隆对象_实现深、浅拷贝的简单实例

克隆JavaScript对象,首页想到的是obj = eval(uneval(obj)),但这是非标准的,推荐使用jquery提供的jQuery.extend方法,因为它包含了一些额外的类型验证逻辑,并且不会复制未定义的属性等。

使用JSON.parse(JSON.stringify(object))实现深拷贝的局限及扩展

大部分情况我们都可以使用JSON.parse(JSON.stringify(object))来实现深拷贝,但该方法也有局限性,如下:会忽略 undefined,会忽略 symbol,不能序列化函数,不能解决循环引用的对象

使用JSON.parse(),JSON.stringify()实现对对象的深拷贝

JSON.parse(),JSON.stringify()实现对对象的深拷贝以及兼容性问题,根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系。

在JavaScript 中 14 个拷贝数组的技巧

数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的,这说明在创建数组之后还可以修改数组的内容。

JS对象复制(深拷贝、浅拷贝)

注意: 此方法仅在原对象包含可序列化值类型且没有任何循环引用时才有效。不可序列化值类型的一个例子是 Date 对象 - JSON.parse 只能将其解析为字符串而无法解析回其原始的 Date 对象 或者对象中属性值为function

Object.assign以及浅、深拷贝

对于Object.assign()而言, 如果对象的属性值为简单类型(string, number),通过Object.assign({},srcObj);得到的新对象为‘深拷贝’;如果属性值为对象或其它引用类型,那对于这个对象而言其实是浅拷贝的

js浅拷贝与深拷贝的区别和实现方式

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!