Comment convertir efficacement une HTMLCollection en un tableau ?

Conversion efficace d'une collection HTML en tableau

La conversion d'une collection HTML en un tableau peut être réalisée par des moyens itératifs, en ajoutant manuellement chaque élément à un tableau. Cependant, il existe des approches plus efficaces pour cette conversion.

Approche du code natif :

L'une de ces approches utilise la méthode slice de Array.prototype, comme illustré par l'extrait de code suivant :

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

Cette méthode émule efficacement la fonctionnalité de l'itération itérative, fournissant un moyen de conversion efficace.

Version concise :

Pour plus de concision, l'expression ci-dessous permet d'obtenir le même résultat :

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

Array.from (ES6 ):

Dans ECMAScript 2015 et versions ultérieures, la méthode Array.from offre une solution native pour convertir des objets itérables en tableaux, y compris HTMLCollections :

var arr = Array.from(htmlCollection);

Spread Operator (ES6) :

L'opérateur spread, introduit dans ES6, fournit une méthode fonctionnellement équivalente à Array.from, comme illustré ci-dessous :

var arr = [...htmlCollection];

Comparaison des performances :

Pour une analyse comparative de ces méthodes, reportez-vous au benchmark suivant : http://jsben.ch/h2IFA

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!