Wie kann ich mit JavaScript alle Einträge in einem Array durchlaufen?

Notiz: Diese Antwort ist hoffnungslos veraltet. Einen moderneren Ansatz finden Sie unter die Methoden, die auf einem Array verfügbar sind. Interessante Methoden könnten sein:

• für jede
• Karte
• Filter
• Postleitzahl
• reduzieren
• jeder
• etwas

Die Standardmethode zum Durchlaufen eines Arrays in JavaScript ist eine Vanille for-Schleife:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

Beachten Sie jedoch, dass dieser Ansatz nur gut ist, wenn Sie ein dichtes Array haben und jeder Index von einem Element belegt ist. Wenn das Array spärlich ist, können Sie bei diesem Ansatz auf Leistungsprobleme stoßen, da Sie über viele Indizes iterieren, die dies nicht tun Ja wirklich existieren im Array. In diesem Fall ein for .. in-Schleife könnte eine bessere Idee sein. Jedochmüssen Sie durch geeignete Maßnahmen sicherstellen, dass nur die gewünschten Eigenschaften des Arrays (d. h. der Array-Elemente) bearbeitet werden, da die for..in-loop wird auch in älteren Browsern aufgelistet oder wenn die zusätzlichen Eigenschaften als definiert sind enumerable.

In ECMAScript 5 Es wird eine forEach-Methode für den Array-Prototyp geben, aber sie wird in älteren Browsern nicht unterstützt. Um es konsistent verwenden zu können, müssen Sie also entweder eine Umgebung haben, die es unterstützt (z. Node.js für serverseitiges JavaScript) oder verwenden Sie ein “Polyfill”. Das Polyfill für diese Funktionalität ist jedoch trivial und da es den Code leichter lesbar macht, ist es ein gutes Polyfill zum Einfügen.

Schleife rückwärts

Ich denke, die umkehren Die for-Schleife verdient hier eine Erwähnung:

for (var i = array.length; i--; ) {
     // process array[i]
}

Vorteile:

• Sie müssen kein temporäres deklarieren len Variable, oder vergleichen Sie mit array.length bei jeder Iteration, von denen jede eine winzige Optimierung sein kann.
• Geschwister entfernen vom DOM in umgekehrter Reihenfolge ist in der Regel effizienter. (Der Browser muss weniger Elemente in seinen internen Arrays verschieben.)
• wenn du ändere das Array während der Schleife, am oder nach dem Index ich (z. B. Sie entfernen oder fügen ein Element bei ein array[i]), dann würde eine Vorwärtsschleife das Element überspringen, das nach links in Position verschoben wurde ichoder erneut verarbeiten ichte Element, das nach rechts verschoben wurde. In einer traditionellen for-Schleife müssen Sie könnte aktualisieren ich um auf das nächste Element zu zeigen, das verarbeitet werden muss – 1, aber einfach die Richtung der Iteration umzukehren ist oft a einfacher und elegantere Lösung.
• Ebenso beim Ändern oder Entfernen verschachtelt DOM-Elemente, die umgekehrt verarbeitet werden können Fehler umgehen. Ziehen Sie beispielsweise in Betracht, das innere HTML eines übergeordneten Knotens zu ändern, bevor Sie seine untergeordneten Knoten behandeln. Wenn der untergeordnete Knoten erreicht ist, wird er vom DOM getrennt, da er durch einen neu erstellten untergeordneten Knoten ersetzt wurde, als das innerHTML des übergeordneten Knotens geschrieben wurde.
• es ist kürzer zu tippen und lesen, als einige der anderen verfügbaren Optionen. Obwohl es verliert forEach() und zu ES6 for ... of.

Nachteile:

• Es verarbeitet die Artikel in umgekehrter Reihenfolge. Natürlich, wenn Sie aus den Ergebnissen ein neues Array erstellen oder Dinge auf dem Bildschirm drucken die Ausgabe wird umgekehrt in Bezug auf die ursprüngliche Bestellung.
• Das wiederholte Einfügen von Geschwistern in den DOM als erstes Kind, um ihre Ordnung beizubehalten, ist weniger effizient. (Der Browser müsste die Dinge immer wieder nach rechts verschieben.) Um DOM-Knoten effizient und in der richtigen Reihenfolge zu erstellen, schleifen Sie einfach vorwärts und hängen Sie wie gewohnt an (und verwenden Sie auch ein “Dokumentfragment”).
• Die Umkehrschleife ist verwirrend an Junior-Entwickler. (Sie können dies als Vorteil betrachten, je nach Ihrer Einstellung.)

Soll ich es immer verwenden?

Einige Entwickler verwenden die umgekehrte for-Schleife standardmäßiges sei denn, es gibt einen guten Grund für eine Vorwärtsschleife.

Obwohl die Leistungssteigerungen normalerweise unbedeutend sind, schreit es irgendwie:

“Mach das einfach mit jedem Punkt in der Liste, die Reihenfolge ist mir egal!”

In der Praxis ist das jedoch so nicht eigentlich ein zuverlässiger Hinweis auf Vorsatz, da es nicht von jenen Gelegenheiten zu unterscheiden ist, bei denen Sie tun kümmere dich um die Reihenfolge, und tue es wirklich müssen rückwärts schleifen. Tatsächlich wäre also ein anderes Konstrukt erforderlich, um die Absicht “egal” genau auszudrücken, etwas, das derzeit in den meisten Sprachen nicht verfügbar ist, einschließlich ECMAScript, das aber beispielsweise aufgerufen werden könnte forEachUnordered().

Wenn die Reihenfolge keine Rolle spielt, und Effizienz ein Problem ist (in der innersten Schleife eines Spiels oder einer Animations-Engine), dann kann es akzeptabel sein, die umgekehrte for-Schleife als Ihr Go-to-Muster zu verwenden. Denken Sie daran, dass Sie in bestehendem Code eine umgekehrte for-Schleife sehen bedeutet nicht unbedingt dass die Reihenfolge irrelevant!

Es war besser, forEach() zu verwenden

Im Allgemeinen für Code auf höherer Ebene, wo Klarheit und Sicherheit Sind größere Bedenken, habe ich zuvor die Verwendung empfohlen Array::forEach als Ihr Standardmuster für Schleifen (obwohl ich heutzutage lieber verwende for..of). Gründe zu bevorzugen forEach über eine Umkehrschleife sind:

• Es ist übersichtlicher zu lesen.
• Darauf weist es hin ich wird nicht innerhalb des Blocks verschoben (was immer eine mögliche Überraschung ist, die sich in long versteckt for und while Schleifen).
• Es gibt Ihnen einen freien Spielraum für Schließungen.
• Es reduziert das Durchsickern lokaler Variablen und zufällige Kollisionen mit (und Mutationen von) äußeren Variablen.

Wenn Sie dann die umgekehrte for-Schleife in Ihrem Code sehen, ist dies ein Hinweis darauf, dass sie aus gutem Grund umgekehrt ist (vielleicht einer der oben beschriebenen Gründe). Und wenn Sie eine traditionelle Vorwärts-For-Schleife sehen, kann dies darauf hindeuten, dass eine Verschiebung stattfinden kann.

(Wenn die Erörterung der Absicht für Sie keinen Sinn ergibt, können Sie und Ihr Code davon profitieren, Crockfords Vortrag zu sehen Programmierstil & Ihr Gehirn.)

Es ist jetzt noch besser, for..of zu verwenden!

Es wird darüber diskutiert, ob for..of oder forEach() sind vorzuziehen:

• Für maximale Browserunterstützung for..of erfordert eine Polyfill für Iteratoren, was die Ausführung Ihrer App etwas langsamer und den Download etwas größer macht.

• Aus diesem Grund (und um die Verwendung von map und filter), einige Frontend-Styleguides Verbot for..of ganz und gar!

• Die oben genannten Bedenken gelten jedoch nicht für Node.js-Anwendungen, bei denen for..of wird jetzt gut unterstützt.

• Und außerdem await funktioniert nicht Innerhalb forEach(). Verwenden for..of ist das klarste Muster in diesem Fall.

Persönlich neige ich dazu, das zu verwenden, was am einfachsten zu lesen ist, es sei denn, Leistung oder Minimierung sind zu einem Hauptanliegen geworden. Also benutze ich heute lieber for..of anstatt forEach()aber ich werde immer verwenden map oder filter oder find oder some sofern anwendbar. (Für meine Kollegen verwende ich selten reduce.)

Wie funktioniert es?

for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse

Das werden Sie merken i-- ist der mittlere Satz (wo wir normalerweise einen Vergleich sehen) und der letzte Satz ist leer (wo wir normalerweise sehen i++). Das bedeutet, dass i-- wird auch als verwendet Zustand zur Fortsetzung. Entscheidend ist, dass es ausgeführt und überprüft wird Vor jede Iteration.

• Wie kann es beginnen array.length ohne zu explodieren?

  Weil i-- läuft Vor Bei jeder Iteration greifen wir bei der ersten Iteration tatsächlich auf das Element zu array.length - 1 was Probleme mit vermeidet Array außerhalb der Grenzen undefined Artikel.

• Warum hört es nicht vor dem Index 0 auf zu iterieren?

  Die Schleife hört auf zu iterieren, wenn die Bedingung i-- wird zu einem falschen Wert ausgewertet (wenn es 0 ergibt).

  Der Trick ist, dass anders --idas Nachlaufen i-- Operator dekrementiert i aber liefert den Wert Vor das Dekrement. Ihre Konsole kann dies demonstrieren:

  > var i = 5; [i, i--, i];

  [5, 5, 4]

  Also bei der letzten Iteration, ich war vorher 1 und der i-- Ausdruck ändert es zu 0 aber tatsächlich nachgibt 1 (Wahrheit), und so vergeht die Bedingung. Bei der nächsten Iteration i-- Änderungen ich zu -1 aber nachgibt 0 (falsey), was dazu führt, dass die Ausführung sofort aus dem unteren Ende der Schleife herausfällt.

  In der traditionellen Vorwärts-for-Schleife i++ und ++i austauschbar sind (wie Douglas Crockford betont). Bei der umgekehrten for-Schleife müssen wir uns jedoch daran halten, da unser Dekrement auch unser Bedingungsausdruck ist i-- wenn wir das Element bei Index 0 verarbeiten möchten.

Kleinigkeiten

Manche Leute zeichnen gerne einen kleinen Pfeil in die Rückseite for Schleife und endet mit einem Augenzwinkern:

for (var i = array.length; i --> 0 ;) {

Credits gehen an WYL dafür, dass es mir die Vorteile und Schrecken der umgekehrten For-Schleife gezeigt hat.

Etwas C-Stil-Sprachen verwenden foreach Aufzählungen durchlaufen. In JavaScript geschieht dies mit dem for..in Schleifenstruktur:

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Es gibt einen Haken. for..in durchläuft alle aufzählbaren Mitglieder des Objekts und die Mitglieder seines Prototyps. Um das Lesen von Werten zu vermeiden, die durch den Prototyp des Objekts geerbt werden, überprüfen Sie einfach, ob die Eigenschaft zum Objekt gehört:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

Zusätzlich, ECMAScript 5 hat a hinzugefügt forEach Methode zu Array.prototype die verwendet werden kann, um ein Array mit einem Callback aufzuzählen (das Polyfill befindet sich in der Dokumentation, sodass Sie es weiterhin für ältere Browser verwenden können):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Es ist wichtig, das zu beachten Array.prototype.forEach wird nicht unterbrochen, wenn der Rückruf zurückkehrt false. jQuery und Unterstrich.js bieten ihre eigenen Variationen an each Schleifen bereitzustellen, die kurzgeschlossen werden können.

für … von | für jeden | Karte

Verwenden der modernen JavaScript-Syntax zum Durchlaufen von Arrays

const fruits = ['🍎', '🍋', '🍌' ]

👉🏽 für … von

for (const fruit of fruits) {
    console.log(fruit)  // '🍎', '🍋', '🍌'
}

👉🏽 für jeden

fruits.forEach(fruit => {
    console.log(fruit)  // '🍎', '🍋', '🍌'
})

👉🏽 Karte

*Abweichend von den beiden oben, map() schafft ein neues Array und erwartet es von Ihnen Rückkehr etwas nach jeder Iteration.

fruits.map(fruit => fruit)   // ['🍎', '🍋', '🍌' ]

🛑 Wichtig: Als Karte() soll bei jeder Iteration einen Wert zurückgeben, es ist eine ideale Methode zum Transformieren von Elementen in Arrays:

fruits.map(fruit => 'cool ' + fruit)   // ['cool 🍎', 'cool 🍋', 'cool 🍌' ]

Auf der anderen Seite, für … von und für jede( ) müssen nichts zurückgeben und deshalb verwenden wir sie normalerweise, um logische Aufgaben auszuführen, die Dinge außerhalb manipulieren.

Sie werden sozusagen if()-Anweisungen, Seiteneffekte und Protokollierungsaktivitäten in diesen beiden finden.

👌🏾 TIPP: Sie können auch den Index (sowie das gesamte Array) in jeder Iteration in Ihren .map()- oder .forEach()-Funktionen haben.

Übergeben Sie ihnen einfach zusätzliche Argumente:

fruits.map((fruit, i) =>  i + '  ' + fruit)

// ['0 🍎', '1 🍋', '2 🍌' ]

fruits.forEach((f, i, arr) => {
    console.log( f + ' ' + i + ' ' +  arr )
})

// 🍎  0  🍎, 🍋, 🍌,
// 🍋  1  🍎, 🍋, 🍌,
// 🍌  2  🍎, 🍋, 🍌,