Heim > Web-Frontend > js-Tutorial > Hauptteil

Was ist der effizienteste Weg, eine HTMLCollection in JavaScript in ein Array zu konvertieren?

Linda Hamilton
Freigeben: 2024-11-17 18:13:02
Original
161 Leute haben es durchsucht

What's the Most Efficient Way to Convert an HTMLCollection to an Array in JavaScript?

Effiziente HTMLCollection-zu-Array-Konvertierung

Das Konvertieren einer HTMLCollection in ein Array ist eine häufige Aufgabe in der Frontend-Entwicklung. Während das manuelle Durchlaufen und Pushen jedes Elements ein unkomplizierter Ansatz ist, gibt es optimiertere Methoden, die in Betracht gezogen werden sollten.

Native-Code-Ansatz

Eine effiziente Alternative ist die Verwendung des nativen Codes Array.prototype.slice.call()-Methode:

var arr = Array.prototype.slice.call(htmlCollection)
Nach dem Login kopieren

Diese Methode wandelt die HTMLCollection durch Slicing effektiv in ein Array um it.

Prägnanter Ausdruck

Ein prägnanterer Ausdruck mit praktisch der gleichen Funktionalität ist:

var arr = [].slice.call(htmlCollection);
Nach dem Login kopieren

Array.from() Methode

ECMAScript 2015 (ES 6) führte die Methode Array.from() ein, die eine explizite Methode bereitstellt Möglichkeit zur Konvertierung von einem iterierbaren in ein Array:

var arr = Array.from(htmlCollection);
Nach dem Login kopieren

Spread-Operator

ES 6 bietet auch den Spread-Operator, der funktional äquivalent zu Array verwendet werden kann. from():

var arr = [...htmlCollection];
Nach dem Login kopieren

Leistungsüberlegungen

Ein Leistungsvergleich von Diese Methoden auf NodeList zeigen keine signifikanten Unterschiede.

Fazit

Diese Methoden bieten effiziente Möglichkeiten, eine HTMLCollection in ein Array zu konvertieren. Die Wahl der Methode kann vom jeweiligen Szenario abhängen, wobei neuere ES 6-Funktionen wie Array.from() und der Spread-Operator moderne und moderne Alternativen bieten.

Das obige ist der detaillierte Inhalt vonWas ist der effizienteste Weg, eine HTMLCollection in JavaScript in ein Array zu konvertieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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