Skip to content

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.

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

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

javascript
// 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
  2. .push(element)

    • Ajoute un ou plusieurs éléments à la fin du tableau.
    javascript
    fruits.push("raisin");
  3. .pop()

    • Supprime le dernier élément du tableau et le retourne.
    javascript
    let dernierFruit = fruits.pop();
  4. .shift()

    • Supprime le premier élément du tableau et le retourne.
    javascript
    let premierFruit = fruits.shift();
  5. .unshift(element)

    • Ajoute un ou plusieurs éléments au début du tableau.
    javascript
    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");
  7. .slice(debut, fin)

    • Retourne une partie du tableau sans modifier le tableau original.
    javascript
    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");
  9. .forEach(callback)

    • Exécute une fonction fournie sur chaque élément du tableau.
    javascript
    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());
  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);
  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);

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.

Abonnez-vous à la newsletter

En juillet, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !