Comment convertir efficacement une HTMLCollection en un tableau en JavaScript ?

Conversion efficace de HTMLCollection en tableau

La conversion d'une HTMLCollection, une collection d'éléments dans un document HTML, en un tableau est une tâche courante dans le développement web. Bien que l'itération et la copie manuelle de chaque élément dans un tableau fonctionnent, cela peut s'avérer inefficace.

Solution de code "natif"

Une approche plus efficace consiste à utiliser le JavaScript natif method Array.prototype.slice.call() :

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

Cette méthode renvoie un tableau contenant les éléments de l'objet htmlCollection.

Expression concise

Étant donné que la syntaxe peut être verbeuse, une expression équivalente plus concise est :

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

Solutions ES6

ES6 (ECMAScript 2015) a introduit des options supplémentaires :

• Array.from() : convertit un objet itérable, tel qu'une HTMLCollection, en un tableau.

var arr = Array.from(htmlCollection);

• Opérateur Spread : décompresse un objet itérable dans un tableau.

var arr = [...htmlCollection];

Comparaison des performances

Benchmarks (par exemple, https:// jsben.ch/h2IFA) montrent que les méthodes suivantes ont des performances similaires :

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

L'opérateur spread est légèrement plus lent, mais il peut être préféré pour sa syntaxe concise.

Par conséquent, le moyen le plus efficace de convertir une HTMLCollection à un tableau dépend des exigences et des préférences spécifiques du développeur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!