web-dev-qa-db-fra.com

Filtrer ou mapper les listes de nœuds dans ES6

Quelle est la façon la plus efficace de filtrer ou de mapper une liste nodale dans ES6?

Sur la base de mes lectures, j'utiliserais l'une des options suivantes:

[...nodelist].filter

ou

Array.from(nodelist).filter

Lequel recommanderiez-vous? Et existe-t-il de meilleurs moyens, par exemple sans impliquer de tableaux?

javascriptarraysfilterecmascript-6nodelist
47
Christophe
  • [...nodelist] Fera un tableau de hors d'un objet si l'objet est itérable.
  • Array.from(nodelist) fera un tableau à partir d'un objet si l'objet est itérable ou si l'objet est de type tableau (a .length Et accessoires numériques)

Vos deux exemples seront identiques si NodeList.prototype[Symbol.iterator] Existe, car les deux cas couvrent les itérables. Si votre environnement n'a pas été configuré de telle sorte que NodeList soit itérable, votre premier exemple échouera et le second réussira. Babel actuellement ne gère pas ce cas correctement .

Donc, si votre NodeList est itérable, c'est vraiment à vous de l'utiliser. Je choisirais probablement au cas par cas. Un avantage de Array.from Est qu'il prend un deuxième argument d'une fonction de mappage, tandis que la première [...iterable].map(item => item) devrait créer un tableau temporaire, Array.from(iterable, item => item) pas. Cependant, si vous ne mappez pas la liste, cela n'a pas d'importance.

76
loganfsmyth

TL; DR;

Array.prototype.slice.call(nodelist).filter

La méthode slice () renvoie un tableau. Ce tableau retourné est une copie superficielle de la collection (NodeList) Il fonctionne donc plus rapidement que ** Array.from () **

Les éléments de la collection d'origine sont copiés dans le tableau renvoyé comme suit:

  • Pour les références d'objet (et non l'objet réel), slice copie les références d'objet dans le nouveau tableau. Le tableau d'origine et le nouveau se réfèrent au même objet. Si un objet référencé change, les modifications sont visibles à la fois dans les nouveaux tableaux et dans les tableaux d'origine.
  • Pour les chaînes, les nombres et les booléens (pas les objets String, Number et Boolean), slice copie les valeurs dans le nouveau tableau. Les modifications apportées à la chaîne, au nombre ou au booléen dans un tableau n'affectent pas l'autre tableau.

Brève explication concernant les arguments

Array.prototype.slice (beginIndex, endIndex)

  • prend les arguments optionnels beginIndex et endIndex. Si elles ne sont pas fournies, les tranches utilisent beginIndex == 0, donc elle extrait tous les éléments de la collection

Array.prototype.slice.call (espace de noms, beginIndex, endIndex)

  • prend un objet comme premier argument. Si nous utilisons une collection comme objet, cela signifie littéralement que nous appelons la méthode slice directement à partir de cet objet namespace.slice ()
10
Serge Seletskyy

J'ai trouvé un référence qui utilise map directement sur la NodeList par

Array.prototype.map.call(nodelist, fn)

Je ne l'ai pas testé, mais il semble plausible que ce soit plus rapide car il devrait accéder directement à la NodeList.

4
goweon