Itérer sur des collections

Manipuler des collections signifie presque toujours itérer : parcourir les éléments un par un et effectuer une action pour chacun d'eux. Dans cette leçon, nous découvrons les syntaxes de base ; dans le module sur les tableaux fonctionnels (map / filter / reduce), nous apprendrons à écrire ces opérations de manière plus déclarative.

for…of pour les tableaux

C'est la boucle que tu voudras utiliser presque tout le temps pour parcourir un tableau : elle extrait la valeur à chaque étape.

const colori = ['rosso', 'verde', 'blu'];

for (const c of colori) {
  console.log(c);
}
// 'rosso'
// 'verde'
// 'blu'

Si tu as également besoin de l'index, utilise entries() :

for (const [i, c] of colori.entries()) {
  console.log(`${i}: ${c}`);
}
// '0: rosso', '1: verde', '2: blu'

for…in pour les objets — avec précaution

for…in parcourt les clés (chaînes de caractères) d'un objet :

const utente = { nome: 'Anna', eta: 28 };
for (const k in utente) {
  console.log(`${k} = ${utente[k]}`);
}

Object.keys / values / entries

C'est la méthode robuste pour parcourir un objet. Elles renvoient des tableaux, et se combinent donc parfaitement avec for…of :

const utente = { nome: 'Anna', eta: 28 };

Object.keys(utente); // ['nome', 'eta']
Object.values(utente); // ['Anna', 28]
Object.entries(utente); // [['nome', 'Anna'], ['eta', 28]]

for (const [k, v] of Object.entries(utente)) {
  console.log(`${k} → ${v}`);
}

for classique

Le for "à l'ancienne" existe toujours. Tu l'utiliseras rarement, mais il s'avère utile lorsque tu as besoin d'un contrôle précis sur l'index (sauter des éléments, itérer en sens inverse) :

for (let i = 0; i < colori.length; i++) {
  console.log(i, colori[i]);
}

// Al contrario
for (let i = colori.length - 1; i >= 0; i--) {
  console.log(colori[i]);
}

À toi de jouer

Exercice de révision