Les tableaux ​

Les tableaux et les boucles en JavaScript sont souvent utilisés ensemble pour traiter et manipuler des ensembles de données. Les boucles permettent d'itérer sur chaque élément d'un tableau, exécutant un bloc de code pour chaque élément. C'est une pratique courante pour effectuer des opérations comme le filtrage, la transformation ou le calcul d'agrégats sur les données du tableau. Voici un exemple illustrant comment utiliser les boucles avec les tableaux :

Exemple : Calcul de la Somme des Éléments d'un Tableau ​

Imaginons que nous avons un tableau de nombres et que nous voulons calculer la somme de tous ces nombres. Nous pouvons utiliser une boucle for pour parcourir le tableau et ajouter chaque nombre à une variable de somme.

let nombres = [10, 20, 30, 40, 50];
let somme = 0;

for (let i = 0; i < nombres.length; i++) {
    somme += nombres[i];
}

console.log("La somme est :", somme); // Affiche "La somme est : 150"

let nombres = [10, 20, 30, 40, 50];
let somme = 0;

for (let i = 0; i < nombres.length; i++) {
    somme += nombres[i];
}

console.log("La somme est :", somme); // Affiche "La somme est : 150"

Dans cet exemple, la boucle for parcourt chaque élément du tableau nombres. La variable i sert d'indice pour accéder à chaque élément du tableau. À chaque itération, la valeur de l'élément actuel (nombres[i]) est ajoutée à la variable somme. Après la fin de la boucle, somme contient la somme totale de tous les éléments du tableau.

Variante avec la Boucle for...of ​

Vous pouvez également utiliser la boucle for...of pour itérer sur les éléments d'un tableau. Cette méthode est souvent plus lisible, surtout lorsque l'indice de l'élément n'est pas nécessaire.

let somme2 = 0;

for (let nombre of nombres) {
    somme2 += nombre;
}

console.log("La somme avec for...of est :", somme2); // Affiche "La somme avec for...of est : 150"

let somme2 = 0;

for (let nombre of nombres) {
    somme2 += nombre;
}

console.log("La somme avec for...of est :", somme2); // Affiche "La somme avec for...of est : 150"

Dans cette variante, la boucle for...of parcourt directement les éléments du tableau nombres, rendant le code plus concis et direct.

Utilisation des Méthodes de Tableau ​

JavaScript propose également des méthodes intégrées pour les tableaux, comme forEach et reduce, qui peuvent être utilisées pour des opérations similaires.

// Utilisation de forEach
let somme3 = 0;
nombres.forEach(nombre => somme3 += nombre);

// Utilisation de reduce
let somme4 = nombres.reduce((acc, nombre) => acc + nombre, 0);

console.log("La somme avec forEach est :", somme3); // Affiche "La somme avec forEach est : 150"
console.log("La somme avec reduce est :", somme4);  // Affiche "La somme avec reduce est : 150"

// Utilisation de forEach
let somme3 = 0;
nombres.forEach(nombre => somme3 += nombre);

// Utilisation de reduce
let somme4 = nombres.reduce((acc, nombre) => acc + nombre, 0);

console.log("La somme avec forEach est :", somme3); // Affiche "La somme avec forEach est : 150"
console.log("La somme avec reduce est :", somme4);  // Affiche "La somme avec reduce est : 150"

Méthodes et Propriétés Communes des Tableaux ​

1. .length

   • Retourne la longueur du tableau.
   javascript

   console.log(fruits.length); // 3

   console.log(fruits.length); // 3

2. .push(element)

   • Ajoute un ou plusieurs éléments à la fin du tableau.
   javascript

   fruits.push("raisin");

   fruits.push("raisin");

3. .pop()

   • Supprime le dernier élément du tableau et le retourne.
   javascript

   let dernierFruit = fruits.pop();

   let dernierFruit = fruits.pop();

4. .shift()

   • Supprime le premier élément du tableau et le retourne.
   javascript

   let premierFruit = fruits.shift();

   let premierFruit = fruits.shift();

5. .unshift(element)

   • Ajoute un ou plusieurs éléments au début du tableau.
   javascript

   fruits.unshift("kiwi");

   fruits.unshift("kiwi");

6. .indexOf(element)

   • Trouve l'indice du premier élément donné dans le tableau, retourne -1 si l'élément n'est pas trouvé.
   javascript

   let index = fruits.indexOf("orange");

   let index = fruits.indexOf("orange");

7. .slice(debut, fin)

   • Retourne une partie du tableau sans modifier le tableau original.
   javascript

   let quelquesFruits = fruits.slice(1, 3);

   let quelquesFruits = fruits.slice(1, 3);

8. .splice(index, nbSuppr, ...elementsAjoutés)

   • Modifie le contenu d'un tableau en ajoutant, supprimant ou remplaçant des éléments.
   javascript

   fruits.splice(2, 0, "mangue", "pêche");

   fruits.splice(2, 0, "mangue", "pêche");

9. .forEach(callback)

   • Exécute une fonction fournie sur chaque élément du tableau.
   javascript

   fruits.forEach(function(fruit) {
       console.log(fruit);
   });

   fruits.forEach(function(fruit) {
       console.log(fruit);
   });

10. .map(callback)

    • Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau.
    javascript

    let majuscules = fruits.map(fruit => fruit.toUpperCase());

    let majuscules = fruits.map(fruit => fruit.toUpperCase());

11. .filter(callback)

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

    let longsFruits = fruits.filter(fruit => fruit.length > 5);

    let longsFruits = fruits.filter(fruit => fruit.length > 5);

12. .reduce(callback, valeurInitiale)

    • Applique une fonction qui est un "accumulateur" et qui traite chaque valeur d'un tableau (de gauche à droite) afin de la réduire à une seule valeur.
    javascript

    let totalLetrres = fruits.reduce((total, fruit) => total + fruit.length, 0);

    let totalLetrres = fruits.reduce((total, fruit) => total + fruit.length, 0);