1. 程式人生 > >解析js中的深拷貝和淺拷貝

解析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>

總結:以上就是實現陣列和物件深拷貝的一些常用方法,可以結合具體的情形使用適合的方法。