Aller au contenu

1NSI : Javascript - Boucle forEach() depuis un Array⚓︎

Syntaxe Générale⚓︎

// let tableau = Array(3, 10, "Bonjour");
let tableau = [3, 10, "Bonjour"];
tableau.forEach( (el) => {
  console.log(el);
});

affiche dans la console javascript (outils web) :

3
10
Bonjour

Méthode 1 forEach : Parcours des éléments avec conversion depuis une NodeList⚓︎

See the Pen forEach by rod2ik (@rod2ik) on CodePen.

Cette syntaxe forEach() en javascript:

  • Utilise ⚠ OBLIGATOIREMENT ⚠ un Array (en particulier PAS une NodeList, NI une HTMLCollection)
  • récupère tous les paragraphes, et les stocke dans la variable javascript pTous
  • Le type de données de pTous est une NodeList (c'est tout de même important ici, car il va falloir commencer par la convertir en Array),
  • commence par convertir la NodeList en Array (on pourrait tout aussi bien le faire aussi avec une HTMLCollection, cf méthode 2)
  • On peut itérer sur chaque paragraphe p de l'Array Array.from(pTous) avec un forEach( (p) => {..} ) : En particulier, cela veut dire que les éléments d'un Array sont itérables avec un forEach (ça c'est plus important)
  • ce noeud est stylisable en CSS, depuis Javascript avec la propriété style

Méthode 2 forEach : Parcours des éléments avec conversion depuis une HTMLCollection⚓︎

See the Pen Untitled by rod2ik (@rod2ik) on CodePen.

Cette syntaxe forEach() en javascript:

  • ⚠ Utilise OBLIGATOIREMENT un Array (en particulier PAS une NodeList, NI une HTMLCollection)
  • récupère tous les paragraphes, et les stocke dans la variable javascript pTous
  • Le type de données de pTous est une NodeList (c'est tout de même important ici, car il va falloir commencer par la convertir en Array),
  • commence par convertir le type HTMLCollection en Array (on pourrait tout aussi bien le faire aussi avec une NodeList, cf méthode 1)
  • On peut itérer sur chaque paragraphe p de l'Array Array.from(pTous) avec un forEach( (p) => {..} ) : En particulier, cela veut dire que les éléments d'un Array sont itérables avec un forEach (ça c'est plus important)
  • ce noeud est stylisable en CSS, depuis Javascript avec la propriété style