Dieses Mal werde ich Ihnen eine Zusammenfassung und einen Leistungsvergleich von Array-Traversal-Methoden mit JS geben. Was sind die Vorsichtsmaßnahmen für eine Zusammenfassung und einen Leistungsvergleich von Array-Traversal-Methoden mit JS?
Vorwort
Dieser Artikel gehört zur gleichen Reihe wie der vorherige Artikel über mehrere JS-Variablenaustauschmethoden und den Vergleich der Leistungsanalyse. Dieser Artikel wird fortgesetzt die Analyse. Mehrere häufig verwendete Array-Traversal-Methoden in JS und ihre jeweiligen Leistungsvergleiche
ab
Zuletzt haben wir mehrere analysiert Häufig verwendete Variablen in JS Nachdem ich die Methoden und ihre jeweiligen Leistungen ausgetauscht hatte, hatte ich das Gefühl, dass diese Methode recht gut war, also extrahierte ich die Kernlogik, kapselte sie in eine Vorlage und plante, sie zu einer Serie zu erweitern. Dieser Artikel ist der zweite Artikel in der Reihe, eine Analyse und ein Vergleich von JS-Array-Traversal-Methoden
Mehrere Möglichkeiten des JS-Array-Traversal
JS-Array-Traversal, grundsätzlich für , forin, foreach, forof, map usw. Im Folgenden werden verschiedene Array-Traversal-Methoden vorgestellt, die in der Analyse dieses Artikels sowie in der Leistungsanalyse und im Vergleich verwendet werden
Der erste Typ: gewöhnliche for-Schleife
Der Code lautet wie folgt:
for(j = 0; j < arr.length; j++) {
}Nach dem Login kopieren
Kurze Beschreibung: Der einfachste und am häufigsten verwendete Code. Obwohl die Leistung nicht schwach ist, gibt es noch Raum für Optimierung
Der zweite Typ: optimierte Version der for-Schleife
Der Code lautet wie folgt:
for(j = 0,len=arr.length; j < len; j++) {
}Nach dem Login kopieren
Kurze Beschreibung: Verwenden Sie temporäre Variablen, um die Länge zwischenzuspeichern, um ein wiederholtes Abrufen der zu vermeiden Array-Länge Der Optimierungseffekt wird deutlicher, wenn das Array größer ist.
Diese Methode ist im Grunde die leistungsstärkste unter allen Schleifendurchlaufmethoden
Der dritte Typ: abgeschwächte Version der for-Schleife
Der Code lautet wie folgt :
for(j = 0; arr[j]!=null; j++) {
}Nach dem Login kopieren
Kurze Beschreibung: Diese Methode ist eigentlich eine reine for-Schleife, verwendet jedoch nicht die Längenbeurteilung, sondern die Variable selbst zur Beurteilung
Tatsächlich die Leistung dieser Methode ist viel kleiner als die gewöhnliche for-Schleife
Der vierte Typ: foreach-Schleife
Der Code lautet wie folgt:
arr.forEach(function(e){
});Nach dem Login kopieren
Kurze Beschreibung: Die foreach Schleife, die mit dem Array geliefert wird, wird häufiger verwendet und ist tatsächlich schwächer als die gewöhnliche for-Schleife
Der fünfte Typ: foreach-Variante
Der Code lautet wie folgt:
Array.prototype.forEach.call(arr,function(el){
});Nach dem Login kopieren
Kurze Beschreibung: Da foreach mit dem Array-Typ geliefert wird, können einige nicht zu diesem Typ gehörende Typen nicht direkt verwendet werden (z. B. NodeList), sodass diese Variante erstellt werden kann. Die Verwendung dieser Variante kann ähnliche Arrays ermöglichen die foreach-Funktion haben.
Die tatsächliche Leistung ist schwächer als bei gewöhnlichem foreach
Sechster Typ: Forin-Schleife
Der Code lautet wie folgt:
for(j in arr) {
}Nach dem Login kopieren
Kurzbeschreibung: Viele Leute verwenden diese Schleife gerne, aber nach Analyse und Tests ist ihre Effizienz unter den vielen Schleifendurchquerungsmethoden
am niedrigsten
Siebtens: Kartendurchquerung
Der Code lautet wie folgt:
arr.map(function(n){
});Nach dem Login kopieren
Kurze Beschreibung: Auch diese Methode ist weit verbreitet, obwohl sie eleganter zu verwenden ist, ist die tatsächliche Effizienz nicht so gut wie foreach
Achter Typ: forof traversal (erfordert ES6-Unterstützung)
Der Code lautet wie folgt:
for(let value of arr) {
});Nach dem Login kopieren
Kurze Beschreibung: Diese Methode wird in es6 verwendet, und seine Leistung ist besser als die von Forin, aber immer noch nicht so gut wie die gewöhnliche for-Schleife
Leistungsvergleich verschiedener Traversalmethoden
Oben sind mehrere Methoden aufgeführt. Nachdem wir eine vergleichende Analyse durchgeführt haben, können wir grundsätzlich zu folgendem Schluss kommen:
Die gewöhnliche for-Schleife ist die eleganteste
(PS: Alle oben genannten Codes führen lediglich eine leere Schleife aus. Es gibt keinen internen Ausführungscode in der Schleife. Analysieren Sie einfach die Zeit jeder Schleife.)
Screenshot zum Leistungsvergleich
Analyseergebnis 1
Die Daten im Screenshot unten sind die Schlussfolgerung, die nach 100-maliger Ausführung in Chrome (unterstützt es6) gezogen wurde (jeweils 10-malige Ausführung, 10 Zyklen insgesamt, Analyseergebnisse)
Man erkennt, dass die Forin-Schleife am langsamsten ist. Die optimierte gewöhnliche for-Schleife ist die schnellste
Analyseergebnis 2
Die folgenden Screenshot-Daten sind die Schlussfolgerung, die nach 1000-maliger Ausführung in Chrome (unterstützt es6) (jeweils 100-mal, insgesamt 10 Schleifen) gezogen wurde Analyseergebnisse)
Darüber hinaus können Sie die folgenden Demo-Analysetools verwenden, um die JS-Array-Traversal-Methode zu analysieren und zu vergleichen
Ich glaube, Sie haben das gelesen Fall in diesem Artikel Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
vue-simplemde zum Ziehen und Einfügen von Bildern
Ein praktischer Fall von React Props und State Attribute Ausführliche Erklärung
Das obige ist der detaillierte Inhalt vonJS-Zusammenfassung der Array-Traversal-Methoden und Leistungsvergleich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
