龙空技术网

几段代码帮你搞懂浅拷贝和深拷贝

麻油叶 209

前言:

目前你们对“net深复制”大约比较关怀,看官们都需要知道一些“net深复制”的相关文章。那么小编同时在网摘上收集了一些有关“net深复制””的相关知识,希望我们能喜欢,各位老铁们一起来了解一下吧!

原文链接:

对象的浅拷贝和深拷贝

拷贝现象会出现在,对象、数组、函数中,这里我只对对象进行分析,其他的大家可以自行拓展(其实规律都是一样的)。在对对象数据进行解析的时候,会涉及到浅拷贝和深拷贝,如果理解不好,会出现一些意向不到的问题,下面我将为大家介绍下这两种拷贝各自的特点,帮助大家规避可能出现的bug。

浅拷贝

引用传递的数据:复杂数据,值是值,地址是地址,一般情况下,复制的是地址,不是值。这样一来就会导致,修改新数据,会影响复制之前的数据。那么这种现象就被称为对象的浅拷贝。

各位可以通过下面的简单示例理解下浅拷贝。一定要自行运行代码,这样你自己总结到的才真的变成你的知识。

var obj = {
 name:"admin"
 }
 var obj2 = obj;
 obj2.name = "root";
 console.log(obj)//{name: "root"}
 console.log(obj2)//{name: "root"}
 console.log(obj == obj2)//true	
示例2
var a = 10;
 var b = {
 a:20
 }
 function fn(data){
 a = 11;
 data.a = 21;
 }
 fn(b)
 console.log(a); //11,函数中没有变量a,自动找全局a,所以修改的是全局的a
 console.log(b.a); //21,函数中有局部变量data,不找全局,但是b是对象,对象是引用传递的数据,传参,只是简单的赋值,属于浅拷贝,所以修改新数据data,会影响老数据b

深拷贝

如何进行深拷贝呢?解析对象中所有数据,逐个拷贝,避开了引用传递,因为里面的数据本身是值传递。
代码示例如下:

var obj = {
 name:"admin",
 age:18,
 sex:0,
 like:{
 a:10,
 b:20,
 c:{
 str:"hello"
 }
 }
 }
 var obj2 = {};
 for(var i in obj){
 obj2[i] = obj[i];
 }
 obj2.name = "root";
 
 obj2.like.c.str = "world";
 console.log(obj);
 console.log(obj2);

示例2:使用JSON和对象的互相转换实现深拷贝

var obj = {
 name1:{
 name2:{
 name3:{
 name4:"admin",
 c:undefined,
 b:function(){},
 a:NaN
 }
 }
 }
 }
 var s = JSON.stringify(obj);
 console.log(s)
 var obj2 = JSON.parse(s);
 console.log(obj2.name1.name2.name3.name4);
 obj2.name1.name2.name3.name4 = "root";
 
 console.log(obj)
 console.log(obj2)
 console.log(obj === obj2)

结语

自己动手,丰衣足食!!!记得自己总结呦。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

标签: #net深复制