Detaillierte Erklärung verschiedener Loop-Speed-Tests in JS, die Sie nicht kennen

Vorwort

Bevor wir die Schleifengeschwindigkeit testen, erstellen wir ein Array mit 1 Million Daten:

const länge = 100 * 10000;
const arr = [];
für (sei i = 0; i < len; i++) {
  arr.push(Math.floor(Math.random() * len));
}

Die Testumgebung ist:

1. Computer: iMac (10.13.6);

2. Prozessor: 4,2 GHz Intel Core i7;

3. Browser: Chrome (89.0.4389.82)

1. for-Schleife

Die For-Schleife ist die am häufigsten verwendete Schleifenmethode. Ihr größter Vorteil ist, dass sie eine klare Struktur hat und jederzeit gestoppt werden kann.

Lassen Sie es uns zunächst 10 Mal testen:

console.log('testen für');
für (sei k = 0; k < 10; k++) {
  Konsole.Zeit('für');
  sei Summe = 0;
  für (sei i = 0; i < len; i++) {
    Summe += arr[i] % 100;
  }
  console.timeEnd('für');
}

Das Endergebnis ist:

Beim ersten und zweiten Mal dauerte es recht lange, ab dem dritten Mal blieb es jedoch bei ca. 1,25ms.

2. while-Schleife und do-while-Schleife

Wenn man diese beiden zusammenbringt, sind ihre Strukturen ähnlich genug, und sie können auch jederzeit zusammenbrechen und aufhören.

console.log('\ntest während');
für (sei k = 0; k < 10; k++) {
  Konsole.Zeit('während');
  sei Summe = 0;
  sei i = 0;
  während (i < Länge) {
    Summe += arr[i] % 100;
    ich++;
  }
  Konsole.timeEnd('während');
}
console.log('\ntest ausführen, während');
für (sei k = 0; k < 10; k++) {
  Konsole.Zeit('do-while');
  sei Summe = 0;
  sei i = 0;
  Tun {
    Summe += arr[i] % 100;
    ich++;
  } während (i < Länge);
  Konsole.timeEnd('tun-während');
}

Die Ergebnisse der while-Schleife und der do-while-Schleife sind fast gleich. Schauen wir uns einfach die Ergebnisse der while-Schleife an, die im Browser ausgeführt wird:

Es ist ungefähr so ​​schnell wie eine For-Schleife.

3. forEach-, map- und reduce-Schleifen

Als Nächstes kommen wir zu den drei häufig verwendeten Array-Methoden: forEach, map, reduce usw. Diese drei Methoden stellen eine neue Syntax dar, die dem ES6-Standard hinzugefügt wurde.

3.1 Eine kurze Einführung in forEach

Diese Methoden können die Schleife nicht stoppen. Unabhängig davon, ob break oder return verwendet wird, kann die gesamte Schleife nicht gestoppt werden. Wir können einen Test durchführen. Ich möchte beispielsweise die Schleife stoppen, wenn sie auf ein Vielfaches von 3 trifft.

[1, 2, 3, 4, 5].fürEach((item) => {
  console.log(`vor return: ${item}`);
  wenn (Element % 3 === 0) {
    zurückkehren;
  }
  console.log(`nach return: ${item}`);
});

Die Ergebnisse sind wie folgt:

Anhand der Ergebnisse können wir erkennen, dass unser Return lediglich die auf die Schleife folgenden Anweisungen nicht ausführt, aber nicht die gesamte Schleife stoppt. Die folgenden 4 und 5 werden weiterhin normal ausgegeben.

Stimmt es, dass der Kreislauf nicht wie Xuanmai gestoppt werden kann? Nein, es gibt eine andere Möglichkeit, den Kreislauf zu stoppen. Das löst eine Ausnahme aus:

versuchen {
  [1, 2, 3, 4, 5].fürEach((item) => {
    console.log(`vor return: ${item}`);
    wenn (Element % 3 === 0) {
      neuen Fehler werfen ('break forEach');
    }
    console.log(`nach return: ${item}`);
  });
} fangen (e) {}

Nachdem in forEach eine Ausnahme ausgelöst wurde, kann die Schleife gestoppt und anschließend die Ausnahme mit try-catch abgefangen werden, um zu verhindern, dass der gesamte Dienst angehalten wird.

Obwohl es möglich ist, die forEach-Schleife zu stoppen, ist die Implementierung recht mühsam. Wenn es nicht notwendig ist, die gesamte Schleife anzuhalten, können Sie daher Schleifenmethoden wie forEach und map verwenden; andernfalls müssen Sie weiterhin andere Schleifenmethoden verwenden.

3.2 Geschwindigkeitstest von forEach usw.

OK, als nächstes testen wir die Zyklusgeschwindigkeit dieser drei Zyklusmethoden.

// Test für forEach:
console.log('\ntest fürJeden');
für (sei k = 0; k < 10; k++) {
  Konsole.Zeit('fürJeden');
  sei Summe = 0;
  arr.fürEach((Artikel) => {
    Summe += Artikel % 100;
  });
  console.timeEnd('fürJedes');
}

// Kartentest:
console.log('\nTestkarte');
für (sei k = 0; k < 10; k++) {
  Konsole.Zeit('Karte');
  sei Summe = 0;
  arr.map((Artikel) => {
    Summe += Artikel % 100;
  });
  Konsole.timeEnd('Karte');
}

// Test auf Reduzierung:
console.log('\ntest reduzieren');
für (sei k = 0; k < 10; k++) {
  console.time('reduzieren');
  sei Summe = 0;
  arr.reduce((_, Artikel) => {
    Summe += Artikel % 100;
  }, 0);
  console.timeEnd('reduzieren');
}

Da die Zeit dieser drei Schleifen nahezu gleich ist, habe ich hier nur die Testergebnisse von forEach abgefangen.

Nach der Ausführung von 10 Schleifen beträgt die Ausführungszeit von forEach etwa 10,8 ms, was fast 10-mal länger ist als die obige For- und While-Schleife.

4. für-von

ES6 bedient sich bei C++, Java, C# und Python und führt die for...of-Schleife als einheitliche Methode zum Durchlaufen aller Datenstrukturen ein.

4.1 Eine kurze Einführung in for-of

Solange in einer Datenstruktur die Eigenschaft Symbol.iterator bereitgestellt ist, wird davon ausgegangen, dass sie über eine Iteratorschnittstelle verfügt und ihre Mitglieder mithilfe der for...of-Schleife durchlaufen werden können. Das heißt, die for...of-Schleife ruft die Symbol.iterator-Methode der Datenstruktur auf.

Der Gültigkeitsbereich der for...of-Schleife umfasst Arrays, Set- und Map-Strukturen, einige arrayähnliche Objekte (wie Argumentobjekte, DOM-NodeList-Objekte), das später beschriebene Generatorobjekt und Zeichenfolgen.

for-of ruft den Wert selbst ab, während for-in den Schlüssel abruft und dann die aktuellen Daten über den Schlüssel abruft.

const Früchte = ['Apfel', 'Banane', 'Orange', 'Zitrone'];

für (konstanter Wert von Früchten) {
  console.log(Wert); // „Apfel“, „Banane“, „Orange“, „Zitrone“
}

4.2 Geschwindigkeitsmessung der For-Of-Schleife

Code zum Testen der Geschwindigkeit der For-Of-Schleife:

console.log('\ntest für-von');
für (sei k = 0; k < 10; k++) {
  Konsole.Zeit('für-von');
  sei Summe = 0;
  für (konstanter Wert von arr) {
    Summe += Wert % 100;
  }
  Konsole.timeEnd('für-von');
}

Testergebnisse:

Wenn dieselbe Schleife mehrmalig wiederholt wird, dauern die ersten beiden For-of-Schleifen länger, mehr als 15 ms. Bei nachfolgenden Ausführungen sinkt die Schleifengeschwindigkeit jedoch auf etwa 1,5 ms, was etwa der For-Schleifenzeit entspricht.

5. For-In-Schleife

for-in wird normalerweise für Schleifen vom Typ „Objekt“ verwendet, kann aber auch für Array-Schleifen verwendet werden. Schließlich ist der Vorfahre aller Datentypen der Typ „Objekt“.

console.log('\ntest für-in');
für (sei k = 0; k < 10; k++) {
  Konsole.Zeit('für-in');
  sei Summe = 0;
  für (let-Schlüssel in arr) {
    Summe += arr[Schlüssel] % 100;
  }
  console.timeEnd('für-in');
}

Testergebnisse:

Die Geschwindigkeitstestdaten der For-In-Schleife sind erstaunlich, sie ist einfach eine Klasse für sich und dauert im besten Fall mindestens 136 ms. Es ist ersichtlich, dass die Effizienz der For-In-Schleife wirklich niedrig ist.

Verwenden Sie die for-in-Schleife nicht für Daten vom Typ Array. Für Daten vom Typ Object können Sie zuerst alle Wertdaten über Object.values() abrufen und dann die forEach-Schleife verwenden:

const obj = {};
für (sei i = 0; i < len; i++) {
  obj[i] = Math.floor(Math.random() * len);
}
für (sei k = 0; k < 10; k++) {
  console.time('fürJeden-Werte');
  sei Summe = 0;
  Objekt.Werte(obj).fürJeden((Element) => {
    Summe += Artikel % 100;
  });
  console.timeEnd('fürJeden-Werte');
}

Selbst mit einem weiteren Schritt beträgt die Schleifenzeit etwa 14 ms, was viel schneller ist als For-In.

6. Fazit

Vergleichen wir alle Schleifendaten miteinander. Hier passen wir die Anzahl der Tests für jede Schleife auf 100 an. Die horizontale Achse ist die Anzahl der Schleifen und die numerische Achse ist die Schleifenzeit:

1. For-Schleife, While-Schleife und d-while-Schleife benötigen am wenigsten Zeit;

2. Die For-of-Schleife dauert etwas länger;

3. Die Daten der forEach-Schleife, der Map-Schleife und der Reduce-Schleife sind ähnlich, aber die Dauer der for-of-Schleife ist etwas länger.

4. Die For-In-Schleife benötigt am meisten Zeit;

Die Dauer jeder Schleife ist unterschiedlich. Bei der Auswahl einer Schleifenmethode müssen wir neben der Zeit auch die Semantik und die Verwendungsszenarien berücksichtigen.

Oben finden Sie eine ausführliche Erklärung verschiedener Schleifengeschwindigkeitsmessungen in JS, die Sie nicht kennen. Weitere Informationen zu verschiedenen Schleifengeschwindigkeitsmessungen in JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!