Wie konvertiert man eine HTMLCollection effizient in ein Array in JavaScript?

Effiziente Konvertierung von HTMLCollection in Array

Das Konvertieren einer HTMLCollection, einer Sammlung von Elementen in einem HTML-Dokument, in ein Array ist eine häufige Aufgabe in der Webentwicklung. Das Iterieren und manuelle Kopieren jedes Elements in ein Array funktioniert zwar, kann jedoch ineffizient sein.

Lösung mit „nativem“ Code

Ein effizienterer Ansatz ist die Verwendung von nativem JavaScript method Array.prototype.slice.call():

var arr = Array.prototype.slice.call(htmlCollection);

Diese Methode gibt ein Array zurück, das die Elemente aus der htmlCollection enthält Objekt.

Prägnanter Ausdruck

Da die Syntax ausführlich sein kann, lautet ein prägnanterer äquivalenter Ausdruck:

var arr = [].slice.call(htmlCollection);

ES6 Solutions

ES6 (ECMAScript 2015) wurde zusätzlich eingeführt Optionen:

• Array.from(): Konvertiert ein iterierbares Objekt, z. B. eine HTMLCollection, in ein Array.

var arr = Array.from(htmlCollection);

• Spread-Operator: Entpackt ein iterierbares Objekt in ein Array.

var arr = [...htmlCollection];

Leistungsvergleich

Benchmarks (z. B. https://jsben.ch/h2IFA) zeigen, dass die folgenden Methoden ähnlich sind Leistung:

• Array.prototype.slice.call()
• [].slice.call()
• Array.from()

Der Spread-Operator ist etwas langsamer, wird aber aufgrund seiner prägnanten Syntax möglicherweise bevorzugt.

Daher ist der Die effizienteste Methode zum Konvertieren einer HTMLCollection in ein Array hängt von den spezifischen Anforderungen und Vorlieben des Entwicklers ab.

Das obige ist der detaillierte Inhalt vonWie konvertiert man eine HTMLCollection effizient in ein Array in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!