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

Posted 考拉的墨尔本

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解析js中的深拷贝和浅拷贝相关的知识,希望对你有一定的参考价值。

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>

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

以上是关于解析js中的深拷贝和浅拷贝的主要内容,如果未能解决你的问题,请参考以下文章

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

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

JS中的深拷贝和浅拷贝

js中的深拷贝和浅拷贝

JS 对象的深拷贝和浅拷贝

如何实现数组深拷贝和浅拷贝?