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'ArrayArray.from(pTous)
avec unforEach( (p) => {..} )
: En particulier, cela veut dire que les éléments d'un Array sont itérables avec unforEach
(ç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'ArrayArray.from(pTous)
avec unforEach( (p) => {..} )
: En particulier, cela veut dire que les éléments d'un Array sont itérables avec unforEach
(ça c'est plus important) - ce noeud est stylisable en CSS, depuis Javascript avec la propriété
style