Maison > Article > interface Web > Explication détaillée de la méthode sort() pour trier les tableaux js (exemple de code)

Explication détaillée de la méthode sort() pour trier les tableaux js (exemple de code)

青灯夜游original: 2018-10-16 11:06:333424parcourir

Comment sort() implémente-t-il le tri des tableaux js ? Cet article vous présentera la méthode sort() pour trier les tableaux js, afin que vous puissiez comprendre le principe de sort() dans les tableaux js et comment sort() trie les tableaux js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, jetons un coup d'œil à la méthode js sort() et examinons la méthode de tri sort() à travers un exemple de code simple.

Méthode sort() : utilisée pour trier les éléments du tableau ; lors du tri du tableau, aucune nouvelle mémoire n'est ouverte et les éléments d'origine du tableau sont remplacés.

1. La méthode sort() implémente un tri simple de tableaux simples js (tri à bulles)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div>
			<p>数组：6,2,4,3,5,1</p>
			<span>排序后：</span>
		</div>
		<script type="text/javascript">
			var arrSimple = new Array(6,2,4,3,5,1);
			arrSimple.sort();
			document.writeln(arrSimple.join());
		</script>
	</body>
</html>

Rendu :

Explication détaillée de la méthode sort() pour trier les tableaux js (exemple de code)

Jetons un coup d'œil au principe de tri sort() :

Le tri sort() est une comparaison par paires.
Tableau : [6,2, 4 ,3,5,1]

Le premier tour commence
La première fois qu'on compare 6 et 2, 6 est plus grand que 2, on obtient 2 et 6, le tableau d'origine devient [2,6, 4, 3,5,1]
La deuxième fois on compare les deuxième et troisième nombres : 6 et 4, 6 est plus grand que 4, on obtient 4 et 6, le résultat est [2,4,6,3,5,1]
En comparant pour la troisième fois les troisième et quatrième nombres : 6 et 3, nous obtenons [2,4,3,6,5,1]
En comparant 5 et 6 pour la quatrième fois, le résultat est [2,4,3,5,6,1]
En comparant 6 et 1 pour la cinquième fois, le résultat est [2,4,3,5,1,6]
Le premier tour se termine

Le deuxième tour commence
La première fois en comparant 2 et 4, 2 est plus petit que 4, le résultat reste inchangé [2,4,3,5,1,6]
La deuxième fois en comparant 4 et 3, le résultat est [2,3, 4,5, 1,6]
En comparant 4 et 5 pour la troisième fois, 4 est plus petit que 5, le résultat reste inchangé [2,3,4,5,1,6]
En comparant 5 et 1 pour la quatrième fois, le résultat est [2,3,4,1,5,6]
Le deuxième tour se termine

Le troisième tour commence
Comparer 2 et 3 pour la première fois, 2 est inférieur à 3, et le résultat reste inchangé [2, 3,4,1,5,6]
La deuxième fois en comparant 3 et 4, 3 est inférieur à 4, le résultat reste inchangé [2,3, 4,1,5,6]
La troisième fois en comparant 4 et 1, le résultat est [2,3,1,4,5,6]
La fin du troisième tour

Le début du quatrième tour
En comparant 2 et 3 pour la première fois, 2 est plus petit que 3, Le résultat reste inchangé [2,3,1,4,5,6]
La deuxième fois en comparant 1 et 3, le résultat est [2,1,3,4,5,6]
Fin du quatrième tour

Le cinquième tour commence
La première fois que 2 et 1 sont comparés, le résultat est [1,2,3,4,5,6]
Le cinquième tour se termine et le tri se termine.

Le résultat après tri du tableau (15 comparaisons au total) : [1,2,3,4,5,6]

implémentation js de la méthode sort(). Tri personnalisé de tableaux simples

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div>
			<p>数组：1，8，7，6</p>
			<span>从大到小 排序后：</span>
		</div>
		<script type="text/javascript">
			var arrSimple2 = new Array(1, 8, 7, 6);
			arrSimple2.sort(function(a, b) {
				return b - a;
			});
			document.writeln(arrSimple2.join());
		</script>
	</body>

</html>

Rendu :

Explication détaillée de la méthode sort() pour trier les tableaux js (exemple de code)

Analysons-le :

a, b représente deux éléments quelconques du tableau. Si return > 0, la valeur renvoyée est : b devant et a à l'arrière (b, a) ; et b à l'arrière (a, b) ; Remarque : il existe une compatibilité avec les navigateurs lorsque a=b.

Pour faire simple, la sortie de a-b est triée de petite à grande, et la sortie de b-a est triée de grande à petite.

3. La méthode sort() implémente le tri d'attributs personnalisés des tableaux d'objets simples js (triés par attribut d'âge)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div>
			<p>对象数组：<br><br>
			jack，20岁<br>
			tony，25岁<br>
			stone，26岁<br>
			mandy，23岁<br>
			</p>
			<span>按照年龄排序后：</span>
		</div>
		 <script type="text/javascript">
        var objectList = new Array();
        function Persion(name,age){
            this.name=name;
            this.age=age;
            }
        objectList.push(new Persion(&#39;jack&#39;,20));
        objectList.push(new Persion(&#39;tony&#39;,25));
        objectList.push(new Persion(&#39;stone&#39;,26));
        objectList.push(new Persion(&#39;mandy&#39;,23));
        //按年龄从小到大排序
        objectList.sort(function(a,b){
            return a.age-b.age});
        for(var i=0;i<objectList.length;i++){
            document.writeln(&#39;<br />&#39;+objectList[i].name+&#39;，&#39;+objectList[i].age+&#39;岁&#39;);
            }
    </script>
	</body>
</html>

effet Photo :

Explication détaillée de la méthode sort() pour trier les tableaux js (exemple de code)

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript, le Tutoriel vidéo jQuery, le Tutoriel bootstrap !

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!

JavaScript jquery bootstrap sort 冒泡排序 JS 对象

Déclaration：

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

Article précédent：Quelle est la différence entre json et jsonp ? Comparaison des différences entre json et jsonpArticle suivant：Quelle est la différence entre json et jsonp ? Comparaison des différences entre json et jsonp

Articles Liés

Voir plus