Welche Schleife ist in JavaScript die schnellste?

Wenn wir wissen, welche For-Schleife oder welcher Iterator für unsere Anforderungen geeignet ist, vermeiden wir dumme Fehler, die die Leistung unserer Anwendung beeinträchtigen.

JavaScript ist der Evergreen im Bereich der Webentwicklung. Ob JavaScript-Frameworks (wie Node.js, React, Angular, Vue usw.) oder natives JavaScript, sie alle haben eine sehr große Fangemeinde. Lassen Sie uns über modernes JavaScript sprechen. Schleifen waren schon immer ein wichtiger Bestandteil der meisten Programmiersprachen und das moderne JavaScript bietet uns viele Möglichkeiten, über Werte zu iterieren oder eine Schleife auszuführen.
Die Frage ist jedoch, ob wir wirklich wissen, welche Schleife oder Iteration für unsere Anforderungen am besten geeignet ist. Es gibt viele Variationen der For-Schleife, z. B. for, for (reverse), for...of, forEach, for...in und for...await. In diesem Artikel werden diese besprochen.

Welche Schleife ist schneller?

Die Antwort ist eigentlich: für (in umgekehrter Reihenfolge)

Am meisten überraschte mich, dass ich nach dem Testen auf meinem lokalen Rechner akzeptieren musste, dass for (reverse) die schnellste aller for-Schleifen ist. Nachfolgend gebe ich ein Beispiel für die Ausführung einer Schleife über ein Array mit mehr als einer Million Elementen.
Haftungsausschluss: Die Genauigkeit der console.time()-Ergebnisse hängt stark von der Konfiguration des Systems ab, auf dem wir die Tests ausführen. Mehr zum Thema Genauigkeit erfahren Sie hier.

Konstante Million = 1000000; 
const arr = Array(Millionen);

// Hinweis: Dies ist ein spärlich besetztes Array und sein Inhalt sollte angegeben werden, da er sonst in verschiedenen Schleifen unterschiedlich behandelt wird:
// const arr = [...Array(Million)]

Konsole.Zeit('⏳');
for (let i = arr.length; i > 0; i--) {} // für (umgekehrte Reihenfolge): - 1,5 ms
für (let i = 0; i < arr.length; i++) {} // für :- 1,6 ms
arr.forEach(v => v) // für jeden: - 2,1 ms
für (const v of arr) {} // für ... von :- 11,7 ms
Konsole.timeEnd('⏳');

Der Grund für dieses Ergebnis ist einfach. Im Code dauern die Vorwärts- und Rückwärtsschleifen fast gleich lang, der Unterschied beträgt nur 0,1 Millisekunden. Der Grund hierfür liegt darin, dass for (umgekehrte Reihenfolge) die Startvariable let i = arr.length nur einmal berechnen muss, während in der Vorwärtsschleife for nach jeder Variablenerhöhung die Bedingung i<arr.length überprüft wird. Dieser subtile Unterschied ist nicht sehr wichtig und kann ignoriert werden. (Anmerkung des Übersetzers: Bei Codes mit kleinen Datenmengen oder solchen, die nicht zeitkritisch sind, können wir dies ignorieren. Den Tests des Übersetzers zufolge wird die Lücke jedoch bei steigenden Datenmengen, etwa Milliarden oder Hunderten von Milliarden, erheblich größer und wir müssen die Auswirkungen der Zeit auf die Anwendungsleistung berücksichtigen.)
Und forEach ist eine Methode des Array-Prototyps. Im Vergleich zur normalen for-Schleife benötigen forEach und for...of mehr Zeit, um das Array zu iterieren. (Anmerkung des Übersetzers: Es ist jedoch erwähnenswert, dass for...of und forEach beide Daten vom Objekt erhalten, der Prototyp jedoch nicht, sodass keine Vergleichbarkeit besteht.)

Arten von Schleifen und wo wir sie verwenden sollten

1. For-Schleife (Vorwärts- und Rückwärtsreihenfolge)

Ich denke, jeder sollte mit diesem grundlegenden Zyklus sehr vertraut sein. Wir können For-Schleifen überall dort verwenden, wo wir einen Codeblock eine bestimmte Anzahl Mal ausführen müssen. Die grundlegende For-Schleife ist die schnellste, also sollten wir sie jedes Mal verwenden, oder? Nicht wirklich. Die Leistung ist nicht das einzige Kriterium. Die Lesbarkeit des Codes ist oft wichtiger. Wählen wir also die Variante, die zu unserer Anwendung passt.

2. fürJedes

Diese Methode muss eine Rückruffunktion als Eingabeparameter akzeptieren, über jedes Element des Arrays iterieren und unsere Rückruffunktion ausführen (mit dem Element selbst und seinem Index (optionaler Parameter) als Parameter, die der Rückruffunktion übergeben werden). forEach erlaubt auch einen optionalen Parameter this, der in der Rückruffunktion verwendet werden kann.

const things = ['haben', 'Spaß', 'Codieren'];
const callbackFun = (Artikel, idex) => {
  Konsole.log(`${item} - ${index}`);
}
Dinge.foreach(callbackFun); 
/* Ausgabe hat - 0
    Spaß-1
    Kodierung - 2 */

Es ist zu beachten, dass wir, wenn wir forEach verwenden möchten, den Kurzschlussoperator von JavaScript nicht verwenden können, d. h. wir können die Schleife nicht in jeder Schleife überspringen oder beenden.

3. für … von

for…of wurde in ES6 (ECMAScript 6) standardisiert. Es erstellt eine Schleife für ein iterierbares Objekt (wie Array, Map, Set, String usw.) und hat einen herausragenden Vorteil, nämlich die hervorragende Lesbarkeit.

const arr = [3, 5, 7];
const str = "hallo";
für (sei i von arr) {
  console.log(i); // Ausgabe 3, 5, 7
}
für (sei i von str) {
  console.log(i); // Gibt 'h', 'e', ​​'l', 'l', 'o' aus
}

Es ist wichtig zu beachten, dass Sie for...of nicht in einem Generator verwenden sollten, auch wenn die for...of-Schleife vorzeitig beendet wird. Nach dem Verlassen der Schleife wird der Generator geschlossen und ein erneuter Iterationsversuch führt zu keinen weiteren Ergebnissen.

4. für in

for…in iteriert über alle aufzählbaren Eigenschaften eines Objekts unter Verwendung der angegebenen Variable. Für jedes einzelne Attribut gibt die for…in-Anweisung zusätzlich zum numerischen Index den Namen des benutzerdefinierten Attributs zurück.

Daher ist es besser, beim Iterieren über ein Array eine herkömmliche For-Schleife mit numerischen Indizes zu verwenden. Da die for...in-Anweisung zusätzlich zu Array-Elementen auch über benutzerdefinierte Eigenschaften iteriert, gilt dies auch, wenn wir das Array-Objekt ändern (z. B. durch Hinzufügen benutzerdefinierter Eigenschaften oder Methoden).

const details = {Vorname: 'john', Nachname: 'Doe'};
Lassen Sie den vollständigen Namen = '';
für (lass i im Detail) {
  vollständigerName += details[i] + ' '; // vollständigerName: john doe
}

für … von und für … in

Der Hauptunterschied zwischen for…of und for…in besteht darin, worüber sie iterieren. for…in durchläuft die Eigenschaften eines Objekts, während for…of die Werte eines iterierbaren Objekts durchläuft.

sei arr = [4, 5, 6];
für (lass i in arr) {
  console.log(i); // '0', '1', '2'
}
für (sei i von arr) {
  konsole.log(i); // '4', '5', '6'
}

abschließend

• for ist am schnellsten, aber weniger lesbar
• foreach ist schneller und kann den Inhalt steuern
• for...of ist langsamer, aber interessanter.
• for...in ist langsamer und weniger bequem

Zum Schluss noch ein weiser Rat: Achten Sie auf die Lesbarkeit. Dies ist insbesondere dann erforderlich, wenn wir komplexe Strukturprogramme entwickeln. Natürlich sollten wir auch auf die Leistung achten. Vermeiden Sie das Hinzufügen unnötigen, redundanten und ausgefallenen Codes, da dies manchmal schwerwiegende Auswirkungen auf die Leistung Ihres Programms haben kann. Viel Spaß beim Programmieren!

Anmerkung des Übersetzers

Beim eigentlichen Test des Übersetzers wurde Folgendes festgestellt:

• Unterschiedliche Browser und sogar unterschiedliche Versionen führen zu unterschiedlichen Ergebnissen (Firefox scheint beispielsweise native For-Schleifen nicht sehr zu unterstützen, Safari hingegen mag While sehr).
• Unterschiedliche Plattformen, Betriebssysteme und Prozessoren führen zu unterschiedlichen Ergebnissen
  

Dies ist das Ende dieses Artikels darüber, welche Art von Schleife in JavaScript die schnellste ist. Weitere Informationen dazu, welche Art von Schleife in JavaScript die schnellste ist, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Originalartikel: Welcher Schleifentyp ist in JavaScript am schnellsten?
Originalautor: kushsavani