Maison  >  Article  >  interface Web  >  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
Linda Hamiltonoriginal
2024-11-17 18:13:02158parcourir

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)

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);

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);

Spread Operator

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

var arr = [...htmlCollection];

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!

Déclaration:
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