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"

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"

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"

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

1. .length

   • Retourne la longueur du tableau.

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

2. .push(element)

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

   fruits.push("raisin");

3. .pop()

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

   let dernierFruit = fruits.pop();

4. .shift()

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

   let premierFruit = fruits.shift();

5. .unshift(element)

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

   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é.

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

7. .slice(debut, fin)

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

   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.

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

9. .forEach(callback)

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

   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.

    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.

    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.

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

Astuces

• Modification Directe : Faites attention lorsque vous modifiez un tableau directement (comme avec splice). Cela peut affecter les autres parties de votre programme qui utilisent le même tableau.
• Chainage des Méthodes : Plusieurs méthodes de tableau peuvent être chaînées ensemble pour effectuer des opérations complexes de manière concise.
• Immutabilité : Certaines méthodes, comme slice et concat, ne modifient pas le tableau original et sont utiles pour suivre les principes de programmation fonctionnelle.