JS里深拷贝和浅拷贝的释义

zollero 发布于2019-08-23 12:22 / 828人阅读

摘要：本文解释中深拷贝和浅拷贝的区别。深拷贝深拷贝指递归的复制对象的属性给新对象。有些时候一层的深拷贝被认为是浅拷贝，比如的值是一个对象，浅拷贝出来的新对象直接引用了原对象的对象，所以也会相互影响的。

本文解释javascript中深拷贝和浅拷贝的区别。

浅拷贝/Shallow Copy

浅拷贝指拷贝了引用值。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};
console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}

var shallowCopy = original;
console.log(JSON.stringify(shallowCopy));
// {"prop1" : "Prop1", "prop2" : "prop2"}

shallowCopy.prop1 = "ChangedProp1";

console.log(JSON.stringify(original));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}
console.log(JSON.stringify(shallowCopy));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

https://smoothprogramming.com...

注意:

浅拷贝中，原始值和副本共享同样的属性。

浅拷贝只拷贝了对象引用。

浅拷贝中如果修改了拷贝对象会影响到原始对象，反之亦然。

js中，数组和对象的赋值默认为浅拷贝。

深拷贝/Deep Copy

深拷贝指递归的复制对象的属性给新对象。jquery中我们使用$.extend去进行深拷贝。

$.extend(deepCopy, target, object1, [objectN] )

第一个参数传入true，指明此为深拷贝，target为目标对象，object1，原对象。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};
console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}

var deepCopy = $.extend(true, {}, original);
console.log(JSON.stringify(deepCopy));
// {"prop1" : "Prop1", "prop2" : "prop2"}

deepCopy.prop1 = "ChangedProp1";

console.log(JSON.stringify(original));
// {"prop1" : "Prop1", "prop2" : "prop2"}
console.log(JSON.stringify(deepCopy));
// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

https://smoothprogramming.com...

注意:

深拷贝中，副本和原对象不共享属性

深拷贝递归的复制属性

深拷贝的副本不会影响到原对象，反之亦然

js中所有的原始数据类型默认执行深拷贝，比如Boolean, null, Undefined, Number,String等

译者注：

实际工作中，通常所谓clone一个对象一般都是指深拷贝，即拷贝一个对象的副本。

有些时候一层的深拷贝被认为是浅拷贝，比如shallowCopy({a:1,b:{hello:"world}}),b的值是一个对象，浅拷贝出来的新对象直接引用了原对象的value对象，所以也会相互影响的。

实际工作中，深拷贝（递归的对对象里每一层值和对象进行拷贝）应用很广泛，我认为浅拷贝只变成了一种概念，因为每一个需要clone的地方都是深拷贝。

复制一个副本对象也可以通过工厂函数，比如vuejs里的data。

云服务器 GPU云服务器深拷贝和浅拷贝 js拷贝内存数据库 linux的拷贝数组拷贝的java

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

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

js深拷贝和浅拷贝

摘要：深拷贝和浅拷贝深拷贝和浅拷贝的示意图大致如下浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。参考文章什么是深拷贝和浅拷贝及其实现方式走在前端的大道上本篇将自己读过的相关文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。浅拷贝 var m = { a: 10, b: 20 } var n = m; n.a = 15; ...

MAX_zuo 2019-08-21 18:46 评论0 收藏0
浅探js深拷贝和浅拷贝

摘要：接下来就让我们更细致的探究中的深浅拷贝。总结以上对深拷贝和浅拷贝做了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂情况以及相应优化，想要对深拷贝有更深入的了解，需要大家花时间去深入研究，或者可以关注我后续文章的动态。对象和数组的拷贝对我来说一直都是一个比较模糊的概念，一直有点一知半解，但是在实际工作中又偶尔会涉及到，有时候还会一不小心掉坑里，不知道大家有没有同样...

habren 2019-08-23 13:01 评论0 收藏0
深拷贝和浅拷贝的区别

摘要：深拷贝和浅拷贝的区别背景最近在用框架写页面，赋值给中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。深拷贝和浅拷贝的区别背景：最近在用vue框架写页面，赋值给Vue.$data中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。例如： var b = { foo: 123 }; var vm = new Vue(...

suemi 2019-08-21 17:07 评论0 收藏0
重新梳理下js中的深拷贝和浅拷贝

摘要：参考链接浅拷贝最简单的浅拷贝就赋值。所谓的浅拷贝就是，后面的对象和前面的对象在第一层数据结构中指向同一个堆地址。但是如果前面的数据不止有一层，如此时，使用和方式实现的都是浅拷贝。深拷贝管你怎么变，互不影响。参考链接：http://www.cnblogs.com/st-les...https://blog.csdn.net/hj7jay/... 浅拷贝： 1.最简单的浅拷贝就赋值。由于...

kun_jian 2019-08-23 15:18 评论0 收藏0
深入JavaScript中深拷贝和浅拷贝

摘要：深拷贝和浅拷贝问题的本质还是不同数据类型的存储方式差异，尤其是引用数据类型的特殊。深拷贝和浅拷贝问题的本质还是不同数据类型的存储方式差异，尤其是引用数据类型的特殊。showImg(https://segmentfault.com/img/bVbb8XH?w=1058&h=409); 现分别对赋值、浅拷贝、深拷贝做深入研究： 1.赋值原理：直接将对象指针直接赋值给另一个变量代码： ...

TalkingData 2019-08-22 17:58 评论0 收藏0