Iteration über Arrays in JavaScript: 5 fatale Fehler und wie man sie vermeidet

Wie man Arrays in JavaScript durchläuft: Top-Fehler und wie man sie vermeidet

Haben Sie jemals Code geschrieben, der einfach nur eine To-Do-Liste oder Warenkorb-Artikel durchgehen sollte, stattdessen aber undefined, eine Endlosschleife oder, noch schlimmer, still und leise Daten beschädigt hat? Ein bekanntes Problem. Die Frage "How to loop through the items of an array in JavaScript?" ist eine der beliebtesten auf Stack Overflow. Scheint einfach, oder? Aber der Teufel steckt, wie immer, im Detail.

Heute schauen wir uns nicht nur an, wie man Arrays in JavaScript durchläuft. Wir beleuchten die häufigsten Fallstricke, auf die Anfänger (und nicht nur sie) hereinfallen. Sie erfahren, warum for...in Sie hereinlegen kann, wie sich forEach von map unterscheidet und wie Sie eine Endlosschleife in for vermeiden.

Bereit? Dann lasst uns Bugs beheben und schönen Code schreiben.

Fehler Nr. 1: Verwendung von for...in für Arrays

Dies ist wohl der heimtückischste Anfängerfehler. Ein Entwickler sieht das Wort for und das Wort in und denkt: "Oh, das ist ja zum Durchlaufen von allem Möglichen!". Technisch gesehen stimmt das. Aber für Arrays ist das eine Katastrophe.

Die for...in-Schleife ist für das Durchlaufen von Objekteigenschaften gedacht, nicht für Array-Elemente. Ja, ein Array ist in JS auch ein Objekt, aber seine Indizes sind lediglich String-Schlüssel ("0", "1", "2").

Hier liegt der Haken:

\n
• Die Reihenfolge ist nicht garantiert. Obwohl Browser normalerweise die Reihenfolge einhalten, sollte man sich nicht darauf verlassen.
\n
• Es durchläuft die gesamte Prototypen-Vererbung. Wenn Sie oder eine Bibliothek eine Methode zu Array.prototype hinzugefügt haben (z.B. Array.prototype.myCustomMethod = function() {}), wird for...in diese ebenfalls aufgreifen.
\n

Codebeispiel (wie man es NICHT macht):

const arr = [10, 20, 30];\nArray.prototype.customMethod = () => {};\n\nfor (let index in arr) {\n  console.log(arr[index]); // Gibt aus: 10, 20, 30, ƒ () => {}\n}\n

Sehen Sie? Am Ende taucht unsere benutzerdefinierte Funktion auf. Der Code ist kaputt.

Wie es richtig geht:

Verwenden Sie for...of (für Werte) oder die klassische for-Schleife (für Indizes). for...of durchläuft nur die Werte und ignoriert den Prototypen.

// Richtig und sicher\nfor (let value of arr) {\n  console.log(value); // 10, 20, 30\n}\n

Fehler Nr. 2: Den Callback in forEach vergessen

arr.forEach(callback) ist eine elegante Methode, um Arrays in JavaScript zu durchlaufen. Aber viele verwechseln es mit map oder filter. Der Hauptfehler ist zu glauben, dass forEach etwas zurückgibt. Es gibt undefined zurück.

Ein zweiter häufiger Fehler ist, das zweite und dritte Argument des Callbacks (Index und das Array selbst) zu vergessen. Manchmal ist das kritisch.

Beispiel für einen Fehler:

const numbers = [1, 2, 3];\nconst doubled = numbers.forEach(num => num * 2);\nconsole.log(doubled); // undefined! Fehler.\n

Wie es richtig geht:

Wenn Sie ein neues Array basierend auf einem alten erstellen müssen, verwenden Sie map(). Wenn Sie nur eine Aktion ausführen müssen (z.B. in der Konsole ausgeben oder Daten senden), verwenden Sie forEach().

// Zum Erstellen eines neuen Arrays\nconst doubled = numbers.map(num => num * 2); // [2, 4, 6]\n\n// Für Seiteneffekte\nnumbers.forEach((num, index) => {\n  console.log(`Element ${index}: ${num}`);\n});\n

Fehler Nr. 3: Endlosschleife in for

Ein Klassiker. Sie schreiben for (let i = 0; i < arr.length; i++), vergessen aber die Inkrementierung i++ oder, noch schlimmer, verändern das Array innerhalb der Schleife.

Angenommen, Sie filtern das Array im laufenden Betrieb, indem Sie Elemente mit splice() entfernen. Wenn Sie die