前端的浅拷贝和深拷贝区别_解构赋值是深拷贝还是浅拷贝

大家好，又见面了，我是你们的朋友全栈君。

引言

什么是基本类型值和引用类型值？

基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的 对象

var name = "John"; // 基本类型值

var obj = new Object(); 
obj.name = "John"; 
// obj 为引用类型值

复制变量

在复制变量中，对于基本类型值来说，两者是互不影响的

var num = 1;
var num1 = num; // num1 = 1;

var num1 = 3; // num还是1,不会变

对于引用类型值来说，复制分为两种，一种是浅拷贝，一种是深拷贝。

一、浅拷贝和深拷贝的区别

数据都是存储在内存当中，而我们调用数据的时候都是通过地址（指针）来调用数据。

对于浅拷贝来说，比如一个数组（数组是一种对象），只要我们修改了一个拷贝数组，那么原数组也会改变！

	var a = [0,1,2,3,4];
	var b = a;
	console.log(b);   //[0,1,2,3,4]
	console.log(a);   //[0,1,2,3,4]
	b[0] = 2;
	console.log(b);   //[2,1,2,3,4]
	console.log(a)    //[2,1,2,3,4]

因为他们引用的是同一个地址的数据！拷贝的时候并没有给b数组创造独立的内存，只是把a数组指向数据的 指针 拷贝给了b！ 而深拷贝就与其相反，将会给b数组创造独立的内存，并且将a数组的内容一一拷贝进来，两者互不影响。

二、浅拷贝和深拷贝的原理（参考了某大大的博客并引用了他的图，手动滑稽~~）

浅拷贝和深拷贝一般是对于引用类型值（如对象）来讲的，而基本类型值（如undefined、null、number、string、boolean以及es6新增的Symbol），只要是复制，就一定是另开辟以存储空间！

①基本数据类型存储：名值都存在栈内存中

如let a = 1;

这里写图片描述

当let b = a时，b复制了a，栈内存会新开辟一个内存

这里写图片描述

所以两者互不影响，修改谁都没问题！

②引用数据类型：名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

以上面浅拷贝的例子画图：

这里写图片描述

b复制了a后，b是引用了a的值的存储地址，而不是把a的值复制了下来！

这里写图片描述

所以改了b，a也会受到影响。

三、实现深拷贝

方法1、层级拷贝，用递归实现。

何为层级？如，var a = [0,1,2,[3,4],5]; 　a有两层，第一层是[3,4]外围的一层；第二层是[3,4];

如果我们深拷贝的时候，这样，

	function deepClone(obj){
		let objClone = Array.isArray(obj)?[]:{};
		for(let i in obj){
			objClone[i] = obj[i];
		}
		return objClone;
	}
	var a = [0,1,2,[3,4],5];
	var b = deepClone(a);

我们得到的b它的首层是另辟存放空间的，也就是上面所说的[3,4]的外面一层存放在另开辟的存储空间中。但是[3,4]这第二层他仍然是引用数据地址，因为上面的遍历只遍历了首层！

所以我们应该在上面的代码中加入判断，当碰到数组、对象等时递归函数。

	function deepClone(obj){
		//定义对象来判断当前的参数是数组还是对象
		let objClone = Array.isArray(obj)?[]:{};
		//如果obj存在并且为对象		
		if(obj&&typeof obj == "object"){
			for(let key in obj){
				if(obj.hasOwnProperty(key)){
					//如果obj的子元素为对象，那么递归（层级遍历）
					if(obj[key]&&typeof obj[key] == "object"){
						objClone[key] = deepClone(obj[key]);
					}else{
					//如果不是，直接赋值
						objClone[key] = obj[key];
					}
				}
			}
		}	
		return objClone;
	}

方法2、JSON解析（底层原理也是层级遍历）

依旧是上面的例子，var a =  [0,1,2,[3,4],5];

var b = JSON.parse(JSON.stringify(a));

b就是拷贝的结果，修改b不影响a。但是这种方法也有缺陷：

1. 无法复制函数
2. 原型链没了，对象就是object，所属的类没了。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/187294.html原文链接：https://javaforall.cn