Les Tableaux en JavaScript : Méthodes Essentielles
map, filter, reduce, forEach, find, sort — toutes les méthodes de tableau à maîtriser
Créer et manipuler un tableau
const fruits = [« pomme », « banane », « orange »];
const vide = [];
const nombres = Array.from(, (_, i) => i); // [0,1,2,3,4]
// Accéder
fruits[0]; // « pomme »
fruits[fruits.length – 1]; // « orange » (dernier)
fruits.at(–1); // « orange » (ES2022 — plus lisible)
// Ajouter / Supprimer
fruits.push(« kiwi »); // Ajoute à la fin → [« pomme », »banane », »orange », »kiwi »]
fruits.pop(); // Supprime le dernier → [« pomme », »banane », »orange »]
fruits.unshift(« fraise »); // Ajoute au début
fruits.shift(); // Supprime le premier
// Copier (spread)
const copie = […fruits];
// Vérifier
Array.isArray(fruits); // true
fruits.includes(« banane »); // true
fruits.length; // 3
forEach — parcourir sans retour
forEach exécute une fonction sur chaque élément. Il ne retourne rien (undefined). Utilise-le pour des effets de bord (afficher, envoyer, modifier un état externe).
noms.forEach((nom, index) => );
// 0: Alice
// 1: Bob
// 2: Charlie
⚠️ forEach ne peut pas être interrompu avec break ou return. Si tu as besoin d'arrêter la boucle en cours de route, utilise for…of ou find.
map — transformer chaque élément
map crée un nouveau tableau en appliquant une fonction à chaque élément. Le tableau original n'est pas modifié.
// Doubler chaque prix
const doubles = prix.map(p => p * 2);
// [20, 40, 60]
// Formatter
const labels = prix.map(p => `$ €`);
// [« 10 € », « 20 € », « 30 € »]
// Extraire une propriété d'objets
const users = [
,
,
];
const noms = users.map(u => u.nom);
// [« Alice », « Bob »]
map retourne toujours un tableau de même longueur. Si tu veux filtrer en même temps, utilise filter avant ou après, ou flatMap.
filter — garder certains éléments
filter crée un nouveau tableau contenant uniquement les éléments pour lesquels la fonction retourne true.
// Garder les pairs
const pairs = nombres.filter(n => n % 2 === 0);
// [2, 4, 6, 8]
// Filtrer des objets
const users = [
,
,
,
];
const majeurs = users.filter(u => u.age >= 18);
// [, ]
// Supprimer les doublons
const uniques = nombres.filter((val, i, arr) => arr.indexOf(val) === i);
// Alternative moderne : […new Set(nombres)]
reduce — tout réduire à une valeur
reduce parcourt le tableau et accumule un résultat. C'est la méthode la plus puissante — elle peut remplacer map, filter et forEach.
const prix = [10, 20, 30];
// Somme
const total = prix.reduce((acc, p) => acc + p, 0);
// 60
// Maximum
const max = prix.reduce((acc, p) => p > acc ? p : acc, 0);
// 30 (alternative : Math.max(…prix))
// Compter les occurrences
const fruits = [« pomme », « banane », « pomme », « orange », « banane », « pomme »];
const compteur = fruits.reduce((acc, fruit) => , );
//
// Grouper par propriété
const users = [
,
,
,
];
const parVille = users.reduce((acc, u) => , );
//
// Alternative ES2024 : Object.groupBy(users, u => u.ville)
⚠️ Fournis toujours la valeur initiale (le 2e argument de reduce). Sans elle, reduce utilise le premier élément comme accumulateur — ce qui cause des bugs avec des tableaux vides.
find et findIndex
find retourne le premier élément qui satisfait la condition (ou undefined). findIndex retourne son index (ou -1).
,
,
,
];
const bob = users.find(u => u.id === 2);
//
const index = users.findIndex(u => u.nom === « Charlie »);
// 2
// some — au moins un élément satisfait la condition ?
users.some(u => u.age > 18); // true
// every — TOUS satisfont la condition ?
users.every(u => u.nom); // true
sort — trier un tableau
const nombres = [10, 1, 21, 2];
nombres.sort();
// [1, 10, 2, 21] ← FAUX ! Tri alphabétique « 1 » < "10" < "2"
// Tri numérique correct
nombres.sort((a, b) => a – b); // croissant [1, 2, 10, 21]
nombres.sort((a, b) => b – a); // décroissant [21, 10, 2, 1]
// Tri d'objets par propriété
const users = [
,
,
,
];
users.sort((a, b) => a.age – b.age); // par âge croissant
users.sort((a, b) => a.nom.localeCompare(b.nom)); // alphabétique
// toSorted() — ES2023, ne modifie PAS l'original
const triee = nombres.toSorted((a, b) => a – b);
⚠️ sort() modifie le tableau original (mutation). Pour garder l'original intact, utilise toSorted() (ES2023) ou […arr].sort().
Autres méthodes utiles
| Méthode | Rôle | Retourne | Mute ? |
|---|---|---|---|
| map(fn) | Transformer chaque élément | Nouveau tableau | Non |
| filter(fn) | Garder les éléments qui passent le test | Nouveau tableau | Non |
| reduce(fn, init) | Accumuler une valeur | Valeur unique | Non |
| forEach(fn) | Exécuter sur chaque élément | undefined | Non |
| find(fn) | Premier élément qui passe le test | Élément ou undefined | Non |
| findIndex(fn) | Index du premier match | Index ou -1 | Non |
| some(fn) | Au moins un passe le test ? | Boolean | Non |
| every(fn) | Tous passent le test ? | Boolean | Non |
| sort(fn) | Trier | Même tableau (muté) | Oui |
| slice(start, end) | Extraire une portion | Nouveau tableau | Non |
| splice(i, n) | Supprimer/insérer à une position | Éléments supprimés | Oui |
| flat(depth) | Aplatir un tableau imbriqué | Nouveau tableau | Non |
| flatMap(fn) | map + flat(1) | Nouveau tableau | Non |
| includes(val) | Contient la valeur ? | Boolean | Non |
| join(sep) | Concaténer en string | String | Non |
Chaîner les méthodes
Comme map, filter et sort retournent des tableaux, tu peux les enchaîner :
,
,
,
,
];
// Produits en stock, triés par prix, formatés
const resultat = products
.filter(p => p.stock > 0) // en stock seulement
.toSorted((a, b) => a.prix – b.prix) // prix croissant
.map(p => `$ — $ €`); // formater
// [« Watch — 299 € », « Tablet — 449 € », « Laptop — 999 € »]
Le chaînage est la façon idiomatique de manipuler des données en JavaScript. C'est lisible, fonctionnel et sans mutation. Chaque étape produit un nouveau tableau.
Questions fréquentes
🔤 let, const, var
⏳ Promesses & async/await
➡️ Fonctions fléchées
🧩 Destructuring
🔁 Boucles
⚡ Cours JavaScript complet
🏠 Hub Programmation
Les tableaux en JavaScript — map, filter, reduce et toutes les méthodes essentielles
Référence : MDN Array