Gründe und Lösungen für einen Objekt-Deep-Copy-Fehler in js (Code)-js-Tutorial-php.cn

Gründe und Lösungen für einen Objekt-Deep-Copy-Fehler in js (Code)

不言

Freigeben： 2018-08-21 15:44:32

Original

1299 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit den Gründen für das Scheitern von Objekten in js und den Lösungen (Code). Ich hoffe, dass er für Freunde in Not hilfreich ist Du.

Ich habe js erlebt, bevor ich wusste, dass es tatsächlich etwas knifflig ist

<!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>

Nach dem Login kopieren

Mein Ergebnis damals war folgendes:

Das ursprüngliche Objekt ist: {a:[ 2,1,3,9,4],b:[8,5,3]}

Nach allen möglichen Gehirnverbrennungen , ich habe endlich den Grund hier gefunden:

Diese tiefe Kopie macht die Kopie ungültig, wenn die kopierten Objekte sortiert sind. Die Änderungen bleiben erhalten auf das vorherige Anfangsobjekt kopiert werden

, also ändern Sie einfach die Methode zum Kopieren (Kopieren) des Objekts. Das Beispiel lautet wie folgt:

<!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>

Nach dem Login kopieren

Das Ergebnis war dieses Mal perfekt!

Verwandte Empfehlungen:

Die Gründe und Lösungen für das Scheitern des Ladens von CSS- und JS-Dateien im PHP-CI-Framework,

JavaScript Detaillierte Erläuterung von Beispielen für tiefe und flache Kopien von Objekten

Das obige ist der detaillierte Inhalt vonGründe und Lösungen für einen Objekt-Deep-Copy-Fehler in js (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!