浅析JS赋值与深浅拷贝

说到深浅拷贝，那在这就不得不提一下内存和数据类型了。

在JS当中，数据类型分为基本数据类型和引用类型，其中基本数据类型共六种（string，number，boolean，undefined，null，symnol），引用类型为Object（细分可分为Array、object、date......）。

那么在来说一下内存，内存分为栈内存和堆内存，其中栈内存用来存储基本数据类型和引用类型的地址，而堆内存则存储引用数据类型。

一、赋值

什么是赋值呢，其实赋值分为两种，一种是传值，还有一种是传址，顾名思义，前者传的是基本数据类型的值，比如变量的值、字符串或者是undefined，而后者传递的是引用类型的地址。简单来说就是在栈内存中重新开辟一块新的空间，将需要的值复制一份，那有的同学就要说了，这不就是拷贝么？其实不然，对于传值来说，如果将变量a赋值给变量b，复制的仅仅是值，当你改变b的时候，a不受影响,如图：

但对于传址来说，由于复制的是引用类型的地址，那么不管复制多少次，他指向的堆内存中的内存块没有变，也就是说，复制出来的两个地址指向同一个内存块，不管改变哪个对象，他们的值都会一起改变，如图：

二、拷贝

什么是拷贝？拷贝和赋值究竟有何不同？简单来说，二者最根本的不同就在于操作的对象不同，赋值操作的是基本数据类型，而拷贝操作的是引用数据类型，究其本质就是，前者是对栈内存的数据进行的操作，后者是对堆内存的数据进行的操作。

那么现在假设有一个对象如下所示：

var obj={name:"tom",sex:"man",obj1:{age:15}}

2.1浅拷贝

所谓浅拷贝，也就是只拷贝对象的第一层，即只拷贝最外层的基本数据类型，对于对象中的其他引用类型则只拷贝其地址，也就是说，以上面的obj为例，浅拷贝过来的应该是：

	
	
	
	
		{name:"tom",sex:"man",obj1:{obj1的地址}}

到此为止，你可以随意更改name、sex，源数据不会受到影响，但当你更改obj1的内容时，源数据中的obj1也会随之发生改变

2.2深拷贝

深拷贝理解起来就非常简单了，就是完完全全的拷贝出一个新的对象，不管源数据有几层，通通拷贝成新的对象，与源数据没有一点关系

三、实现方法

3.1、浅拷贝

<1>通过ES6的object.assign()

		
		
		
		
			var a={name:"tom"}; 
		

		
			var b=Object.assign({},a);

<2>扩展运算符

	
	
	
	
		var a={name:"tom"}; 
	

	
		var b={...a};

<3>for...in...

	
	
	
	
		let copy=(obj)=>{ 
	

	
		 let result={}; 
	

	
		 for(var a in obj){ 
	

	
		 result[a]=obj[a]; 
	

	
		 } 
	

	
		 return result; 
	

	
		}

3.2、深拷贝

<1>解构赋值

	
	
	
	
		let a={age:10,address:{city:"shanghai"}}; 
	

	
		let b={...a,address:{...a.address}}

<2>递归

		
		
		
		
			function deep(obj){ 
		

		
			 let result=typeof obj.splice= = ='function'?[]:{}; 
		

		
			 if(obj&&typeof obj = = ="object"){ 
		

		
			 for(let key in obj){ 
		

		
			 if(obj[key]&&typeof obj[key]= = ="object"){ 
		

		
			 result[key]=deep(obj[key]); 
		

		
			 }else{ 
		

		
			 result[key]=obj[key]; 
		

		
			 } 
		

		
			 } 
		

		
			 return result; 
		

		
			 } 
		

		
			 return obj; 
		

		
			}