解析js中的深拷贝和浅拷贝

Posted 2023-02-04 考拉的墨尔本

js中的浅拷贝和深拷贝，只是针对复杂数据类型(Objcet，Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础上再生成一份的作用。但是根据新生成的对象能否影响到原对象可以分为浅拷贝和深拷贝。

概念1：浅拷贝

浅拷贝就是指拷贝引用，新生成的引用和原来的引用都是指向同一个对象的实例，彼此之间的操作会相互影响。

概念2:深拷贝

在堆中重新开辟内存，把原引用对应的对象实例中所有的内容进行拷贝，因此保证了深拷贝的对象和原来的对象是完全隔离的，他们之间相互没有影响。

概念3:数组深拷贝的实现

1.使用for循环

	<script type="text/javascript">
    		var arr1=['a','b','c'];
    		var arr2=[];
    		function deepCopy(arr1,arr2)
    			for(var i=0;i<arr1.length;i++)
    				arr2[i]=arr1[i];
    			
    		
    		deepCopy(arr1,arr2);
    		arr2[1]='d';
    		console.log(arr1);//['a','b','c']
    		console.log(arr2);//['a','d','c']
    	</script>

2 .使用slice()方法

	<script type="text/javascript">
    		var arr1=['a','b','c'];
    		var arr2=arr1.slice(0);
    		arr2[1]='d';
    		console.log(arr1);//['a','b','c']
    		console.log(arr2);//['a','d','c']
    	</script>

3.使用concat方法

	<script type="text/javascript">
    		var arr1=['a','b','c'];
    		var arr2=arr1.concat();
    		arr2[1]='d';
    		console.log(arr1);//['a','b','c']
    		console.log(arr2);//['a','d','c']
    	</script>

概念4：对象的深拷贝

1.使用for循环

	<script type="text/javascript">
    		var obj = 
  				name: 'FungLeo',
  				sex: 'man',
  				old: '18'
			
			function copyObj(obj) 
  				let res = 
  				for (var key in obj) 
    				res[key] = obj[key]
  				
  				return res
			
			var obj2 = copyObj(obj);
			obj2["name"]="kka";
    	</script>

2.借助JSON来实现

	<script type="text/javascript">
    		var obj = 
  				name: 'FungLeo',
  				sex: 'man',
  				old: '18'
			
			var obj2=JSON.parse(JSON.stringif(obj));
			obj2["name"]="kka";
    	</script>

总结:以上就是实现数组和对象深拷贝的一些常用方法，可以结合具体的情形使用适合的方法。