js浅拷贝深拷贝

本文链接： https://blog.csdn.net/nightwishh/article/details/102689265

浅拷贝和深拷贝的基本概念

今天无意间又看到了这个知识点，那就写写笔记及小结，有时可能理解了一个知识点并不够，亲自讲清楚给别人听才是真正的消化并提高。
还是亲手画一张草图先捋清楚概念。（首先搞清楚浅拷贝和深拷贝的概念是在引用类型这个分支下面的，它们和基本类型没有啥关系）

基本类型和引用类型

在这里插入图片描述
关于基本类型引用类型的介绍网上已经有很多介绍了，那这里我就简单举两个例子带过。

基本类型

var a=1;

var b=a;

a=2;

console.log(b);

控制台打印了1没问题。（改变了a的值b不会跟着改变）
在这里插入图片描述

这里直观的画张图看看这个过程

在这里插入图片描述

引用类型

var c={
	age:3
}

var d=c

c.age=4

console.log(d.age);

在这里插入图片描述
这里控制台打印了4而不是3，可是我明明修改的c的age值，d的age为什么也跟着改变呢。这是因为我们引用类型它仅是拷贝了c对象指向它堆内存的指针。

这里还是直观的画张图看看这个过程

首先var c={age:3}
在这里插入图片描述
接着var d=c

我们可以观察到并没有单独为d变量在堆中再创造一份一模一样的数据，只是把c指向堆内存数据的指针多复制了一份，它们指向同一块内存地址，所以当我们c.age=4时会发现打印出b.age的值也是4。

那如果我们不想让c和d指向同一块内存地址而是想重新给d新造一块内存地址让他俩互不干扰那该咋整呢。

这时就需要浅拷贝和深拷贝了

浅拷贝和深拷贝

搞清楚基础类型和引用类型之后我们就可以看看浅拷贝和深拷贝了。
还是先画张图（看到最后再回到这里仔细看这张图很快就懂了）
在这里插入图片描述

赋值

我们刚刚对引用类型的复制就是表格中的第一个“赋值”操作
它和原数据指向同一对象，数据中的子对象改变原数据也会一同改变。那我们就来新增一个子对象other看看

var c={
	age:3,
	other:{
		hobby:"play basketball",
		birthday:1997,
		height:"177cm",
		weight:"63kg"
	}
}

var d=c

c.age=4
c.other.height="180cm"

console.log(d.age);
console.log(d.other.height);

果然子对象也会跟着改变
在这里插入图片描述

浅拷贝

浅拷贝就是拷贝一层数据
我们这里用Object.assign方法来实现一次浅拷贝看看效果

扫描二维码关注公众号，回复： 7569264 查看本文章

var c={
	age:3,
	other:{
		hobby:"play basketball",
		birthday:1997,
		height:"177cm",
		weight:"63kg"
	}
}

var d=Object.assign({},c)//浅拷贝操作

c.age=4
c.other.height="180cm"

console.log(d.age);
console.log(d.other.height);

在这里插入图片描述
再对照着表格看浅拷贝实际只拷贝了一层，所以这里修改了c.age并不会影响到d.age的值。

深拷贝

深拷贝就是拷贝多层数据
我们这里用JSON.parse(JSON.stringify())方法来实现一次深拷贝看看效果

var c={
	age:3,
	other:{
		hobby:"play basketball",
		birthday:1997,
		height:"177cm",
		weight:"63kg"
	}
}

var d=JSON.parse(JSON.stringify(c))//深拷贝的实现

c.age=4
c.other.height="180cm"

console.log(d.age);
console.log(d.other.height);

再回到控制台看看结果
在这里插入图片描述
看到这里再回去看那张表格相信你会豁然开朗。