Heim > Web-Frontend > js-Tutorial > Methodenkette: filter().map() ist ineffizient?

Methodenkette: filter().map() ist ineffizient?

Mary-Kate Olsen
Freigeben: 2024-11-05 12:17:02
Original
956 Leute haben es durchsucht

Methodenverkettung

Möglicherweise haben Sie den Code gesehen, der Array.prototype.filter() und Array.prototype.map() verwendet, um den Wert in Array-Daten in Javascript zu bearbeiten und zu entfernen

Zum Beispiel:

[1,2,3]
.map((mapped) => mapped + 1)
.filter((filtered) => filtered > 1)
Nach dem Login kopieren

Frage

Ich habe mich immer gefragt, ob eine solche Methodenverkettung den Wert im Array bei jeder Iteration iteriert oder ob die V8-Engine möglicherweise den Vorgang optimiert, indem sie unter der Haube eine Datenaggregation durchführt.

Also habe ich eine kleine Recherche durchgeführt.

Wie?

Verwenden Sie console.time und console.timeEnd und messen Sie die durchschnittliche Ausführungszeit 10 Mal mit und ohne Methodenkette.
Für die Untersuchung habe ich den Chrome-Browser verwendet.

console.time('Filter Execution Time')
// YOUR CODE
console.timeEnd('Filter Execution Time')
Nach dem Login kopieren

Ergebnis: Die Methodenverkettung aggregiert den Vorgang nicht.

- Method Chain(A) No Method Chain(B) Aggregate Logic(C)
Iterate 10000000 values 4656 ms 4733 ms 169 ms
Iterate 100000 values 27 ms 24 ms 4 ms

Wie Sie sehen können, zeigte das Ergebnis mit/ohne Methodenkette keinen großen Unterschied, während die Aggregationslogik zu schnelleren Ergebnissen führte.

Code-A. Verwenden Sie Methodenverkettung mit map() und filter()

console.time('Filter Execution Time')
const result = new Array()
.fill(1).map((e) => e + 1)
.filter((e) => e !== 1)
console.timeEnd('Filter Execution Time')
Nach dem Login kopieren

Code-B. Trennen Sie map() und filter() (keine Methodenverkettung)

console.time('Filter Execution Time')
const mapResult = new Array().fill(1).map((e) => e + 1)
const result = mapResult.filter((e) => e !== 1)
console.timeEnd('Filter Execution Time')
Nach dem Login kopieren

Code-C. Aggregierte Logik

console.time('Filter Execution Time')
const result = []
new Array().fill(1).forEach((e) =>  {
    if (e !== 1) result.push(e)
})
console.timeEnd('Filter Execution Time')
Nach dem Login kopieren

Aber Method Chain ist praktisch, nicht wahr?

Für diejenigen, die das glauben: Ich habe das Diagramm für jede Iterationszahl von 100 bis 100.000 unter den Codemustern A, B und C erstellt, indem ich die durchschnittliche Zeit in Millisekunden in 10 Schritten gezählt habe, ähnlich wie oben.

Erkenntnisse

  1. Es gibt sowieso keinen großen Unterschied, wenn die Anzahl der Iterationen nicht groß ist, beispielsweise 100 - 1.000.

  2. Es wird von Bedeutung sein, wenn die Anzahl der Iterationen exponentiell ansteigt, beispielsweise 1.000.000.

Method Chain: filter().map() is inefficient?

Abschluss

Methodenverkettung aggregiert den Vorgang nicht, während die Differenz der Ergebnisse größer wird, wenn die Anzahl der Iterationen exponentiell zunimmt.

Daher kann man meiner Meinung nach mit Recht sagen, dass es in Ordnung ist, die Methodenkette zu verwenden, wenn die Anzahl der Iterationen gering ist, um von ihrer Handlichkeit zu profitieren. Wenn Sie jedoch mit einer großen Anzahl von Daten arbeiten, sollten Sie dies tun Betrachten Sie den Algorithmus sorgfältig ohne die Methodenkette.

Danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonMethodenkette: filter().map() ist ineffizient?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage