JavaScript für jeden Index

1. JavaScript forEach()-Index
2. Argumente und Parameter der Callback-Funktion forEach()
3. Drucken Sie ungerade und gerade Werte in einem gegebenen Array mit forEach()
4. Schleife unterbrechen/fortsetzen oder beenden mit forEach()
5. Abschluss

Von den Methoden in JavaScript, die für Iterationen in einem Array verwendet werden, ist forEach() die am häufigsten verwendete.

JavaScript forEach()-Index

Ein Array ist eine geordnete Liste von Werten, die unter einem durch einen Index angegebenen Objekt gespeichert sind. forEach() durchläuft die indizierten Werte im Array, beginnend mit index[0] bis index[1], index[2] usw.

Das forEach() ruft die Funktion für jedes Element in einem Array auf und gibt undefiniert zurück, anstatt ein neues Array zurückzugeben, da es nicht verkettbar ist. Dies wird jedoch nicht für leere Elemente und gelöschte oder nicht initialisierte Indizes ausgeführt.

Obwohl es sich nicht um eine Mutator-Methode mit Callback-Funktion handelt, mutiert forEach() das ursprüngliche Array. Wenn die Methode forEach() ein Array elementweise in aufsteigender Indexreihenfolge durchläuft, wird sie als Callback-Funktion bezeichnet.

Wie forEach() und die Callback-Funktion funktionieren

Vor dem Aufruf der Callback-Funktion verarbeitet forEach() zunächst den Bereich der Elemente des Arrays. Dann besucht die Rückruffunktion andere Indizes außer bereits aufgerufenen Indizes oder solchen, die außerhalb des Bereichs liegen.

Wenn ein vorhandenes Element beim Schleifen geändert oder gelöscht wird, ist der Wert, der zuvor an die Funktion forEach() übergeben wurde, der Standardwert. Die Callback-Funktion überspringt jedoch die Elemente, die während der Iteration entfernt oder geändert wurden.

Argumente und Parameter der Callback-Funktion forEach()

Die standardisierte Methode der Callback-Funktion von forEach() besteht aus zwei Argumenten:

array.forEach(function(currentValue, index, array), thisArg)

Die Funktion ist hier die Funktion, mit der wir Werte aufrufen. Da wir jedes Element ausführen, verwenden wir die Callback-Funktion als Funktion.

Die Callback-Funktion enthält drei unten definierte Parameter:

1. currentValue – Das aktuelle Element im Array (zur Schleifenzeit).
2. index – Der Index trägt den Index des currentValue.
3. array – Das Array, zu dem das aktuelle Verarbeitungselement gehört.

Das thisArg ist einfach der an dieses übergebene Wert. Es bezieht sich auch auf diesen Wert, der in callback verwendet wird.

Bei dieser standardisierten Methode können auf Wunsch auch index, array und thisArg verwendet werden. Es werden nur function und currentValue benötigt.

Lassen Sie uns dies anhand eines Beispiels verdeutlichen. Hier haben wir ein Array benannter Buchstaben verwendet, indem wir einige zufällige Buchstaben im Alphabet zugewiesen haben.

var letters = ['b', 'e', 'f', 'j', 'u'];

Verwenden Sie den Parameter aktueller Wert

Code:

letters.forEach(function callback(letters) {
  console.log(letters);
});

Ausgang:

Wenn wir alle Buchstaben im Array einzeln darstellen wollen, können wir forEach() zusammen mit currentValue verwenden. Hier haben wir das Array letters als currentValue verwendet.

Die Verwendung mindestens eines Parameters ist ein Muss, wenn die Funktion ausgeführt wird, da sie jedes einzelne Element innerhalb des Arrays ausführt. Um den obigen Code zu vereinfachen, können wir die Pfeilfunktionsdarstellung wie unten verwenden.

Code:

letters.forEach(letters => console.log(letters))

Ausgang:

Verwenden Sie den index-Parameter

Um den Index jedes Elements im Array zu erhalten, können wir den Code erweitern, indem wir den unten gezeigten Parameter index hinzufügen.

Code:

letters.forEach((letters, index) => {
  console.log('Index of ' + letters + ' is ' + index);
});

Ausgang:

Hier zeigt der Code nacheinander den Wert des Elements zusammen mit seinem Index an.

Verwenden Sie den array-Parameter

Ein weiterer optionaler Parameter, den wir mit der Callback-Funktion verwenden, ist das array. Mit diesem Parameter array können wir die Arrays wie unten separat drucken.

Code:

letters.forEach((letters, index, array) => {console.log(array)})

Ausgang:

Dieser Codeabschnitt gibt das ursprüngliche Array ähnlicher Typen wie die darin enthaltenen Iterationen und Indizes aus. Durch die Anpassung an die obigen Prozesse können wir je nach Anwendungsfall die Funktion forEach() zusammen mit den Parametern index und array implementieren.

Bisher haben wir die Argumente und Parameter der Callback-Funktion separat erklärt. Unten ist ein weiteres Beispiel mit der Callback-Funktion forEach().

Drucken Sie ungerade und gerade Werte in einem gegebenen Array mit forEach()

Code:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach(function(currentValue, index, array) {
  if (currentValue % 2) {
    console.log(' ' + currentValue + ' is an odd number.');
  } else {
    console.log(' ' + currentValue + ' is an even number.');
  }
});

Ausgang:

Hier besteht das Zahlenarray aus einigen Zufallszahlen, die wir im täglichen Leben verwenden. Wir haben die Funktion forEach() zusammen mit den Parametern currentValue, index, array und einer Bedingung if verwendet, um die Zahl auszugeben, unabhängig davon, ob sie ungerade ist oder nicht.

Nach jeder Iteration wird der Wert als Ausgabe gemäß der bedingten Anweisung if gedruckt.

Schleife unterbrechen/fortsetzen oder beenden mit forEach()

Während der Schleife ist die Verwendung von break oder continue eine Methode, um das Array zu beenden, sobald die Bedingungen erfüllt sind. Wie bei anderen Schleifen wenden wir break und continue auf forEach() an.

Verwendung von break:

Code:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach((numbers) => {
  if (numbers == 9) break;

Ausgang:

Mit weiter:

Code:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach((numbers) => {
  if (numbers == 9) continue;
  console.log(numbers);
});

Ausgang:

Wie in der Ausgabe beider Codeausschnitte scheint es, dass die Verwendung der Methode forEach() die Schleife unfähig macht, zu beenden oder break oder continue für die Schleife mit forEach() zu verwenden, ohne eine Ausnahme innerhalb der Callback-Funktion. Daher wird forEach() nicht mit den Schlüsselwörtern break oder continue unterstützt.

Abschluss

Die Funktion forEach() wird zu einer Alternative zur for-Schleife, indem sie die Wiederverwendbarkeit und Lesbarkeit des Codes berücksichtigt.

Code:

var letters = ['b', 'e', 'f', 'j', 'u'];

//using for() loop
Console.log("From For Loop")
for(var i=0; i< letters.length; i++){
    console.log(letters [i]);
}

//using forEach() function
console.log("From ForEach() function")
letters.forEach(function(currentValue){
    console.log(currentValue);
});

Ausgang:

Insgesamt ist forEach() unter den anderen Funktionen in ES5 eine der besten Kompatibilitätsfunktionen auf höchstem Niveau.