Frontend Academy · Leçon

Méthodes de tableau : map, filter, reduce et find

Transformez, filtrez et agrégez des tableaux avec des méthodes d’ordre supérieur plutôt qu’avec des boucles manuelles. Enchaînez-les pour créer des pipelines de données expressifs.

Méthodes de tableau : map, filter, reduce et find est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Pourquoi utiliser les méthodes des tableaux ?

Les boucles for impératives fonctionnent, mais masquent l'intention. Les méthodes de niveau supérieur des tableaux déclarent ce que vous voulez plutôt que la manière d'itérer. Elles produisent un code plus propre, testable et composable, qui se lit comme un texte.

Array.map() — Transformer chaque élément

map() renvoie un nouveau tableau dans lequel chaque élément a été transformé par la fonction de rappel. Le tableau d'origine n'est pas modifié. Utilisez cette méthode chaque fois que vous devez convertir un tableau en un autre.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Sélectionner les éléments correspondants

filter() renvoie un nouveau tableau contenant uniquement les éléments pour lesquels la fonction de rappel renvoie une valeur considérée comme vraie. La fonction de rappel est une fonction prédicat.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Accumuler une valeur

reduce(callback, initialValue) accumule tous les éléments dans une seule valeur. La fonction de rappel reçoit l'accumulateur et l'élément actuel. La valeur initiale est la valeur de départ de l'accumulateur.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — Première correspondance

find() renvoie le premier élément correspondant au prédicat, ou undefined si aucun élément ne correspond. Utilisez cette méthode pour rechercher un élément par ID ou par valeur de propriété.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() fonctionne comme find(), mais renvoie l'index de l'élément correspondant, ou -1 si aucun élément n'est trouvé. Cette méthode est utile pour trouver où mettre à jour un élément dans un tableau.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() et Array.every()

some() renvoie true si au moins un élément réussit le test. every() renvoie true uniquement si tous les éléments réussissent. Les deux méthodes s'arrêtent dès qu'elles obtiennent un résultat concluant.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Mapper puis aplatir

flatMap() mappe chaque élément, puis aplatit le résultat d'un niveau. C'est l'équivalent de .map(...).flat(), mais de manière plus efficace.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Chaîner les méthodes des tableaux

Les méthodes renvoient de nouveaux tableaux, ce qui vous permet de les chaîner. Lisez les chaînes de gauche à droite : filtrez d'abord, transformez ensuite, puis agrégez.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() et Array.includes()

at(-1) récupère le dernier élément. includes(value) vérifie si une valeur existe. C'est bien plus lisible que arr[arr.length - 1] et arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Immuabilité : ne modifiez pas les données

map, filter et reduce renvoient de nouveaux tableaux. push, pop et splice modifient le tableau d'origine. Dans l'état React, créez toujours de nouveaux tableaux (avec la syntaxe de décomposition ou map) au lieu de modifier directement l'état.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Vérification rapide

Quelle méthode de tableau renvoie un nouveau tableau contenant les éléments pour lesquels la fonction de rappel renvoie true ?

Récapitulatif : méthodes des tableaux

map() transforme chaque élément. filter() sélectionne les éléments correspondants. reduce() accumule les éléments en une seule valeur. find() renvoie la première correspondance. some() et every() testent l'appartenance. Ces chaînes de méthodes remplacent les boucles imbriquées par des chaînes de traitement de données lisibles et déclaratives.

Questions Fréquemment Posées

La leçon « Méthodes de tableau : map, filter, reduce et find » est-elle gratuite ?

Oui — le texte complet de « Méthodes de tableau : map, filter, reduce et find » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Méthodes de tableau : map, filter, reduce et find » ?

Transformez, filtrez et agrégez des tableaux avec des méthodes d’ordre supérieur plutôt qu’avec des boucles manuelles. Enchaînez-les pour créer des pipelines de données expressifs. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Méthodes de tableau : map, filter, reduce et find » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Méthodes de tableau : map, filter, reduce et find
Déstructuration et opérateur spread des objets
Littéraux de modèle et chaînage optionnel
Modules : import et export

← Retour à Frontend Academy