indexOf, filter, forEach, map – JavaScript Arrays ohne Schleifen

Das Arbeiten mit Arrays in JavaScript verkommt oft zu einer extrem nervigen Verkettung von for Schleifen. Da werden dann Zählervariablen von i bis n eingeführt nur um rauszufinden ob irgendwo in den Tiefen des Arrays ein bestimmter Wert vorkommt. Setzt man sich dann sechs Monate (oder manchmal auch Tage) später nochmal an den Code hat man schon wieder vergessen, was diese Monströsität eigentlich genau sollte.

Dem können wir aber vorbeugen. In ECMAScript 5 kamen einige neue Arrayfunktionen dazu, die uns das Leben erleichtern sollen und ein regelmäßiger Einsatz dieser Funktionen macht unseren Code deutlich lesbarer und verständlicher. In diesem Artikel sehen wir uns die Funktionen im Detail an um die richtige Anwendungsweise auch genauer zu verstehen.

indexOf – Kommt Wert x in Array y vor?

Wie findet man raus, ob in meinem Array ein bestimmter Wert vorkommt? Vor indexOf war die wahrscheinlichste Antwort dafür eine for Schleife (wie immer), ungefähr so:

 

Es ist kaum auf den ersten Blick möglich, hier zu erkennen, was wir eigentlich suchen. Außerdem verbrauchen wir viele Zeilen ganz umsonst. Daher ist die erste Funktion, die wir uns ansehen, indexOf().

indexOf nimmt als Parameter einfach den Wert, den wir im Array suchen wollen. Wird der Wert gefunden bekommen wir den dazu passenden Index zurück, andernfalls -1. Aus obigem Beispiel würde also folgender Code werden:

Schon viel besser und man erkennt sofort, was wir bezwecken. Es gibt aber eine kleine Falle:

Sollte unser gesuchter Wert an der ersten Stelle im Array stehen (was im Beispiel ja der Fall ist) gibt indexOf uns natürlich den Index 0 zurück (Arrays fangen immer bei 0 an zu zählen wie man als Programmierer ja weiß). Das bedeutet wenn wir einfach eine Überprüfung auf den Rückgabewert von indexOf() machen würde diese 0 zu einem false interpretiert werden, obwohl der Wert ja im Array ist. Wir müssen daher also immer auf den Rückgabewert -1 prüfen!

 

 

filter – Der Name sagt schon alles

Machen wir gleich weiter mit dem nächsten Array. Gehen wir von folgender Situation aus:
Wir haben ein Array mit verschiedenen Werten und wollen daraus aber nur alle Werte die größer als 3 sind. Früher hätte das beispielsweise so ausgesehen:

 

Pfui! Da dauert es nicht mal sechs Tage bis wir vergessen haben, was der Codeausschnitt eigentlich machen soll. Verbessern wir das ganze mit der filter() Funktion. Filter nimmt als Parameter eine Callback Funktion und führt diese für jeden Wert im Array einmal aus. Die Callback Funktion bekommt dabei den Wert als Parameter. Gibt die Funktion true zurück wird der Wert daraufhin in ein neues Ergebnisarray übernommen, bei false nicht.

Klingt etwas kompliziert, ist es aber nicht. Schreiben wir also das Beispiel von oben nochmal schöner!

 

Ist das nicht angenehmer zu lesen? Weniger Einrückungen und jeder versteht sofort, dass valuesOverThree eine gefilterte Version von myArray ist.

 

 

forEach – das bessere for (manchmal)

An dieser Stelle muss ich mir jetzt dringend mal an die eigene Nase fassen – ich benutze selbst immer noch viel zu häufig einfache for Schleifen wenn ich durch ein Array iteriere um eine Funktion für jedes Element aufzurufen. Um euch vom selben Fehler abzuhalten (und mich selbst daran zu erinnern, das zu verbessern) hier also die Erklärung zu forEach:

Wie der Name schon sagt führt forEach() eine Callback Funktion für jeden einzelnen Wert im Array aus und übergibt dieser den Wert als Parameter.

Aus folgendem Beispiel

wird also die deutlich schönere Variante

Es gibt aber auch hier eine kleine Falle. Im Gegensatz zu for, welches man mit einem break Befehl beenden kann, ist das bei forEach leider nicht möglich. Wenn wir also ein größeres Array durchsuchen und die Möglichkeit besteht, dass bereits nach kurzer Zeit das Ergebnis gefunden ist, gibt es bessere Alternativen als forEach.

 

 

map – Arrays manipulieren, die coole Variante

Wir haben ein Array und möchten es anhand bestimmter Bedingungen manipulieren. Die map() Funktion hilft uns dabei und führt für jeden Wert im Array eine Funktion aus (wie immer bekommen wir als Parameter den Wert). Aus den Rückgabewerten wird dann ein neues Array erstellt. Sehen wir uns wie immer ein Beispiel an:

Und hier nun die modernere Variante mit map():

Die map() Funktion ist natürlich noch mächtiger, wenn wir die veränderten Daten in einem neuen Array haben wollen. Ein weiterer Vorteil ist, dass wir direkt chainen können und an die map() Funktion (da diese ja ein Array zurückgibt) beispielsweise direkt ein .forEach() anhängen können, um auf alle Ergebniswerte direkt eine weitere Funktion aufzurufen.

 

 

Hast du noch weitere heiße Tipps, wie man den Code übersichtlicher machen kann? Oder selbst Erfahrungen mit den oben genannten Funktionen gesammelt? Hinterlass mir doch einen Kommentar unter dem Artikel, ich freu mich!

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*