Zusammenfassung der vier Möglichkeiten zum Durchlaufen eines Arrays in JS

Dieser Artikel vergleicht und fasst vier Möglichkeiten zum Durchlaufen eines Arrays zusammen:

for-Schleife:

für (let index=0; index < someArray.length; index++) {
 const elem = irgendeinArray[index];
 // ···
}

for-in-Schleife:

für (const key in someArray) {
 console.log(Schlüssel);
}

Array-Methode .forEach():

einigeArray.fürJedes((Element, Index) => {
 console.log(Element, Index);
});

For-Of-Schleife:

für (const elem von someArray) {
 Konsole.log(Element);
}

for-of ist normalerweise die beste Wahl. Wir werden sehen, warum.

for-Schleife [ES1]

Die For-Schleife in JavaScript ist sehr alt, es gibt sie seit ECMAScript 1. Die for-Schleife zeichnet den Index und den Wert jedes Elements von arr auf:

Konstanten arr = ['a', 'b', 'c'];
arr.prop = 'Eigenschaftswert';

für (let index=0; index < arr.length; index++) {
 const elem = arr[index];
 console.log(index, element);
}

// Ausgabe:
// 0, 'ein'
// 1, 'b'
// 2, 'c'

Was sind die Vor- und Nachteile der For-Schleife?

• Es ist sehr vielseitig, kann aber auch umständlich sein, wenn wir über ein Array iterieren möchten.
• Dies ist immer noch nützlich, wenn wir die Schleife nicht beim ersten Array-Element starten möchten, was mit anderen Schleifenmechanismen schwierig ist.
  

for-in-Schleife [ES1]

Die For-In-Schleife ist so alt wie die For-Schleife und existiert auch in ECMAScript 1. Der folgende Code verwendet eine For-In-Schleife, um den Schlüssel von arr auszugeben:

Konstanten arr = ['a', 'b', 'c'];
arr.prop = 'Eigenschaftswert';

für (const key in arr) {
 console.log(Schlüssel);
}

// Ausgabe:
// '0'
// '1'
// '2'
// 'Eigenschaft'

for-in ist keine gute Möglichkeit, eine Schleife über ein Array zu erstellen:

• Es greift auf die Eigenschaftsschlüssel zu, nicht auf die Werte.
• Als Eigenschaftsschlüssel sind die Indizes von Array-Elementen Zeichenfolgen und keine Zahlen.
• Es greift auf alle aufzählbaren Eigenschaftsschlüssel (eigene und geerbte) zu, nicht nur auf die von Array-Elementen.
  

Der eigentliche Zweck des For-In-Zugriffs auf geerbte Eigenschaften besteht darin, über alle aufzählbaren Eigenschaften eines Objekts zu iterieren.

Array-Methode .forEach() [ES5]

Da sich weder for noch for-in besonders gut zum Durchlaufen von Arrays eignen, wurde in ECMAScript 5 eine Hilfsmethode eingeführt: Array.prototype.forEach():

Konstanten arr = ['a', 'b', 'c'];
arr.prop = 'Eigenschaftswert';

arr.forEach((Element, Index) => {
 console.log(Element, Index);
});

// Ausgabe:
// 'ein', 0
// 'b', 1
// 'c', 2

Dieser Ansatz ist wirklich praktisch: Er ermöglicht uns den Zugriff auf Array-Elemente und Indizes, ohne viele Operationen durchführen zu müssen. Wenn wir Pfeilfunktionen (eingeführt in ES6) verwenden, ist die Syntax eleganter.

Die Hauptnachteile von .forEach() sind:

• Sie können „await“ nicht im Schleifenkörper verwenden.
• Es ist nicht möglich, eine .forEach()-Schleife vorzeitig zu verlassen. Und break kann in For-Schleifen verwendet werden.
  

Abbrechen der .forEach()-Lösung

Wenn Sie eine Schleife wie .forEach() abbrechen möchten, gibt es einen Workaround: .some() durchläuft ebenfalls eine Schleife über alle Array-Elemente und stoppt, wenn sein Rückruf einen wahren Wert zurückgibt.

const arr = ['rot', 'grün', 'blau'];
arr.some((Element, Index) => {
 wenn (Index >= 2) {
 return true; // beende die Schleife}
 Konsole.log(Element);
 // Dieser Rückruf gibt implizit „undefined“ zurück, was // ein falscher Wert ist. Und so geht der Zyklus weiter.
});

// Ausgabe:
// 'Rot'
// 'Grün'

Dies kann als Missbrauch von .some() bezeichnet werden, und im Vergleich zu for-of und break ist dieser Code nicht leicht zu verstehen.

for-of-Schleife [ES6]

Die For-of-Schleife wird in ECMAScript 6 unterstützt:

Konstanten arr = ['a', 'b', 'c'];
arr.prop = 'Eigenschaftswert';

für (const elem von arr) {
 Konsole.log(Element);
}
// Ausgabe:
// 'A'
// 'B'
// 'C'

for-of ist sehr effektiv beim Durchlaufen von Arrays:

Wird zum Iterieren über Array-Elemente verwendet.

Sie können await verwenden

• Bei Bedarf kann problemlos zu for-await-of migriert werden.
  

Sie können sogar „Break“ verwenden und mit äußeren Bereichen fortfahren.

for-of und Iterables

for-of kann nicht nur Arrays durchlaufen, sondern auch über iterierbare Objekte wie Map iterieren:

const meineMap = neue Map()
 .set(false, 'nein')
 .set(wahr, 'ja')
;
für (const [Schlüssel, Wert] von myMap) {
 console.log(Schlüssel, Wert);
}

// Ausgabe:
// falsch, „nein“
// wahr, 'ja'

Durch die Iteration über myMap werden [Schlüssel, Wert]-Paare generiert, auf die jeweils durch Destrukturierung direkt zugegriffen werden kann.

For-Of- und Array-Indizierung

Die Array-Methode .entries() gibt ein Iterable von [Index, Wert]-Paaren zurück. Wenn Sie bei dieser Methode For-Of und Destrukturierung verwenden, können Sie einfach auf den Array-Index zugreifen:

const arr = ['Schokolade', 'Vanille', 'Erdbeere'];

für (const [index, elem] von arr.entries()) {
 console.log(index, element);
}
// Ausgabe:
// 0, 'Schokolade'
// 1, 'Vanille'
// 2, 'Erdbeere'

Zusammenfassen

Die Verwendbarkeit der for-of-Schleife ist besser als die von for, for-in und .forEach().

Im Allgemeinen sollten die Leistungsunterschiede zwischen den vier Schleifenmechanismen unbedeutend sein. Wenn Sie rechenintensive Aufgaben ausführen, sollten Sie besser auf WebAssembly umsteigen.

Damit ist dieser Artikel über die vier Möglichkeiten zum Durchlaufen eines Arrays in JS abgeschlossen. Weitere Informationen zum Durchlaufen eines Arrays in JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!