JavaScript Array Beispiel 4: Arrays Sortieren

Instanzen eines Array-Objekts bieten unter JavaScript eine Möglichkeit, die enthaltenen Elemente zu sortieren. Zu diesem Zweck existiert die Methode sort des Array-Objekts. Ohne Parameter aufgerufen werden die im Array enthaltenen Elemente lexikalisch sortiert. Dies bedeutet, dass Zahlen als Zeichenketten angesehen und dementsprechend sortiert werden – die Zeichen werden ihrem Zeichencode entsprechend sortiert.

Im folgenden Beispiel-Script wird ein Array zunächst mit Elementen (Zeichenketten) gefüllt. Nach der Ausgabe des Array-Inhaltes werden die Elemente des zuvor definierten Arrays durch Aufruf der Methode sort lexikalisch sortiert. Zum Schluss wird dann das sortierte Array ausgegeben (mit document.write).

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Aufzählung der Elemente, die im Array gespeichert werden sollen.
var pizza = new Array ('Thunfisch', 'Spinat', 'Zwiebel', 'Hawaii', 'Salami');
// Inhalt des Arrays ausgeben
document.write ('Inhalt von pizza (unsortiert): ');
for (i = 0; i < pizza.length; i++)
  document.write ('<br>&nbsp;pizza[' + i + ']: ' + pizza[i]);
// Inhalt des Arrays sortieren
pizza.sort ();
// und den sortierten Inhalt des Arrays ausgeben
document.write ('<br><br>Inhalt von pizza (sortiert): ');
for (i = 0; i < pizza.length; i++)
  document.write ('<br>&nbsp;pizza[' + i + ']: ' + pizza[i]);
// -->
</script>

Die lexikalische Sortierung arbeitet aber nur dann korrekt, wenn die zu sortierenden Inhalte auch wirklich aus Zeichenkeztten bestehen. Anders sieht es aus, wenn man Zahlenwerte sortieren möchte. In diesem Fall sieht die Methode sort einen Parameter vor, mit dem man ihr eine Vergleichsfunktion übergeben kann. Aufgrund dieser Vergleichsfunktion wird nun während des Sortiervorgangs entschieden, welches Element höherwertiger bzw. niederwertiger ist.

Das nächste Beispiel zeigt, welches Ergebnis die Sortierung nummerischer Werte liefert. Dabei nutzt JavaScript auch hier den standardmäßig arbeitenden, lexikalischen Vergleichsoperator.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Aufzählung der Elemente, die im Array gespeichert werden sollen.
var zahlen = new Array (15, 156, 56, 9, 3145, 42);
// Inhalt des Arrays ausgeben
document.write ('Inhalt von zahlen (unsortiert): ');
for (i = 0; i < zahlen.length; i++)
  document.write ('<br>&nbsp;zahlen[' + i + ']: ' + zahlen[i]);
// Inhalt des Arrays sortieren
zahlen.sort ();
// und den sortierten Inhalt des Arrays ausgeben
document.write ('<br><br>Inhalt von zahlen (sortiert): ');
for (i = 0; i < zahlen.length; i++)
  document.write ('<br>&nbsp;zahlen[' + i + ']: ' + zahlen[i]);
// -->
</script>

Das vom Script erzielte Ergebnis ist so zweifellos nicht erwünscht. Damit die Sortiermethode auch mit nummerischen Elementen korrekt arbeitet, muss ein sogenannter Comparator – eine spezielle Vergleichsfunktion – definiert werden, welche die Besonderheiten bei der Sortierung von nummerischen Werten berücksichtigt. Dieser Vergleichskomparator legt fest, welches der beiden übergebenen Elemente größer ist – woraus automatisch folgt, welches das kleiner Element ist – oder ob die Elemente gleichwertig sind.

Dazu muss die Vergleichsfunktion einen positiven Wert liefern, wenn der erste übergebene Wert größer ist. Ist der erste Wert kleiner als der Zweite, so muss ein negativer Rückgabewert geliefert werden und für den Fall, dass die Werte gleich sind, muss der Rückgabewert gleich 0 sein.

Im folgenden Script-Abschnitt wird zunächst eine solche Vergleichsfunktion definiert. Durch die Subtraktion des zweiten Wertes vom Ersten werden die gewünschten Rückgabewerte generiert (a - b ist negativ, wenn b größer ist als a usw.). Die darauf folgende Vergleichsfunktion bewertet genau andersherum und ist dafür geeignet, die umgekehrte Sortierreihenfolge zu generieren. Wichtig sind die Aufrufe der Sort-Methode, denen die ensprechenden Vergleichsfunktionen übergeben werden. Als Parameter wird einfach der Name der Vergleichsfunktion übergeben, die entscheiden soll, welches von zwei Elementen das höherwertige ist.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Vergleichsfunktion zur Entscheidung, ob a < b, a > b oder a == b
// Kann genutzt werden, wenn die Werte aufsteigend sortiert werden sollen
function vergleichNumerischAufsteigend (a, b)
{
  return a - b;
}

// Vergleichsfunktion wie oben mit dem Unterschied, dass der kleinere
// der übergebenen Werte als höherwertiger angesehen wird.
// Kann genutzt werden, wenn die Werte absteigend sortiert werden sollen
function vergleichNumerischAbsteigend (a, b)
{
  return b - a;
}

// Aufzählung der Elemente, die im Array gespeichert werden sollen.
var zahlen = new Array (15, 156, 56, 9, 3145, 42);
// Inhalt des Arrays ausgeben
document.write ('Inhalt von zahlen (unsortiert): ');
for (i = 0; i < zahlen.length; i++)
  document.write ('<br>&nbsp;zahlen[' + i + ']: ' + zahlen[i]);
// Inhalt des Arrays aufsteigend sortieren
zahlen.sort (vergleichNumerischAufsteigend);
// und den sortierten Inhalt des Arrays ausgeben
document.write ('<br><br>Inhalt von zahlen (aufsteigend sortiert): ');
for (i = 0; i < zahlen.length; i++)
  document.write ('<br>&nbsp;zahlen[' + i + ']: ' + zahlen[i]);
// Inhalt des Arrays absteigend sortieren
zahlen.sort (vergleichNumerischAbsteigend);
// und den sortierten Inhalt des Arrays ausgeben
document.write ('<br><br>Inhalt von zahlen (absteigend sortiert): ');
for (i = 0; i < zahlen.length; i++)
  document.write ('<br>&nbsp;zahlen[' + i + ']: ' + zahlen[i]);
// -->
</script>

Spezielle Vergleichsfunktionen sind aber nicht nur für Zahlen denkbar. Müssen beispielsweise selbstdefinierte Objekte sortiert werden, so läßt sich auch für diese Objekte eine spezialisierte Vergleichsfunktion definieren.

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht