Ich bin kürzlich auf eine Interviewfrage gestoßen, in der nach verschiedenen Möglichkeiten für die Iteration über ein JavaScript-Array-Objekt gefragt wurde. Die Eingabeaufforderung schien zunächst unkompliziert, da von mir erwartet wurde, dass ich einige Beispielcode-Schnipsel bereitstelle. Da mich diese Frage jedoch faszinierte, beschloss ich, mich etwas eingehender mit den einzelnen Methoden zu befassen und nicht nur zu untersuchen, wie man sie verwendet, sondern auch, wann und warum man sich für einen Ansatz gegenüber einem anderen entscheiden sollte.

In diesem Artikel werde ich Sie durch verschiedene Methoden zum Durchlaufen von Arrays in JavaScript führen und deren Unterschiede, Vorteile und Anwendungsfälle hervorheben.

for-Schleife
Vorteile:

• Flexibilität: Die for-Schleife bietet Flexibilität, indem sie die Verwendung von break ermöglicht, um die Schleife zu verlassen oder mit dem Springen zur nächsten Iteration fortzufahren. Sie können die Indizes auch direkt angeben und so das Verhalten der Schleife präzise steuern.
• Nicht sequentielle Reihenfolge: Sie haben die Kontrolle über die Iterationsreihenfolge, indem Sie die Schleifenbedingungen anpassen, z. B. rückwärts iterieren oder bestimmte Elemente überspringen.

Bevor die for...of-Schleife eingeführt wurde, war die traditionelle for-Schleife die Standardmethode für die Array-Iteration. Es kann jedoch fehleranfällig sein, wie zum Beispiel, dass der Index bei 1 statt bei 0 beginnt oder irrtümlicherweise arr.length anstelle von arr.length - 1 verwendet wird. Wie MDN vorschlägt: „ist es normalerweise am besten, es für... zu verwenden. oder wenn du kannst."

Wann zu verwenden:
Wenn Sie die vollständige Kontrolle über die Iteration benötigen, z. B. um Iterationen zu überspringen oder in umgekehrter Reihenfolge zu iterieren.
Wenn Sie während der Iteration sowohl den Index als auch den Wert benötigen.

für...von
Vorteile:

• Einfachheit und Empfehlung: Die for...of-Schleife ist eine unkomplizierte und empfohlene Methode zum Durchlaufen eines Arrays, da sie die Indizes automatisch für Sie verarbeitet. Sie können immer noch break verwenden, um die Schleife zu verlassen oder mit der nächsten Iteration fortzufahren, basierend auf den Werten und nicht auf den Indizes.

Wann zu verwenden:
Wenn Sie nur mit Werten arbeiten müssen und keinen Zugriff auf die Indizes benötigen.

Array.prototype.map()
Vorteile:

• Nicht mutierend: Das ursprüngliche Array bleibt unverändert.
• Gibt ein neues Array zurück: Nachdem die angegebene Funktion auf jedes Element angewendet wurde, gibt map() ein neues Array mit den Ergebnissen zurück. Dies macht es ideal für die funktionale Programmierung.

Wann zu verwenden:
Wenn Sie eine Funktion auf jedes Element eines Arrays anwenden möchten und das Ergebnis als neues Array benötigen.

Array.prototype.forEach()
Vorteile:

• Kein Rückgabewert: Mit forEach() können Sie eine Funktion für jedes Element ausführen, ohne ein neues Array zurückzugeben. Es wird häufig zum Ausführen von Nebeneffekten wie Protokollierung, Aktualisieren von Variablen oder Bearbeiten des DOM verwendet.

Wann zu verwenden:
Wenn Sie eine Funktion auf jedes Element eines Arrays anwenden möchten, aber kein neues Array zurückgegeben werden muss.

Array.prototype.entries()
Vorteile:

• Zugriff auf Indizes und Werte: Einträge() gibt einen Iterator zurück, der sowohl den Index als auch den Wert jedes Elements bereitstellt. Dies kann einfacher und lesbarer sein als die Verwendung einer herkömmlichen for-Schleife. Wenn ein Array-Slot leer ist, wird für den Wert undefiniert zurückgegeben.

Wann zu verwenden:
Wenn Sie sowohl auf die Indizes als auch auf die Werte von Array-Elementen zugreifen müssen.

Array.prototype.keys()
Vorteile:

• Zugriff auf Indizes:keys() gibt einen Iterator für die Indizes des Arrays zurück. Dies ist nützlich, wenn Sie nur die Indizes und nicht die Werte benötigen. In Arrays mit geringer Dichte enthält [...arr.keys()] auch Indizes für leere Slots (wobei der Wert undefiniert ist).

Wann zu verwenden:
Wenn Sie einen Iterator benötigen, der nur die Indizes der Array-Elemente bereitstellt.

Array.prototype.values()
Vorteile:

• Zugriff auf Werte: Values() gibt einen Iterator für die Werte des Arrays zurück. Dies ähnelt der Verwendung von for...of mit Arrays, stellt jedoch einen Iterator anstelle einer Schleife bereit.

Wann zu verwenden:
Wenn Sie einen Iterator benötigen, der nur die Werte der Array-Elemente bereitstellt.

Was sind Array-Iteratoren?:
Array.prototype.entries(), Array.prototype.keys() und Array.prototype.values() geben neue Array-Iteratorobjekte zurück. Mit diesen Iteratoren können Sie eine Array-ähnliche Sammlung Element für Element durchlaufen. Sie verfügen über eine next()-Methode, die den nächsten Wert in der Sequenz bereitstellt, die bei Bedarf aufgerufen werden kann und so Speicherplatz spart.

Hier ist ein Beispiel mit Einträgen():

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();

console.log(iterator.next()); // { value: [0, 'a'], done: false }
console.log(iterator.next()); // { value: [1, 'b'], done: false }
console.log(iterator.next()); // { value: [2, 'c'], done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Um ehrlich zu sein, waren mir einige Details und Einsatzmöglichkeiten dieser Methoden nicht ganz bewusst, daher war es sehr wichtig, diese Interviewfrage zu beantworten und mein Verständnis zu vertiefen. Unabhängig davon, ob Sie mit einfachen Schleifen oder fortgeschritteneren Techniken der funktionalen Programmierung arbeiten, kann die Kenntnis dieser Methoden die Effizienz und Lesbarkeit Ihres Codes erheblich verbessern.