资讯专栏INFORMATION COLUMN

重新梳理下js中的深拷贝和浅拷贝

kun_jian / 486人阅读

摘要:参考链接浅拷贝最简单的浅拷贝就赋值。所谓的浅拷贝就是,后面的对象和前面的对象在第一层数据结构中指向同一个堆地址。但是如果前面的数据不止有一层,如此时,使用和方式实现的都是浅拷贝。深拷贝管你怎么变,互不影响。

参考链接:
http://www.cnblogs.com/st-les...
https://blog.csdn.net/hj7jay/...

浅拷贝:

1.最简单的浅拷贝就赋值。
由于js中的对象都是复杂数据类型,这种数据在内存中存储的时候,存放在堆中。当简单赋值的时候,其实是将该对象的指针指向同一个堆地址。

简单的数据类型存放在栈中,当对简单的数据类型进行赋值的时候,其实就是直接在栈中新开辟一个地方专门来存储一样的值。

所谓的浅拷贝就是,后面的对象和前面的对象在第一层数据结构中指向同一个堆地址。但是如果前面的数据不止有一层,如:

let obj = { a: {a: "hello", b: 21} };

此时,使用Object.assign()和...Object方式实现的都是浅拷贝。
此时,第一层数据虽然指向了另一个新的堆地址,但是它内部的子对象的指针却还是同一个地址。这种情况也属于浅拷贝,只不过是比那种直接赋值(直接复制堆地址)的方式要深刻一些。

2.数组和对象的浅拷贝

数组的浅拷贝,有三种方式:

(1) arr1 = arr2;
(2) arr2 = arr1.slice(0);
(3) arr2 = arr1.concat();

对象的浅拷贝,也有3种方式:

(1) obj2 = obj1;
(2) obj2 = Object.assign(obj1 ,{} )
(3) obj2 = {...obj1}
深拷贝

对象的深拷贝实际上就是,将前一个对象复制一份给后面的那个对象,不管前面的那个对象中的数据结构嵌套有多深,当改变其中一个对象中的任意深度的某个值后,另一个对象中的该值不会受任何影响。

1.当对象中的所有属性值都是简单数据类型的时候:

function easyCopy(p) {
  var c = {};
  for (var i in p) {
    c[i] = p[i];
    }
  c.uber = p;
  return c;
}

2.当要复制的对象中存在某个属性的value值是对象或者数组时:
如果像上面的简单类型那样直接赋值,那么子对象对应的属性实际上指向的是和被拷贝对象中子对象一样的内存地址。因此,只要改了一个,另一个也会跟着改变。

function deepCopy(p, c) {
    let c = c || {};
    for (let i in p) {
        if(! p.hasOwnProperty(i)){
            continue;
        }
        if (typeof p[i] === "object") {
            c[i] = (p[i].constructor === Array) ? [] : {};
            deepCopy(p[i], c[i]);
        } else {
            c[i] = p[i];
        }
    }
    return c;
}

Parent = {name: "foo", birthPlaces: ["北京","上海","香港"]}
var Child = deepCopy(Parent); 

总结:
浅拷贝:你变我也变,嵌套对象变,就会跟着变。
深拷贝:管你怎么变,互不影响。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101839.html

相关文章

  • 一篇文章彻底说清JS的深拷贝/浅拷贝

    摘要:一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。 一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者。 第二类,希望扎实JS基础,将来好去面试官前秀操作...

    J4ck_Chan 评论0 收藏0
  • 一篇文章彻底说清JS的深拷贝/浅拷贝

    摘要:一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。 一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者。 第二类,希望扎实JS基础,将来好去面试官前秀操作...

    lakeside 评论0 收藏0
  • 一篇文章彻底说清JS的深拷贝/浅拷贝

    摘要:一篇文章彻底说清的深拷贝浅拷贝这篇文章的受众第一类业务需要急需知道如何深拷贝对象的开发者。这篇文章分享的目的更多还是希望用一篇文章整理清楚深浅拷贝的含义递归实现思路以及小伙伴们如果使用了这种黑科技一定要清楚这样写的优缺点。 一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者。 第二类,希望扎实JS基础,将来好去面试官前秀操作...

    big_cat 评论0 收藏0
  • js的深拷贝和浅拷贝

    深拷贝 直接使用var newObj = object.create(oldObj),可以达到深拷贝的效果. JSON.stringify以及JSON.parsevar a = { n: {name:whatever} }; var b = JSON.parse( JSON.stringify(a) ); 用jQ实现深拷贝function clone(obj) {return $.extend(...

    harryhappy 评论0 收藏0
  • 探索php和python对象的深拷贝和浅拷贝

    摘要:对于而言,情况可能会有点小复杂,因为一切皆为对象,所以的普通赋值深拷贝和浅拷贝之间都是有细微区别的。二下的他们在中,对象的赋值和传递都是引用。 一、深拷贝与浅拷贝   深拷贝:赋值时值完全复制,完全的copy,对其中一个作出改变,不会影响另一个   浅拷贝:赋值时,引用赋值,相当于取了一个别名。对其中一个修改,会影响另一个   对于PHP而言,= 赋值时,普通对象是深拷贝,但对对象来说...

    shinezejian 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<