Parcourir un tableau
songs contient rain, tide et dusk, et le nombre reste figé sur toute cette page, parce que forEach ne fait que visiter et ne rallonge ni ne raccourcit la liste comme au chapitre d'avant.
La longueur ne bouge pas
Cette fois la marche est un appel de méthode, et l'index peut venir avec, contrairement à for...of qui ne donne que la valeur. Aucun titre n'est ajouté à la fin, et aucun titre n'est retiré de la liste.
La fonction que tu remets
Tu remets une fonction qui tourne une fois par morceau, et la fiche en dessous est le contrat de cette page.
📊 Ce que forEach te donne
| Pièce | Quand tu l'as | Ce n'est pas |
|---|---|---|
| premier argument | à chaque visite | la longueur |
| deuxième argument | seulement si tu le nommes | obligatoire |
| résultat de l'appel | quand forEach a fini |
un nouveau tableau |
length ensuite |
quand tu lis songs.length |
modifié par la visite |
Le morceau est le premier argument et l'index le second, que tu peux omettre.
L'ordre dans la console
Affiche chaque titre. D'abord rain, puis tide, enfin dusk.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title) {
console.log(title);
});
Trois lignes sortent, de l'avant du tableau vers l'arrière. Les trois chaînes sont encore dans les mêmes cases.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title, i) {
console.log(i);
console.log(title);
});
Zéro appartient à rain, deux appartient à dusk, et tide est entre les deux, sur un.
let songs = ["rain", "tide", "dusk"];
let result = songs.forEach(function (title) {
console.log(title);
});
console.log(result);
console.log(songs.length);
Range l'appel dans une variable et affiche-la pour voir undefined, qui n'est ni un titre ni une longueur. L'affichage de length reste 3.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title) {
if (title === "tide") {
return;
}
console.log(title);
});
Si le titre est tide et que tu reviens tout de suite, cette ligne ne s'affiche pas. La marche continue, et dusk sort quand même.
let songs = ["rain", "tide", "dusk"];
let seen = 0;
songs.forEach(function (title) {
seen = seen + 1;
});
console.log(seen);
console.log(songs.length);
Ton compteur tombe sur 3 et length aussi, mais c'est toi qui as tenu la somme, l'appel ne te l'a pas rendue.
Les titres dans le paragraphe
Construis une chaîne avec une espace entre les titres et mets-la dans le paragraphe. Laisse la longueur hors de la ligne.
<!DOCTYPE html>
<html>
<head>
<title>array-iteration — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let songs = ["rain", "tide", "dusk"];
let line = "";
songs.forEach(function (title) {
if (line !== "") {
line = line + " ";
}
line = line + title;
});
let box = document.getElementById("line");
box.textContent = line;
</script>
</body>
</html>
La ligne montre les trois titres séparés par une espace, et si tu changes tide en fog puis que tu recharges, le mot du milieu change. La visite couvre toujours trois titres.
Fais la marche
- Affiche les trois titres. Vérifie que
rainest en premier - Affiche chaque index et vérifie que
rainest sur 0 - Garde le résultat de l'appel et vois
undefinedpendant que la longueur reste 3 - Reviens tout de suite sur
tideet vérifie quedusks'affiche encore - Ajoute 1 à
seenà chaque visite et vérifie que tu obtiens 3 - Lis la ligne de la page, passe
tideàfoget recharge
Facile à mal lire
- N'attends pas que l'appel rende le dernier titre. Ce qui revient n'est pas un morceau
- N'attends pas que l'appel rende la longueur
- N'écris pas
breakdans la fonction, c'est une erreur de syntaxe - Ne crois pas que
returnaprèstidebloque aussidusk - Ne lis pas le second paramètre comme le titre
- Ne cherche pas une valeur sur cette page
Tu repars avec ça
forEachvisite chaque élément de l'avant vers l'arrière, et le premier paramètre est l'élément- Le second paramètre est l'index
- Le résultat de l'appel lui-même est
undefined returndans la fonction saute seulement cette visite- La page suivante cherche selon la valeur
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut