JS-Zusammenfassung der Array-Traversal-Methoden und Leistungsvergleich

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++) {
}

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++) {
}

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++) {
}

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){
});

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){
});

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) {
}

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){
});

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) {
});

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!