hallo@a-coding-project.de

forEach Schleifen für Arrays in JavaScript

Um alle Elemente eines Arrays zu durchlaufen gibt es in JavaScript eine forEach Funktion.

var einArray = ['Peter', 'Paul', 'Mary']; 
einArray.forEach(function(einArrayElement) { 
    console.log(einArrayElement); 
});

forEach steht jedem Array-Objekt zur Verfügung. Die Funktion erwartet als Parameter eine weitere Funktion (function(einArrayElement)), die beschreibt, was mit jedem Element des Arrays geschehen soll. Das jeweilige Element wird dieser Funktion als Parameter mitgegeben. Solche Funktionen werden auch Iteratorfunktionen genannt.

Die Iteratorfunktion kann neben dem aktuellen Array-Element noch weitere Parameter annehmen. Als zweiten Parameter kann der Index des aktuellen Elements übergeben werden und ein dritter Parameter kann eine Referenz auf das Arrays selbst sein.

einArray.forEach(function(einArrayElement, derIndex, dasArray) { 
    console.log(einArrayElement 
        + ' hat den Index ' 
        + derIndex 
        + ' und das Array enthält ' 
        + dasArray.length 
        + ' Elemente'); 
});

Neben der Iteratorfunktion kann forEach optional noch ein Parameter übergeben werden, der angibt auf welches Objekt das Schlüsselwort this zeigen soll.

Beim Einsatz von forEach muss man beachten, dass die Funktion von älteren Browsern wie dem Internet Explorer 8 (oder älter) nicht unterstützt wird. Müssen solche Browser unterstützt werden, kann man stattdessen auf die for Schleife zurückgreifen. Das obige Beispiel könnte dann folgendermaßen aussehen.

for (var i = 0; i < einArray.length; i++) { 
    console.log(einArray[i]); 
}

for…in vs. for…of Schleifen

for…in Schleifen haben in JavaScript eine ähnliche Syntax wie foreach – Schleifen in PHP, sind jedoch meistens die falsche Wahl, wenn die Werte eines JavaScritp-Arrays durchlaufen werden sollen. Sie sind eigentlich für das Durchlaufen der Eigenschaften eines Objekts gedacht und sollten dementsprechend eingesetzt werden.

Das Array-Pendant zur for…in Schleife ist die for…of Schleife.

for (einArrayElement of einArray) { 
    console.log(einArrayElement); 
}

Allerdings gilt auch hier die Einschränkung, dass sie nicht in allen Browsern genutzt werden kann, da sie zum ECMAScript 6 Standard gehört, der zum jetzigen Zeitpunkt noch nicht endgültig ist.

Weitere (zumeist aber noch nicht browserübergreifend nutzbare) Möglichkeiten zum Iterieren und dynamischen Ändern von Arrays sind:

map
some
every
filter
reduce

Kommentare

JavaScript: Array - HTMLWorld schrieb am 09.04.2015:

[&#8230;] In JavaScript bietet auch eine Möglichkeit Arrays mit einer foreach-Schleife zu durchlaufen. Mehr dazu: JavaScript Foreach [&#8230;]

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant