简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Raisons et solutions de l'échec de la copie approfondie des objets dans js (code)

不言
Libérer： 2018-08-21 15:44:32
original
1300 Les gens l'ont consulté

Le contenu de cet article concerne les raisons de l'échec de la copie profonde des objets dans js et les solutions (code). Il a une certaine valeur de référence. J'espère que cela sera utile. toi.

J'ai expérimenté js avant de savoir que c'est en fait un peu délicat 

<!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>
Copier après la connexion

Mon résultat à cette époque était le suivant :

L'objet original est : {a :[2,1,3,9,4],b:[8,5,3]}

Après toutes sortes de cerveaux -burning, j'ai finalement découvert La raison est :

Cette copie profonde, si les objets copiés sont triés, invalidera la copie . Les modifications après le tri seront toujours copiées dans l'objet initial précédent

, il suffit donc de changer la méthode de copie d'objet (copie). L'exemple est le suivant :

<. 🎜>
<!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>
Copier après la connexion

Le résultat était parfait cette fois-ci !

Recommandations associées :

Les raisons et solutions de l'échec du chargement des fichiers css et js dans le framework php ci,

JavaScript Explication détaillée des exemples de copie profonde et superficielle d'objets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
js
source：php.cn
Article précédent：Comment faire fonctionner l’objet BOM en js ? Méthodes pour faire fonctionner les objets BOM dans js Article suivant：Introduction au code pour implémenter un arbre binaire en javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Un pool de travail déclaré sur plusieurs routes peut-il toujours maintenir son utilisation du processeur sans se soucier du seuil J'espère trouver un système node.js avec un pool de travailleurs pour gérer les tâches gou...
Depuis 2024-04-06 19:54:23
0
1
444
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Doit-on utiliser SSG pour déployer des tableaux de bord créés avec Nuxt.js ? Nous développerons un tableau de bord à usage interne en utilisant Nuxt.js. Puisqu’il s’ag...
Depuis 2024-04-06 13:17:44
0
1
493
Electron obtient AppData en préchargement Comment obtenir le répertoire AppData préchargé ? Background.js[...]asyncfunctioncreateWin...
Depuis 2024-04-06 11:05:31
0
1
417
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！