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.

« zurück zu Seite 1 2 3