几段代码帮你搞懂浅拷贝和深拷贝（什么是浅拷贝和深拷贝）

wxin55 2024-11-17 02:44 8 浏览 0 评论

原文链接：https://blog.csdn.net/qq_38110274/article/details/103110713

对象的浅拷贝和深拷贝

拷贝现象会出现在，对象、数组、函数中，这里我只对对象进行分析，其他的大家可以自行拓展（其实规律都是一样的）。在对对象数据进行解析的时候，会涉及到浅拷贝和深拷贝，如果理解不好，会出现一些意向不到的问题，下面我将为大家介绍下这两种拷贝各自的特点，帮助大家规避可能出现的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前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

相关推荐