首頁 > web前端 > js教程 > js中物件深層複製失敗的原因以及解決方法(程式碼)

js中物件深層複製失敗的原因以及解決方法(程式碼)

不言
發布: 2018-08-21 15:44:32
原創
1340 人瀏覽過

這篇文章帶給大家的內容是關於js中物件深層複製失敗的原因以及解決辦法(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

js 有過體驗才知,其實還是有點坑,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script type="text/javascript">
			// 排序算法
		   function bubbleSort(arr) {
			  var len = arr.length;
			  for (var i = 0; i < len; i++) {
			    for (var j = 0; j < len - 1 - i; j++) {
			      if (arr[j] > arr[j+1]) { //相邻元素两两对比
			        var temp = arr[j+1]; //元素交换
			        arr[j+1] = arr[j];
			        arr[j] = temp;
			      }
			    }
			  }
			  return arr;
			}
		    
		    // 定义一个json ab
			var ab = {a:[2,1,3,9,4],b:[8,5,3]}
			// 定义一个json bc
			var bc = {};
			// 将json ab 深拷贝给json bc
			for(var i in ab){
				bc[i]=ab[i];
			}
			
			// 对json bc 排序
			bubbleSort(bc[&#39;a&#39;])
			bubbleSort(bc[&#39;b&#39;])
			
			// 分别打印 json ab ,json bc ,发现经过排序之后 对 json bc排序之后,
			// json ab也被排序,此时意味着深层拷贝失败
			document.write(&#39;-----------------------&#39;+&#39;<br/>&#39;);
			document.write(JSON.stringify(ab));
			document.write(&#39;<br/>&#39;+&#39;-----------------------&#39;+&#39;<br/>&#39;);
			document.write(JSON.stringify(bc));
			
		</script>
	</head>
	<body>
		
	</body>
</html>
登入後複製

當時我的結果是這樣的:

原Object 是: {a:[ 2,1,3,9,4],b:[8,5,3]} 

後經過各種燒腦,終於發現原因在此:

這個深層複製,如果複製的物件經過排序之後,會使複製失效,複製之後的物件排序之後的變化,依舊會複製到之前的最初始物件

所以只要換一個物件拷貝(複製)方法,就可以了,example 如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script type="text/javascript">
			// 排序算法
		   function bubbleSort(arr) {
			  var len = arr.length;
			  for (var i = 0; i < len; i++) {
			    for (var j = 0; j < len - 1 - i; j++) {
			      if (arr[j] > arr[j+1]) { //相邻元素两两对比
			        var temp = arr[j+1]; //元素交换
			        arr[j+1] = arr[j];
			        arr[j] = temp;
			      }
			    }
			  }
			  return arr;
			}
		    
		    // 定义一个json ab
			var ab = {a:[2,1,3,9,4],b:[8,5,3]}
			// 定义一个json bc
			var bc = {};
			// 将json ab 深拷贝给json bc
			/*for(var i in ab){
				bc[i]=ab[i];
			}*/
			
			 function clone(obj) {
                // Handle the 3 simple types, and null or undefined or function
                if (null == obj || "object" != typeof obj) return obj;

                // Handle Date
                if (obj instanceof Date) {
                    var copy = new Date();
                    copy.setTime(obj.getTime());
                    return copy;
                }
                // Handle Array or Object
                if (obj instanceof Array | obj instanceof Object) {
                    var copy = (obj instanceof Array)?[]:{};
                    for (var attr in obj) {
                        if (obj.hasOwnProperty(attr))
                            copy[attr] = clone(obj[attr]);
                    }
                    return copy;
                }
                throw new Error("Unable to clone obj! Its type isn&#39;t supported.");
            }
			
			bc = clone(ab);
			// 对json bc 排序
			bubbleSort(bc[&#39;a&#39;])
			bubbleSort(bc[&#39;b&#39;])
			
			// 分别打印 json ab ,json bc ,发现经过排序之后 对 json bc排序之后, json ab也被排序,此时意味着深层拷贝失败
			document.write(&#39;-----------------------&#39;+&#39;<br/>&#39;);
			document.write(JSON.stringify(ab));
			document.write(&#39;<br/>&#39;+&#39;-----------------------&#39;+&#39;<br/>&#39;);
			document.write(JSON.stringify(bc));
			
		</script>
	</head>
	<body>
		
	</body>
</html>
登入後複製

這次結果完美!

相關推薦:

php ci框架中載入css和js檔案失敗的原因及解決方法,

JavaScript物件的深淺複製實例詳解

#

以上是js中物件深層複製失敗的原因以及解決方法(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板