Maison > interface Web > js tutoriel > Quel est le moyen le plus efficace de convertir une collection HTML en tableau en JavaScript ?

Quel est le moyen le plus efficace de convertir une collection HTML en tableau en JavaScript ?

Linda Hamilton
Libérer: 2024-11-17 18:13:02
original
215 Les gens l'ont consulté

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

Conversion efficace d'une collection HTML en tableau

La conversion d'une collection HTML en un tableau est une tâche courante dans le développement front-end. Bien que parcourir et pousser manuellement chaque élément soit une approche simple, il existe des méthodes plus optimisées à considérer.

Approche du code natif

Une alternative efficace consiste à utiliser le code natif. Méthode Array.prototype.slice.call() :

var arr = Array.prototype.slice.call(htmlCollection)
Copier après la connexion

Cette méthode convertit efficacement la HTMLCollection en un tableau en la découpant.

Expression concise

Une expression plus concise avec effectivement la même fonctionnalité est :

var arr = [].slice.call(htmlCollection);
Copier après la connexion

Méthode Array.from()

ECMAScript 2015 (ES 6) a introduit l'Array Méthode .from(), qui fournit un moyen explicite de convertir un itérable en tableau :

var arr = Array.from(htmlCollection);
Copier après la connexion

Spread Operator

ES 6 propose également l'opérateur spread , qui peut être utilisé de manière fonctionnellement équivalente à Array.from() :

var arr = [...htmlCollection];
Copier après la connexion

Considérations sur les performances

Une comparaison des performances de ces méthodes sur NodeList ne montre aucune différence significative.

Conclusion

Ces méthodes offrent des moyens efficaces de convertir une HTMLCollection en tableau. Le choix de la méthode peut dépendre du scénario spécifique, avec des fonctionnalités ES 6 plus récentes telles que Array.from() et l'opérateur de propagation fournissant des alternatives modernes et modernes.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal