Aller au contenu principal

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.

Bonne pratique - for...of vs for classique

Preferer for...of pour sa lisibilite quand on n'a pas besoin de l'index. Utiliser le for classique quand l'index est necessaire.

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.

Bonne pratique - forEach vs map

forEach execute une action sur chaque element mais ne retourne rien. map retourne un nouveau tableau transforme.

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.

Bonne pratique - Chainer les methodes

map et filter peuvent etre chaines : tableau.filter(...).map(...).

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 ?


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


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


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"];
  1. Utilisez une boucle for pour afficher chaque jour sur la console.
  1. Utilisez une boucle for...of pour afficher chaque jour sur la console.
  1. 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
Bonne pratique - forEach avec fonction flechee

La version avec fonction flechee jours.forEach(jour => console.log(jour)) est plus concise et lisible.

  1. Créez un tableau notes avec 5 notes entre 1 et 20.
let notes = [15, 12, 14, 16, 13];
  1. Utilisez la méthode map() pour créer un nouveau tableau notesSurDix qui contient chaque note du tableau notes divisée par 2.
Bonne pratique - map ne modifie pas le tableau original

map() retourne un NOUVEAU tableau, le tableau original reste inchange.

Une solution