suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Methode sort() zum Sortieren von JS-Arrays (Codebeispiel)

Detaillierte Erläuterung der Methode sort() zum Sortieren von JS-Arrays (Codebeispiel)

青灯夜游
青灯夜游Original
2018-10-16 11:06:333446Durchsuche

Wie implementiert sort() die Sortierung von JS-Arrays? In diesem Artikel wird Ihnen die sort()-Methode zum Sortieren von js-Arrays vorgestellt, damit Sie das Prinzip von sort() in js-Arrays verstehen und erfahren, wie sort() js-Arrays sortiert. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Werfen wir zunächst einen Blick auf die js sort()-Methode und betrachten die Sortiermethode sort() anhand eines einfachen Codebeispiels.

sort()-Methode: Wird zum Sortieren der Elemente des Arrays verwendet. Beim Sortieren des Arrays wird kein neuer Speicher geöffnet und die ursprünglichen Array-Elemente werden ersetzt.

1. Die Methode sort() implementiert die einfache Sortierung von js einfachen Arrays (Blasensortierung) 

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

Rendering:

Detaillierte Erläuterung der Methode sort() zum Sortieren von JS-Arrays (Codebeispiel)

Werfen wir einen Blick auf das Sortierprinzip von sort():

sort()-Sortierung ist ein paarweiser Vergleich.
Array: [6,2,4, 3 ,5,1]

Die erste Runde beginnt
Wenn wir 6 und 2 zum ersten Mal vergleichen, ist 6 größer als 2, wir erhalten 2 und 6, das ursprüngliche Array wird zu [2,6,4, 3, 5,1]
Beim zweiten Vergleich der zweiten und dritten Zahl: 6 und 4, 6 ist größer als 4, wir erhalten 4 und 6, das Ergebnis ist [2,4,6,3,5,1]
Wenn wir die dritte und vierte Zahl zum dritten Mal vergleichen: 6 und 3, erhalten wir [2,4,3,6,5,1]
Vergleicht man 5 und 6 zum vierten Mal, ist das Ergebnis [2,4,3,5,6,1]
Wenn man 6 und 1 zum fünften Mal vergleicht, ist das Ergebnis [2,4,3,5,1,6]
Die erste Runde endet

Die zweite Runde beginnt
Beim ersten Vergleich von 2 und 4 ist 2 kleiner als 4, das Ergebnis bleibt unverändert [2,4,3,5,1,6]
Beim zweiten Vergleich von 4 und 3 ist das Ergebnis [2,3, 4,5, 1,6]
Vergleicht man 4 und 5 zum dritten Mal, ist 4 kleiner als 5, das Ergebnis bleibt unverändert [2,3,4,5,1,6]
Vergleicht man 5 und 1 zum vierten Mal ist das Ergebnis [2 ,3,4,1,5,6]
Die zweite Runde endet

Die dritte Runde beginnt
Vergleich von 2 und 3 zum ersten Mal, 2 ist kleiner als 3 und das Ergebnis bleibt unverändert [2, 3,4,1,5,6]
Beim zweiten Vergleich von 3 und 4 ist 3 kleiner als 4, das Ergebnis bleibt unverändert [2,3, 4,1,5,6]
Beim dritten Vergleich von 4 und 1 ist das Ergebnis [2,3,1,4,5,6]
Das Ende der dritten Runde

Der Beginn der vierten Runde
Beim ersten Vergleich von 2 und 3 ist 2 kleiner als 3. Das Ergebnis bleibt unverändert [2,3,1,4,5,6]
Beim zweiten Vergleich von 1 und 3, das Ergebnis ist [2,1,3,4,5,6]
Ende der vierten Runde

Die fünfte Runde beginnt
Das erste Mal, wenn 2 und 1 verglichen werden, das Ergebnis ist [1,2,3,4,5,6]
Die fünfte Runde endet und die Sortierung endet.

Das Ergebnis nach dem Sortieren des Arrays (insgesamt 15 Vergleiche): [1,2,3,4,5,6]

2. js-Implementierung der Methode sort() Benutzerdefinierte Sortierung einfacher Arrays 

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

Rendering:

Detaillierte Erläuterung der Methode sort() zum Sortieren von JS-Arrays (Codebeispiel)

Lass es uns analysieren:

a, b stellt zwei beliebige Elemente im Array dar. Wenn return >, ist der zurückgegebene Wert: b vor und a nach (b, a); wenn return

Einfach ausgedrückt wird die Ausgabe von a-b von klein nach groß und die Ausgabe von b-a von groß nach klein sortiert.

3. Die Methode sort() implementiert die benutzerdefinierte Attributsortierung von js einfachen Objektarrays (sortiert nach Altersattribut) 

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

Rendering:

Detaillierte Erläuterung der Methode sort() zum Sortieren von JS-Arrays (Codebeispiel)

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial, jQuery-Video-Tutorial, Bootstrap-Tutorial!

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methode sort() zum Sortieren von JS-Arrays (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery bootstrap sort 冒泡排序 JS 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was ist der Unterschied zwischen JSON und JSONP? Vergleich der Unterschiede zwischen JSON und JSONPNächster Artikel：Was ist der Unterschied zwischen JSON und JSONP? Vergleich der Unterschiede zwischen JSON und JSONP

In Verbindung stehende Artikel

Mehr sehen