javascript

les 3 petits points de Javascript

Johan Petrikovsky
[object Object]
3 petits points

Pourquoi utiliser l'opérateur Spread ?

Lorsque nous récupérons un élément avec la méthode querySelecorAll, nous récupérons une NodeList et non pas un Array.
Une NodeList c'est super mais avec un Array, nous avons accès à toutes ces merveilleuses fonctions, map, filter, reduce, sort... de quoi se sentir développeur pas comme avec un forEach .

Utilisation de l'opérateur spread

Imaginons cette chose un peu folle nous souhaitons récupérer la liste des boulevards parisiens sur cette belle page wikipedia.
En regardant la console nous obtenons bien une NodeList

Ici par exemple si nous souhaitons parcourir notre Nodelist pour en retirer uniquement les boulevards qui contiennent "de" à l'intérieur, il faudrait faire une première boucle for et y récupérer à l'intérieur notre élément html, faire une recherche pour notre "de", retourner notre élément si il y a une correspondance, et null, dans le cas contraire. Ensuite il faudrait faire parcourir une seconde fois notre tableau pour retirer les éléments null à l'intérieur.
Oubliez tout ça maintenant. Grâce à l'opérateur spread nous allons pouvoir parcourir notre Nodelist le fait de rajouter [] permet de retourner l'ensemble sous forme de tableau, nous aurions pu également faire {} pour retourner l'ensemble sous forme d'un objet.
Ce qui nous donne au final.

// Utilisation de l'opérateur spread
var bvd_link = [...document.querySelectorAll(".mw-category-group a")];
// Adieu NodeList bonjour Array
de = bvd_link.map(el => el.textContent).filter(el => el.includes("de"));
console.table(de);
© 2020 - Powered by Gatsby & Prismic