Vergleich der JS-Array-Loop-Methode und der Effizienzanalyse

Array-Methoden

JavaScript bietet viele Array-Methoden. Die folgende Abbildung zeigt die meisten Array-Methoden. In diesem Artikel geht es hauptsächlich um Array-Traversal-Methoden und ihre jeweilige Leistung. Bei so vielen Methoden ist die Auswahl der Methode mit der besten Leistung eine große Hilfe für unsere Entwicklung.

Array-Traversal-Methoden

für

• Die Standard-For-Schleifenanweisung ist zugleich die traditionellste Schleifenanweisung

var arr = [1,2,3,4,5]
für(var i=0;i<arr.length;i++){
  Konsole.log(arr[i])
}

Die einfachste Durchquerungsmethode ist auch die am häufigsten verwendete und weist eine gute Leistung auf, kann jedoch optimiert werden

• Optimiert für Loop-Anweisungen

var arr = [1,2,3,4,5]
für(var i=0,länge=arr.länge;i<länge;i++){
  Konsole.log(arr[i])
}

Verwenden Sie temporäre Variablen, um die Länge zwischenzuspeichern und so zu vermeiden, dass die Array-Länge wiederholt abgerufen werden muss. Der Optimierungseffekt ist insbesondere dann deutlicher, wenn die Array-Länge groß ist.

Diese Methode ist grundsätzlich die leistungsstärkste aller Methoden zur Schleifendurchquerung.

fürJedes

• Normal fürJedes

Führt eine bestimmte Funktion für jedes Element in einem Array aus. Es hat keinen Rückgabewert und wird häufig zum Durchlaufen von Elementen verwendet.

var arr5 = [10,20,30]
var result5 = arr5.forEach((item,index,arr)=>{
    console.log(Element)
})
console.log(Ergebnis5)
/*
10
20
30
undefined Diese Methode hat keinen Rückgabewert*/

Die mit dem Array gelieferte foreach-Schleife wird häufig verwendet, ihre Leistung ist jedoch tatsächlich schwächer als die der gewöhnlichen for-Schleife.

• Prototyp fürJeden

Da foreach eine integrierte Funktion des Array-Typs ist, kann sie für einige Nicht-Array-Typen (wie NodeList) nicht direkt verwendet werden. Daher wird diese Variante erstellt. Mit dieser Variante können ähnliche Arrays mit der Funktion foreach versehen werden.

const nodes = document.querySelectorAll('div')
Array.prototype.forEach.call(Knoten,(Element,Index,arr)=>{
  console.log(Element)
})

Die tatsächliche Leistung ist schwächer als bei gewöhnlichem foreach

für...in

Iteriert in beliebiger Reihenfolge über die aufzählbaren Eigenschaften eines Objekts außer dem Symbol, einschließlich geerbter aufzählbarer Eigenschaften.

Es wird im Allgemeinen zum Durchlaufen von Objekten verwendet. Dabei können auch Namen nicht ganzzahliger Typen und geerbte Eigenschaften in der Prototypkette durchlaufen werden. Mit integrierten Konstruktoren wie Array und Object erstellte Objekte erben die nicht aufzählbaren Eigenschaften von Object.prototype und String.prototype und können nicht durchlaufen werden.

var arr = [1,2,3,4,5]
für(var i in arr){
  konsole.log(i,arr[i])
} //Hier ist i das Objektattribut, also der Index des Arrays/**
0 1
1 2
dreiundzwanzig
3 4
4 5 **/

Die meisten Leute verwenden diese Methode gerne, aber ihre Leistung ist nicht sehr gut

für...von (Objekte können nicht durchlaufen werden)

Erstellen Sie eine Iterationsschleife für ein iterierbares Objekt (mit Iteratorschnittstelle) (Array, Map, Set, String, Argumente), rufen Sie den benutzerdefinierten Iterations-Hook auf und führen Sie Anweisungen für jeden unterschiedlichen Attributwert aus. Durchlaufen Sie das Objekt nicht.

let arr=["front end","front end","ssss"];
    für (let item of arr){
        console.log(Element)
    }
//Front-End Nanjiu ssss

//Objekt durchlaufen let person={name:"南玖",age:18,city:"上海"}
für (let item of person){
  console.log(Element)
}
// Wir haben festgestellt, dass das nicht möglich ist. Wir können es mit Object.keys verwenden for(let item of Object.keys(person)){
    Konsole.log(Person[Element])
}
// Nanjiu 18 Shanghai

Diese Methode wird in es6 verwendet und ihre Leistung ist besser als forin, aber immer noch nicht so gut wie die gewöhnliche for-Schleife.

Karte

Map: kann das Array nur ohne Unterbrechung durchlaufen und der Rückgabewert ist das geänderte Array.

sei arr = [1,2,3];
const res = arr.map(item=>{
  Retoure Artikel+1
})
konsole.log(res) //[2,3,4]
console.log(arr) // [1,2,3]

jeder

Führt die angegebene Funktion für jedes Element im Array aus. Wenn die Funktion für jedes Element „true“ zurückgibt, gibt die Funktion „true“ zurück.

var arr = [10,30,25,64,18,3,9]
var Ergebnis = arr.every((Element, Index, arr)=>{
      Artikel zurückgeben>3
})
console.log(Ergebnis) //false

manche

Führen Sie die angegebene Funktion für jedes Element im Array aus. Wenn eines der Elemente in der Funktion „true“ zurückgibt, gibt es „true“ zurück. Wenn alle Elemente „false“ zurückgeben, gibt es „false“ zurück.

var arr2 = [10,20,32,45,36,94,75]
var result2 = arr2.some((item,index,arr)=>{
    Artikel zurückgeben<10
})
console.log(Ergebnis2) //false

reduzieren

Die Methode „reduce()“ führt eine von Ihnen bereitgestellte Reduzierungsfunktion für jedes Element im Array (in aufsteigender Reihenfolge) aus und fasst die Ergebnisse in einem einzigen Rückgabewert zusammen.

Konstantes Array = [1,2,3,4]
const Reducer = (Akkumulator, aktueller Wert) => Akkumulator + aktueller Wert;

// 1 + 2 + 3 + 4
Konsole.log(array1.reduce(Reducer));

Filter

Wenn Sie für jedes Element in einem Array eine bestimmte Funktion ausführen, wird ein Array von Elementen zurückgegeben, die die Funktion erfüllen.

// Filter gibt ein neues Array zurück, das aus Array-Elementen besteht, die die Anforderungen erfüllen var arr3 = [3,6,7,12,20,64,35]
var result3 = arr3.filter((item,index,arr)=>{
    Retoure Artikel > 3
})
console.log(Ergebnis3) //[6,7,12,20,64,35]

Leistungstest-Tool-Tests

Die Ergebnisse der Leistungsanalyse mit dem Tooltest sind in der folgenden Abbildung dargestellt

Manuelles Testen

Wir können den Code auch selbst testen:

//Testfunktion Funktion clecTime(fn,fnName){
        const start = neues Date().getTime()
        wenn(fn) fn()
        const end = neues Date().getTime()
        console.log(`${fnName} Ausführungszeit: ${end-start}ms`)
}

Funktion fürfn(){
  sei a = []
  für(var i=0;i<arr.length;i++){
    // konsole.log(i)
    a.drücken(arr[i])
  }
}
clecTime(forfn, 'for') //für Ausführungszeit: 106ms

Funktion fürlenfn(){
  sei a = []
  für(var i=0,länge=arr.länge;i<länge;i++){
    a.drücken(arr[i])
  }
}
clecTime(forlenfn, 'for len') //für len Ausführungszeit: 95ms

Funktion fürJedesfn(){
  sei a = []
  arr.fürJeden(item=>{
    a.push[Element]
  })
}
clecTime(forEachfn, 'forEach') //forEach-Ausführungszeit: 201 ms

Funktion fürinfn(){
  sei a = []
  für(var i in arr){
    a.drücken(arr[i])
  }
}
clecTime(forinfn, 'forin') //forin-Ausführungszeit: 2584 ms (unerhört)

Funktion füroffn(){
  sei a = []
  für(var i von arr){
    ein.drücken(i)
  }
}
clecTime(foroffn, 'forof') //forof-Ausführungszeit: 221 ms

// ...den Rest können Sie selbst testen

Ergebnisanalyse

Nach dem Testen mit Tools und manuellen Tests sind die Ergebnisse grundsätzlich gleich. Die Geschwindigkeit der Array-Traversal-Methoden ist: Die herkömmliche For-Schleife ist die schnellste und For-In die langsamste.

für-Länge > für > für-von > fürJedes > Karte > für-in

Empfohlene Verwendung nativer Traversalmethoden in JavaScript:

• Iterieren über ein Array mit einer For-Schleife
• Iterieren über Objekte mit for...in
• Iterieren über arrayähnliche Objekte mit for...of (ES6)
• Verwenden Sie Object.keys(), um eine Sammlung von Objektattributnamen abzurufen

Warum ist for...langsam?

Da die for...in-Syntax die erste JavaScript-Anweisung ist, die über Objektschlüssel iterieren kann, unterscheidet sich das Schleifen über Objektschlüssel ({}) vom Schleifen über Arrays ([]), und die Engine führt zusätzliche Arbeit aus, um zu verfolgen, über welche Eigenschaften iteriert wurde. Daher wird nicht empfohlen, for...in zum Durchlaufen des Arrays zu verwenden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.