JavaScript For Each

Seit der JavaScript-Version 1.7, die derzeit nur durch Firefox ab Version 2.0, sowie durch SeaMonkey ab 1.1 – genauer gesagt durch alle Browser, welche die Gecko-Engine ab Version 1.8.1 verwenden – unterstützt wird, wurde das For-Statement um eine weitere Variante erweitert. Neben der For-in-Schleife wird jetzt ein For-Each-Statement unterstützt, mit dessen Hilfe über alle in einem Objekt enthaltenen Elemente iteriert werden kann. Bitte beachten Sie, dass derzeit nur die oben angegebenen Browser die For-Each-Schleife unterstützen. Im Hinblick auf die allgemeine Ausführbarkeit sollte von der Verwendung dieses Schleifentyps abgesehen werden bis eine breite Unterstützung durch alle aktuellen Browseranwendungen gewärleistet ist.

Auch hier wird die Schleife wieder mittels einer Zählervariablen, welche die jeweiligen Elemente eines Objekts zugewiesen bekommt, gesteuert. Wie bei der For-in-Schleife ist die Abbruchbedingung erfüllt, wenn sich keine weiteren Elemente mehr im Objekt befinden, die bearbeitet werden müssen. Die Zählervariable enthält also bei jedem Durchgang eines der im Objekt enthaltenen Elemente. Dies hat auch hier zur Folge, dass die Anzahl der Schleifendurchgänge (Iterationen) der Anzahl der im Objekt gespeicherten Eigenschaften entspricht. Als Startwert der Schleife fungiert wieder das erste Element, welches im Objekt gespeichert ist.

JavaScript For-Each Beispiel: Verwendung der For-Each-Anweisung

Folgendes Beispiel soll die Verwendung der For-Each-Anweisung demonstrieren. Da der JavaScript Code nur von Browsern ausgeführt werden kann, die JavaScript ab Version 1.7 unterstützen, funktioniert es nur bei Browsern, die dies unterstützen. Um zu gewärleisten, dass bei anderen Browsern keine Fehlermeldungen auftreten, kann der JavaScript-Bereich mit einer entsprechenden Mime-Type-Angabe eingeleitet werden. Wird das Type-Attribut des Script-Tags mit "application/javascript;version=1.7" belegt, so können derartige Fehler verhindert werden. Unterstützt der Browser die JavaScript-Version 1.7 nicht, so wird der entsprechende Script-Bereich ignoriert. Im Beispiel wird davon abgesehen, da der Mime-Type offenbar trotz entsprechender Unterstützung nicht erkannt wird. Andere Browser geben also auf dieser Seite Fehlermeldungen aus.

In der Folge wird im ersten Code-Block eine Variable zur Speicherung des Inhalts eines Warenkorbes mit den Namen cart definiert. Cart speichert ein Array, in dem einzelne Positionen – hier vereinfacht der Einzelpreis und die gewünschte Anzahl der Einheiten vom jeweiligen Posten – eines Warenkorbes gespeichert werden.

Darauf folgt die Definition der Function rechnungssumme, die der Berechnung eben dieser Summe dient. Eine For-Each-Anweisung, welche die einzelnen Positionen durchgeht und dabei schrittweise den zu zahlenden Rechnungsbetrag errechnet, erledigt in dieser Funktion genau diese Aufgabe. Am Ende der Funktion wird die errechnete Summe mit Return als Rückgabewert zurückgegeben. Dann wird der Rechnungsbetrag mit Hilfe der Methode write() im HTML-Dokument ausgegeben.

Im darauf folgenden Code-Bereich wird der Inhalt eines weiteren Arrays ausgegeben. Die Variable tiere speichert Zeichenketten in einem Array. Mit der For-Each-Schleife werden die im Array gespeicherten Elemente einzeln entnommen und in der Variable tier (die hier verwendete Zählervariable) gespeichert. Auch hier wird wieder die write-Methode des JavaScript-Objekts Document zur Ausgabe der Elemente des Arrays verwendet. Bei jedem Durchgang der Schleife wird ein einzelnes Element des String-Arrays im aktuellen HTML-Dokument ausgegeben.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Array mit dem Inhalt eines Warenkorbes initialisieren
var cart = [
       // Attribute für den Einzelpreis und die Anzahl
       { price: 14.99, count: 5 },
       { price: 11.25, count: 2 },
       { price: 5.98, count: 25 },
       { price: 24.95, count: 1 }
     ];
// Funktion zur Berechnung der Rechnungssumme
function rechnungssumme () {
  // Variable zur Speicherung der Summe
  var sum = 0;
  // Jeden Posten im Warenkorb durchgehen
  for each (var item in cart)
    // Der Preis eines einzelnen Postens errechnet
    // sich aus dem Stückpreis und der gewählten
    // Anzahl der Produkte diesem Posten.
    // Jeder Einzelne Posten wird zur Summe addiert.
    sum += item.price * item.count;
  // Endsumme zurückgeben
  return sum
}
// Ausgabe des Rechnungsbetrages
document.write ('Summe: ' + rechnungssumme () + '<br><br>');

// String-Array erzeugen
var tiere = new Array ('Hund', 'Katze', 'Maus');
document.write ('Inhalt des String-Arrays: ');
// Jedes Element des String-Arrays durchgehen
for each (var tier in tiere)
  // Ausgabe des Elements, welches beim aktuellen
  // Schleifendurchgang in tier gespeichert ist.
  document.write (tier + ' ');
// -->
</script>