Parcourir un tableau

Notions théoriques

Parcourir un tableau signifie passer en revue chaque élément du tableau un par un.

En JavaScript, il existe plusieurs façons de parcourir un tableau, parmi lesquelles l'utilisation d'une boucle for ou d'une boucle for...of.

• Une boucle for fonctionne en répétant un bloc de code un certain nombre de fois.

  Pour parcourir un tableau, nous utilisons la longueur du tableau (obtenue avec array.length) comme le nombre de répétitions pour la boucle.

• La boucle for...of est une autre méthode pour parcourir un tableau en JavaScript.

  Elle est plus simple et plus lisible que la boucle for. Elle parcourt chaque élément du tableau, sans avoir besoin d'utiliser un index.

Voici comment cela fonctionne :

let fruits = ["Pomme", "Banane", "Cerise"];

// Utilisation d'une boucle for
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// Utilisation d'une boucle for...of
for (let fruit of fruits) {
    console.log(fruit);
}

Dans ces exemples, les deux boucles parcourent tout le tableau et affichent chaque fruit sur la console.

Exemples pratiques

let notes = [15, 12, 14, 16, 13];

// Utilisation d'une boucle for
for (let i = 0; i < notes.length; i++) {
    console.log(notes[i]);
}

// Utilisation d'une boucle for...of
for (let note of notes) {
    console.log(note);
}

Dans cet exemple, nous parcourons le tableau notes de 2 manières différentes et affichons chaque note sur la console.

Quelques méthodes à connaître

• forEach() : Cette méthode exécute une fonction donnée sur chaque élément du tableau.

• map() : Cette méthode crée un nouveau tableau avec les résultats de l'appel d'une fonction pour chaque élément du tableau.

Autres méthodes souvent utilisées

• filter() : Cette méthode crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.

• reduce() : Cette méthode applique une fonction qui est un "réducteur" aux éléments du tableau (de gauche à droite) de manière à réduire le tableau à une seule valeur.

Autres exemples

Exemple avec forEach()

La méthode forEach() exécute une fonction donnée sur chaque élément du tableau. Elle est souvent utilisée pour effectuer des opérations sur chaque élément du tableau.

let nombres = [1, 2, 3, 4, 5];

// Utilisation de forEach pour afficher chaque élément du tableau
nombres.forEach(function(nombre) {
    console.log(nombre);
});

Le même exemple avec la méthode forEach() et une fonction flèchée :

let nombres = [1, 2, 3, 4, 5];

// Utilisation de forEach pour afficher chaque élément du tableau
nombres.forEach(nombre => {
    console.log(nombre);
});

Dans cet exemple, nous utilisons forEach() pour parcourir le tableau nombres et afficher chaque nombre sur la console.

Exemple avec map()

La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction pour chaque élément du tableau. Elle est souvent utilisée pour transformer chaque élément du tableau.

let nombres = [1, 2, 3, 4, 5];

// Utilisation de map pour multiplier chaque nombre par 2
let doubles = nombres.map(nombre => {
    return nombre * 2;
});

console.log(doubles); // Affiche [2, 4, 6, 8, 10]

Dans cet exemple, nous utilisons map() pour créer un nouveau tableau doubles où chaque nombre est le double du nombre correspondant dans le tableau nombres.

Exemple combinant forEach() et map()

let nombres = [1, 2, 3, 4, 5];

// Utilisation de map pour multiplier chaque nombre par 2
let doubles = nombres.map(nombre => {
    return nombre * 2;
});

// Utilisation de forEach pour afficher chaque élément du nouveau tableau
doubles.forEach(double => {
    console.log(double);
});

Dans cet exemple, nous utilisons d'abord map() pour créer un nouveau tableau doubles où chaque nombre est le double du nombre correspondant dans le tableau nombres. Ensuite, nous utilisons forEach() pour parcourir le tableau doubles et afficher chaque nombre sur la console.

Test de mémorisation/compréhension

Comment parcourt-on un tableau en JavaScript ?

En utilisant une boucle for.

En utilisant une boucle for...of.

Les deux réponses précédentes.

Aucune des réponses précédentes.

Qu'est-ce que la méthode forEach() fait ?

Elle exécute une fonction donnée sur chaque élément du tableau.

Elle crée un nouveau tableau avec les résultats de l'appel d'une fonction pour chaque élément du tableau.

Elle crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.

Aucune des réponses précédentes.

Qu'est-ce que la méthode map() fait ?

Elle exécute une fonction donnée sur chaque élément du tableau.

Elle crée un nouveau tableau avec les résultats de l'appel d'une fonction pour chaque élément du tableau.

Elle crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.

Aucune des réponses précédentes.

---

TP pour réfléchir et résoudre des problèmes

Dans ce TP, nous allons créér plusieurs tableaux et utiliser différentes méthodes pour les parcourir.

1. Créez un tableau jours qui contient les noms de tous les jours de la semaine.

let jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

2. Utilisez une boucle for pour afficher chaque jour sur la console.

Une solution possible

let jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

// Utilisation d'une boucle for
for (let i = 0; i < jours.length; i++) {
    console.log(jours[i]);
}

3. Utilisez une boucle for...of pour afficher chaque jour sur la console.

Une solution possible

let jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

// Utilisation d'une boucle for...of
for (let jour of jours) {
    console.log(jour);
}

4. Créez une fonction afficherJours(jours) qui prend un tableau de jours en argument et utilise la méthode forEach() pour afficher chaque jour sur la console.

let jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

function afficherJours(jours) {
    ...
}

afficherJours(jours);  // Affiche chaque jour sur la console

Une solution possible

let jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

function afficherJours(jours) {
    jours.forEach(function(jour) {
        console.log(jour);
    });
}

afficherJours(jours);  // Affiche chaque jour sur la console

La même solution avec une fonction flèchée

let jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];

function afficherJours(jours) {
    jours.forEach(jour => console.log(jour));
}  

afficherJours(jours);  // Affiche chaque jour sur la console

5. Créez un tableau notes avec 5 notes entre 1 et 20.

let notes = [15, 12, 14, 16, 13];

6. Utilisez la méthode map() pour créer un nouveau tableau notesSurDix qui contient chaque note du tableau notes divisée par 2.

Une solution possible

let notes = [15, 12, 14, 16, 13];
let notesSurDix = notes.map(function(note) {
  return note / 2;
});

console.log(notesSurDix);  // Affiche le nouveau tableau de notes sur dix

La même solution avec une fonction flèchée

let notes = [15, 12, 14, 16, 13];
let notesSurDix = notes.map(note => note / 2);

console.log(notesSurDix);  // Affiche le nouveau tableau de notes sur dix

---