Aller au contenu
SCRIPTS CLIENTS 25-26

Méthodes des tableaux

🥭 Méthodes sur les tableaux en JavaScript

Qu'est-ce qu'une méthode sur un tableau ?

Une méthode sur un tableau est une fonction intégrée en JavaScript qui simplifie la manipulation des éléments. Ces méthodes remplacent avantageusement les boucles traditionnelles en rendant le code plus court, lisible et élégant.

Fonctions anonymes et fonctions fléchées

Fonction anonyme

Une fonction anonyme est une fonction sans nom utilisée généralement une seule fois, par exemple en tant qu'argument dans une autre fonction.

// Fonction anonyme classique
arr.forEach(function(el) {
  console.log(el);
});

On peut également stocker une fonction anonyme dans une variable pour la réutiliser :

const afficherElement = function(el) {
  console.log(el);
};

arr.forEach(afficherElement);

Fonction fléchée (Arrow Function)

C'est une version raccourcie, très utilisée en JavaScript moderne.

  • Si la fonction fléchée tient sur une seule ligne, le return est implicite :
const double = num => num * 2;
console.log(double(4));
// Output: 8
  • Si la fonction fléchée contient plusieurs lignes, elle nécessite des accolades {} et un return explicite :
const doubleEtLog = num => {
  const resultat = num * 2;
  console.log(resultat);
  return resultat;
};

doubleEtLog(4);
// Output: 8

Comme les fonctions anonymes classiques, on peut stocker les fonctions fléchées dans des variables pour les réutiliser :

const afficherElement = el => console.log(el);

arr.forEach(afficherElement);

Principales méthodes sur les tableaux illustrées avec des emojis

1. forEach() — 🏃‍♂️💨

Parcourt chaque élément sans rien retourner.

const fruits = ["🍎", "🍌", "🍇"];
fruits.forEach(fruit => console.log(fruit));
// Output:
// 🍎
// 🍌
// 🍇

2. map() — 🪞📦

Transforme chaque élément et retourne un nouveau tableau.

const fruits = ["🍎", "🍌", "🍇"];
const smoothies = fruits.map(fruit => fruit + "🥤");
console.log(smoothies);
// Output: ["🍎🥤", "🍌🥤", "🍇🥤"]

3. filter() — 🧹🗑️

Garde uniquement les éléments qui respectent une condition.

const animals = ["🐶", "🐱", "🐶", "🐭"];
const dogsOnly = animals.filter(animal => animal === "🐶");
console.log(dogsOnly);
// Output: ["🐶", "🐶"]

4. find() — 🔍🔑

Renvoie le premier élément correspondant à une condition.

const animals = ["🐶", "🐱", "🐭"];
const cat = animals.find(animal => animal === "🐱");
console.log(cat);
// Output: 🐱

5. some() — 🤔❓

Vérifie si au moins un élément respecte une condition.

const fruits = ["🍎", "🍌", "🍇"];
const hasBanana = fruits.some(fruit => fruit === "🍌");
console.log(hasBanana);
// Output: true

6. every() — ✅📏

Vérifie si tous les éléments respectent une condition.

const fruits = ["🍎", "🍌", "🍇"];
const allFruits = fruits.every(fruit => fruit.includes("🍌"));
console.log(allFruits);
// Output: false

7. reduce() — 🍲➕

Combine tous les éléments en un seul résultat.

const fruits = ["🍎", "🍌", "🍇"];
const fruitSalad = fruits.reduce((acc, fruit) => acc + fruit, "🥗:");
console.log(fruitSalad);
// Output: 🥗:🍎🍌🍇

8. includes() — 📦❓

Vérifie si un élément est présent dans le tableau.

const animals = ["🐶", "🐱", "🐭"];
console.log(animals.includes("🐱"));
// Output: true

Utiliser ces méthodes vous permet d'écrire un code plus concis et facile à maintenir, tout en gardant votre style moderne et efficace.

🧩 Exercices pratiques sur les méthodes d'arrays en JS

Exercice 1 : Adieu les boucles, bonjour les méthodes ! 👋

Convertissez chacune des boucles suivantes en utilisant la méthode appropriée (map, filter, find, etc.) :

  1. Créez un nouveau tableau contenant chaque fruit avec un "🍰" à côté :
const fruits = ["🍎", "🍌", "🍓"];
const newFruits = [];
for(let i = 0; i < fruits.length; i++){
  newFruits.push(fruits[i] + "🍰");
}
  1. Gardez uniquement les chats "🐱" du tableau suivant :
const animals = ["🐱", "🐶", "🐱", "🐭", "🐶"];
const cats = [];
for(let i = 0; i < animals.length; i++){
  if(animals[i] === "🐱"){
    cats.push(animals[i]);
  }
}

Exercice 2 : Debugging express 🚨

Expliquez pourquoi le code suivant ne fonctionne pas correctement, puis corrigez-le :

const fruits = ["🍎", "🍌", "🍓"];
const juices = fruits.map(fruit => {
  fruit + "🥤";
});
console.log(juices);

Exercice 3 : Comparaison de performances 🏎️💨

Générez un tableau contenant plusieurs milliers d'éléments aléatoires (par exemple des nombres). Comparez ensuite les performances (temps d'exécution) des différentes approches suivantes pour traiter ces éléments :

  • Utilisation des méthodes modernes vues précédemment :

    • utilisez .map() et multipliez les nombres par 2.
    • utilisez la méthode sort.

  • Utilisation d'une boucle classique (for) :

    • Pour multiplier les nombres par 2.
    • Pour trier le tableau.

  • Utilisation d'une méthode avec une fonction anonyme stockée dans une variable.

Mesurez précisément le temps pris par chaque méthode et expliquez vos observations.

🧑‍💻 Instructions pour mesurer le temps en JS :

Utilisez console.time("label") et console.timeEnd("label") pour mesurer le temps d’exécution de vos opérations en JavaScript. Exemple :

console.time("exemple");
const result = [1, 2, 3].map(num => num * 3);
console.timeEnd("exemple");

🔗 Chaînage des méthodes sur les tableaux

Le chaînage (ou chaining) est une technique puissante en JavaScript qui consiste à appeler plusieurs méthodes successivement sur un même tableau, en une seule ligne, pour le traiter efficacement et de manière concise.

Cela fonctionne car chaque méthode retourne elle-même un tableau, sur lequel on peut immédiatement appeler une autre méthode.

Exemple concret :

Prenons un exemple simple avec un tableau d'emojis d'animaux :

const animaux = ["🐱", "🐶", "🐭", "🐰", "🐻", "🐼"];

// Chaînage de méthodes : filter puis map
const resultat = animaux
  .filter(animal => animal !== "🐭")   // On enlève la souris 🐭
  .map(animal => animal + "❤️");       // On ajoute un cœur ❤️

console.log(resultat);
// Output: ["🐱❤️", "🐶❤️", "🐰❤️", "🐻❤️", "🐼❤️"]

Grâce au chaînage, le traitement du tableau est clair, compact et rapide à comprendre.

🚀 Exercices de chaînage

Voici quelques exercices progressifs pour tester votre compréhension du chaînage des méthodes.

🟢 Exercice 1 : Smoothie express 🍹

À partir du tableau de fruits suivant :

["🍎", "🍌", "🍒", "🍓", "🍑"]

  • Retirez les bananes (🍌) du tableau.

  • Transformez les fruits restants en smoothies (en ajoutant 🥤).

  • Affichez le résultat final dans la console.

🟠 Exercice 2 : Panier bio 🌿

À partir d'un tableau contenant des fruits frais et pourris :

["🍎", "🍌", "🍎💩", "🍌💩", "🍓", "🍓💩"]

  • Filtrez uniquement les fruits frais (ceux qui ne contiennent pas l’emoji 💩).

  • Vérifiez ensuite si tous les fruits restants sont des fraises (🍓).

  • Affichez dans la console le résultat final (true ou false).

🔴 Exercice 3 : Super salade 🥗

À partir d'un tableau contenant divers aliments :

["🥕", "🍔", "🥦", "🍟", "🍅", "🍩", "🥑", "🍕"]

  • Filtrez uniquement les aliments considérés comme « sains » : 🥕, 🥦, 🍅, 🥑.

  • Transformez chaque aliment sain en ajoutant un emoji salade 🥗 à côté.

  • Fusionnez-les ensuite en une seule chaîne avec reduce() pour obtenir une « super salade ».

  • Affichez le résultat final dans la console.

🌶️ Exercice bonus (très spicy) : Animal Crossing 🐾

À partir du tableau suivant d'animaux :

["🐱", "🐶", "🐭", "🐱", "🐰", "🐶", "🐻", "🐭"]

  • Filtrez uniquement les animaux uniques (qui apparaissent une seule fois dans le tableau).

  • Convertissez chaque animal unique en ajoutant à côté son nom écrit en toutes lettres (ex : "🐱 Chat").

  • Vérifiez ensuite si parmi ces animaux uniques il y a au moins un lapin (🐰).

  • Affichez enfin l’ensemble des résultats obtenus clairement dans la console.

🧰 Autres méthodes utiles sur les tableaux en JavaScript

1. concat() — Fusionne des tableaux

Description : Combine plusieurs tableaux en un seul tableau, sans modifier les originaux.

const fruits = ["🍎", "🍌"];
const veggies = ["🥦", "🥕"];
const mix = fruits.concat(veggies);
console.log(mix); // ["🍎", "🍌", "🥦", "🥕"]

2. slice() — Extrait une portion du tableau

Description : Crée une copie superficielle d'une portion du tableau, sans modifier l'original.

const fruits = ["🍎", "🍌", "🍇", "🍓"];
const someFruits = fruits.slice(1, 3);
console.log(someFruits); // ["🍌", "🍇"]

3. splice() — Modifie le tableau original

Description : Permet d'ajouter, de supprimer ou de remplacer des éléments directement dans le tableau.

const fruits = ["🍎", "🍌", "🍇"];
fruits.splice(1, 1, "🍓");
console.log(fruits); // ["🍎", "🍓", "🍇"]

4. sort() — Trie les éléments du tableau

Description : Trie les éléments du tableau selon leur ordre alphabétique ou numérique.

const numbers = [3, 1, 4, 2];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4]

5. reverse() — Inverse l'ordre des éléments

Description : Inverse l'ordre des éléments directement dans le tableau original.

const fruits = ["🍎", "🍌", "🍇"];
fruits.reverse();
console.log(fruits); // ["🍇", "🍌", "🍎"]

6. fill() — Remplit le tableau avec une valeur spécifique

Description : Remplit tout ou partie du tableau avec une même valeur.

const fruits = ["🍎", "🍌", "🍇"];
fruits.fill("🍓", 1, 2);
console.log(fruits); // ["🍎", "🍓", "🍇"]

7. copyWithin() — Copie une portion du tableau à une autre position

Description : Copie une partie du tableau dans une autre position du même tableau, sans en modifier la taille.

const fruits = ["🍎", "🍌", "🍇", "🍓"];
fruits.copyWithin(1, 2);
console.log(fruits); // ["🍎", "🍇", "🍓", "🍓"]

8. flat() — Aplatit les tableaux imbriqués

Description : Aplatit les tableaux imbriqués jusqu'à la profondeur spécifiée.

const nested = ["🍎", ["🍌", ["🍇"]]];
console.log(nested.flat(2)); // ["🍎", "🍌", "🍇"]

9. flatMap() — Combine map() et flat()

Description : Applique une fonction à chaque élément puis aplatit le résultat d'un niveau.

const numbers = [1, 2, 3];
const doubled = numbers.flatMap(n => [n, n * 2]);
console.log(doubled); // [1, 2, 2, 4, 3, 6]

10. join() — Crée une chaîne à partir des éléments du tableau

Description : Assemble tous les éléments d'un tableau en une chaîne de caractères, séparés par un délimiteur.

const fruits = ["🍎", "🍌", "🍇"];
console.log(fruits.join(" + ")); // "🍎 + 🍌 + 🍇"

11. indexOf() — Retourne l'index du premier élément trouvé

Description : Trouve l'index de la première occurrence d'un élément donné ou renvoie -1 s'il n'existe pas.

const fruits = ["🍎", "🍌", "🍇"];
console.log(fruits.indexOf("🍌")); // 1

12. lastIndexOf() — Retourne le dernier index trouvé d'un élément

Description : Trouve l'index de la dernière occurrence d'un élément donné ou renvoie -1 s'il n'existe pas.

const fruits = ["🍎", "🍌", "🍇", "🍌"];
console.log(fruits.lastIndexOf("🍌")); // 3

13. findIndex() — Retourne l'index selon une condition

Description : Trouve l'index du premier élément respectant une condition définie.

const numbers = [1, 3, 5, 8, 9];
console.log(numbers.findIndex(num => num > 5)); // 3

14. toString() — Convertit le tableau en chaîne de caractères

Description : Convertit automatiquement le tableau en une chaîne séparée par des virgules.

const fruits = ["🍎", "🍌", "🍇"];
console.log(fruits.toString()); // "🍎,🍌,🍇"