JavaScript forEach (): Die Schleifen für Arrays erklärt

Wie viele andere Programmiersprachen verfügt auch JavaScript über verschiedene Möglichkeiten der Schleifenbildung, oder Iteration, durch Datensammlungen. Bei der Iteration durch Arrays handelt es sich um einen Vorgang, der beim Programmieren eine wichtige Rolle spielt.

In diesem Beitrag werden Sie die forEach-Methode und ihre Funktionsweise näher kennenlernen und erfahren, was das für Sie und Ihre Software bedeuten kann. Wir werden anhand einiger Code-Snippets die Syntax erklären, Anwendungsfälle behandeln und uns einen Codepen mit Live-Beispielen für die Verwendung der Methode anschauen. Die Verlinkungen unten erleichtern Ihnen die Navigation durch diesen Beitrag.

• forEach-Syntax
• forEach-Parameter-Syntax
• So verwenden Sie forEach in JavaScript
• JavaScript forEach Beispiele

Was ist JavaScript-forEach?

Die forEach-Methode in JavaScript ist eine effektive Methode zur Änderung von und Interaktion mit Datensammlungen. Die Methode ist für bestimmte Variablentypen – Sammlungen – reserviert, über deren einzelne Werte sie iteriert.

Die forEach-Methode ermöglicht es, Sammlungen wie Arrays, Sets und Objekte zu bearbeiten. Sie kann jedoch auch für verschiedene andere Zwecke verwendet werden, z. B. zur Anzeige von Informationen, zur Erstellung neuer Datensammlungen und sogar zur Bestätigung von Informationen. Hierbei handelt es sich nicht um die einzigen Verwendungsmöglichkeiten für die forEach-Methode, aber dazu später mehr.

Die forEach-Schleife hat eine ziemlich standardisierte Syntax. Allerdings kann sie aufgrund ihrer Beschaffenheit zunächst etwas verwirrend aussehen. Beschäftigen wir uns also als Nächstes mit der Syntax der forEach-Schleife bevor wir uns einige Beispiele ansehen.

forEach-Syntax

Die Syntax der forEach-Methode von JavaScript ist relativ einfach. Sie akzeptiert eine Funktion als Parameter und einen Wert, der normalerweise als „thisValue“ bezeichnet wird. Doch bevor wir uns damit genauer befassen, wollen wir uns erst einmal ansehen, wie das in seiner grundlegendsten Form aussieht.

 
array.forEach(function(currVal, index, arr), thisValue)

In diesem Code-Snippet haben wir ein Array mit dem generischen Namen „array“, und die forEach-Methode ist mit ihm verkettet.

Die forEach-Methode akzeptiert:

• „function“ (erforderlich): Diese Funktion liefert die auszuführende Aktion für jedes Element in der Zielsammlung.
• „thisValue“ (optional): Mit diesem Parameter wird ein „this“-Wert identifiziert, auf den innerhalb der Schleife mit dem Schlüsselwort „this“ zugegriffen werden kann.

Innerhalb der forEach-Methode befindet sich eine generische Funktion, die drei eigene Parameter akzeptiert. Im nächsten Abschnitt wollen wir diese Funktion näher aufschlüsseln, um zu verstehen, wie sie funktioniert.

forEach-Parameter-Syntax

Der „function“-Parameter der forEach-Methode:

Der „function“-Parameter sieht sehr vertraut aus, weil er die Standardsyntax für die Deklaration oder den Aufruf einer Funktion ist. Entwicklerinnen und Entwickler können dies auf zwei Arten tun: Die erste Option ist, die Funktion direkt in die forEach-Methode zu schreiben, wie unten gezeigt.

 
firstNames.forEach(
  function(currVal, id, arr) {
    /*do neat stuff here*/
  },
thisVal);

Die andere Möglichkeit besteht darin, die Funktion außerhalb des Geltungsbereichs der forEach-Methode zu schreiben und dann die Funktion als forEach-Parameter aufzurufen, wie unten zu sehen ist.

 
/*Declaring the function, and calling it as the forEach param*/
array.forEach(coolFunct);
function coolFunct (item) {
  /*do neat stuff here*/
}

Schauen wir uns nun die Bestandteile der Funktion selbst an, um besser zu verstehen, was sie braucht, um korrekt zu funktionieren.

function(currVal, id, arr)

• „currVal“ (erforderlich): Dieser Wert enthält das aktuelle Iterationselement in der Schleife.
• „index“ (optional): Dieser Wert ist die Indexposition des Elements in der aktuellen Iteration.
• „arr“ (optional): Dieser Wert enthält das Array, zu dem das aktuelle Element gehört.

Nachdem wir nun den ersten Parameter der forEach-Methode besprochen haben, wollen wir uns nun den folgenden optionalen Parameter, „thisValue“, ansehen.

Der „thisValue“-Parameter der forEach-Methode:

thisVal

• „thisVal“ (optional): Ermöglicht den Zugriff auf ein JavaScript-Objekt außerhalb der forEach-Schleife.

Nachdem Sie nun wissen, welche Parameter die forEach-Methode akzeptiert und wie sie funktioniert, wollen wir nun behandeln, wie man sie verwendet.

So verwenden Sie forEach in JavaScript

Die Verwendung der forEach-Methode zum Durchlaufen von Sammlungen vereinfacht die wichtige Aufgabe der Datenverwaltung in jeder Software. Aber wie wirkt sich das auf Sie und Ihre Arbeit in der Softwareentwicklung aus?

Einige Beispiele für die Verwendung einer forEach-Methode zur Iteration sind die Anzeige von Benutzerinformationen und das Umstrukturieren von Daten. Vor diesem Hintergrund kann es unter Umständen schwierig sein, zu erkennen, wann die forEach-Methode besser geeignet ist als andere Looping-Ansätze.

Die traditionellen Schleifen, die in JavaScript enthalten sind, erlauben es, sie unter bestimmten Bedingungen zu verlassen oder zu beenden. Zwei gute Beispiele dafür sind die Schlüsselwörter „break“ und „return“, die signalisieren, dass die Schleife beendet werden soll.

Im Gegensatz dazu erlaubt die forEach-Schleife kein vorzeitiges Beenden ihrer Ausführung. Stattdessen wird die Schleife, sobald sie einmal begonnen hat, in jedem Fall bis zum Ende durchlaufen – mit Ausnahme des Auftretens eines Abbruchfehlers.

Beispiele für JavaScript-forEach-Loops

Das folgende Codepen-Beispiel eignet sich hervorragend, um die optimale Nutzung der forEach-Methode zu illustrieren. Dieses Beispiel enthält sowohl die optionalen Parameter der forEach-Methode als auch die erforderliche Funktion, die sie akzeptiert.

Diese Codepens zeigen den HTML-, CSS- und JavaScript-Code, der zum Kreieren der visuellen Vorschau verwendet wird, die auf der rechten Seite zu sehen ist. Da der Fokus auf JavaScript liegt, können HTML und CSS zu diesem Zeitpunkt ignoriert werden.

Siehe Pen   Unbenannt   von HubSpot (@hubspot) auf CodePen.

Erste Schritte in der Verwendung der forEach-Schleife in JavaScript

Dieser Beitrag behandelt die Grundlagen von forEach-Loops in JavaScript und wie Sie sie in Ihrer Softwareentwicklung verwenden können. Ihnen ist nun bekannt, was eine forEach-Schleife ist, beginnend mit der grundlegenden Syntax und ihren optionalen und erforderlichen Parametern. Darüber hinaus wissen Sie jetzt, wie Sie die Funktion und die Parameter sinnvoll einsetzen können.

 

Titelbild: fizkes / iStock / Getty Images Plus