Les tableaux en JavaScript : map, filter, reduce et toutes les méthodes
Le tableau JavaScript (Array) est la structure de données que vous manipulerez le plus souvent : une liste ordonnée de valeurs, indexée à partir de zéro. Ajouter un élément, filtrer une liste, additionner des montants, trier des noms… tout passe par un tableau et ses dizaines de méthodes. Ce guide couvre chaque opération, de la plus basique à la plus expressive, avec un exemple concret à chaque fois. Gardez-le sous la main comme un aide-mémoire.
Créer un tableau
Trois façons de créer un tableau, la première étant de loin la plus courante.
// Littéral (à privilégier)
const fruits = ["pomme", "poire", "kiwi"];
// Tableau vide, rempli ensuite
const scores = [];
// Array.of pour éviter le piège de new Array(3)
const nombres = Array.of(3); // [3]
const vide = new Array(3); // [ <3 empty items> ] — attention
// Array.from : depuis un itérable ou avec une fonction de génération
const lettres = Array.from("abc"); // ["a", "b", "c"]
const carres = Array.from({ length: 5 }, (_, i) => i * i); // [0, 1, 4, 9, 16]
Accéder aux éléments
L’accès se fait par index. at() accepte les index négatifs pour partir de la fin.
const villes = ["Paris", "Lyon", "Nice"];
console.log(villes[0]); // "Paris"
console.log(villes.length); // 3
console.log(villes[villes.length - 1]); // "Nice"
console.log(villes.at(-1)); // "Nice" (plus lisible)
console.log(villes.includes("Lyon")); // true
console.log(villes.indexOf("Nice")); // 2
Ajouter et supprimer des éléments
Quatre méthodes historiques gèrent les deux extrémités du tableau.
const pile = ["a", "b"];
pile.push("c"); // ajoute à la fin → ["a", "b", "c"]
pile.pop(); // retire le dernier → renvoie "c"
pile.unshift("z"); // ajoute au début → ["z", "a", "b"]
pile.shift(); // retire le premier → renvoie "z"
Pour insérer ou retirer n’importe où, splice modifie le tableau en place.
const jours = ["lundi", "mercredi", "jeudi"];
// splice(index, nbÀSupprimer, ...élémentsÀInsérer)
jours.splice(1, 0, "mardi"); // insère sans rien supprimer
// ["lundi", "mardi", "mercredi", "jeudi"]
jours.splice(2, 1); // supprime 1 élément à l'index 2
// ["lundi", "mardi", "jeudi"]
slice, à ne pas confondre, ne modifie rien : il renvoie une copie d’une portion.
const nombres = [10, 20, 30, 40, 50];
const milieu = nombres.slice(1, 4); // [20, 30, 40] — nombres est intact
Parcourir un tableau
La boucle for classique reste utile quand on a besoin de l’index ou d’interrompre le parcours avec break.
const notes = [12, 8, 17, 4];
for (let i = 0; i < notes.length; i++) {
console.log(`Note ${i} : ${notes[i]}`);
}
// for...of : plus lisible quand l'index n'importe pas
for (const note of notes) {
console.log(note);
}
forEach applique une fonction à chaque élément. À noter : on ne peut pas l’interrompre avec break.
notes.forEach((note, index) => {
console.log(`Position ${index} → ${note}`);
});
Transformer avec map
map crée un nouveau tableau en appliquant une fonction à chaque élément. C’est la méthode de transformation par excellence.
const prix = [10, 25, 40];
const prixTTC = prix.map(p => p * 1.2); // [12, 30, 48]
const etiquettes = prix.map(p => `${p} €`); // ["10 €", "25 €", "40 €"]
// Idéal pour extraire un champ d'une liste d'objets
const users = [{ nom: "Léa" }, { nom: "Tom" }];
const noms = users.map(u => u.nom); // ["Léa", "Tom"]
Filtrer avec filter
filter renvoie un nouveau tableau ne contenant que les éléments qui passent le test.
const nombres = [4, 9, 12, 3, 20];
const pairs = nombres.filter(n => n % 2 === 0); // [4, 12, 20]
const grands = nombres.filter(n => n > 10); // [12, 20]
// Retirer les valeurs "vides"
const brut = ["a", "", null, "b", undefined];
const propre = brut.filter(Boolean); // ["a", "b"]
Agréger avec reduce
reduce réduit un tableau à une seule valeur : une somme, un objet, une chaîne… Le second argument est la valeur initiale de l’accumulateur.
const montants = [100, 250, 75];
// Somme
const total = montants.reduce((acc, m) => acc + m, 0); // 425
// Trouver le maximum
const max = montants.reduce((acc, m) => (m > acc ? m : acc), -Infinity); // 250
// Compter les occurrences
const votes = ["oui", "non", "oui", "oui"];
const decompte = votes.reduce((acc, v) => {
acc[v] = (acc[v] || 0) + 1;
return acc;
}, {});
// { oui: 3, non: 1 }
Ces trois méthodes se chaînent naturellement, ce qui rend le code très expressif :
const commandes = [
{ produit: "clavier", prix: 45 },
{ produit: "souris", prix: 20 },
{ produit: "écran", prix: 180 },
];
const totalCher = commandes
.filter(c => c.prix > 30)
.map(c => c.prix)
.reduce((acc, p) => acc + p, 0); // 225
Ce style repose entièrement sur les fonctions fléchées et les closures, qui rendent les callbacks concis.
Rechercher un élément
Selon que vous voulez l’élément, sa position ou un simple booléen, la méthode change.
const users = [
{ id: 1, nom: "Léa" },
{ id: 2, nom: "Tom" },
];
const tom = users.find(u => u.id === 2); // { id: 2, nom: "Tom" }
const index = users.findIndex(u => u.id === 2); // 1
const existe = users.some(u => u.nom === "Léa"); // true
const tousActifs = users.every(u => u.id > 0); // true
const dernier = users.findLast(u => u.id < 3); // { id: 2, nom: "Tom" }
Trier avec sort
sort modifie le tableau en place et trie par défaut… en ordre alphabétique, même sur des nombres. Fournissez toujours une fonction de comparaison pour les nombres.
const nombres = [10, 2, 30, 4];
nombres.sort(); // [10, 2, 30, 4] → tri texte, faux !
nombres.sort((a, b) => a - b); // [2, 4, 10, 30] croissant
nombres.sort((a, b) => b - a); // [30, 10, 4, 2] décroissant
// Trier des objets par une propriété
const users = [{ nom: "Tom", age: 30 }, { nom: "Léa", age: 25 }];
users.sort((a, b) => a.age - b.age); // Léa avant Tom
// Trier des chaînes en respectant les accents
const mots = ["été", "avion", "élan"];
mots.sort((a, b) => a.localeCompare(b, "fr")); // ["avion", "élan", "été"]
Comme sort mute le tableau, utilisez toSorted (récent) pour obtenir une copie triée sans toucher à l’original.
const original = [3, 1, 2];
const trie = original.toSorted((a, b) => a - b); // original reste [3, 1, 2]
L’opérateur spread
Les trois points ... déploient un tableau. Ils permettent de copier, concaténer et convertir sans muter.
const a = [1, 2];
const b = [3, 4];
const fusion = [...a, ...b]; // [1, 2, 3, 4]
const copie = [...a]; // copie superficielle
const avecEn0 = [0, ...a]; // [0, 1, 2]
// Convertir un NodeList ou un Set en vrai tableau
const uniques = [...new Set([1, 1, 2, 3])]; // [1, 2, 3]
// Trouver le max d'un tableau
console.log(Math.max(...[5, 12, 3])); // 12
La destructuration
La destructuration extrait des valeurs dans des variables nommées, avec une syntaxe compacte.
const coords = [48.85, 2.35];
const [lat, lng] = coords; // lat = 48.85, lng = 2.35
// Ignorer des éléments et capturer le reste
const [premier, , troisieme] = ["a", "b", "c"]; // "a", "c"
const [tete, ...queue] = [1, 2, 3, 4]; // tete = 1, queue = [2, 3, 4]
// Valeur par défaut
const [x = 0, y = 0] = [10]; // x = 10, y = 0
// Échanger deux variables sans variable temporaire
let m = 1, n = 2;
[m, n] = [n, m]; // m = 2, n = 1
Autres méthodes utiles
Quelques méthodes qui reviennent souvent au quotidien.
const nombres = [1, 2, 3, 4];
nombres.reverse(); // inverse en place → [4, 3, 2, 1]
[1, [2, [3]]].flat(Infinity); // [1, 2, 3] aplatit
["a", "b"].join(" - "); // "a - b"
"a,b,c".split(","); // ["a", "b", "c"] (méthode de String)
[1, 2, 3].fill(0); // [0, 0, 0]
Array.isArray([1, 2]); // true
// flatMap : map + flat en une passe
[1, 2].flatMap(n => [n, n * 10]); // [1, 10, 2, 20]
À retenir
Les tableaux se divisent en deux familles : celles qui mutent (push, pop, splice, sort, reverse, fill) et celles qui renvoient un nouveau tableau (map, filter, slice, concat, toSorted). En code moderne, privilégiez les secondes : un code qui ne modifie pas ses données en place est plus prévisible et plus facile à déboguer. Maîtrisez d’abord map, filter et reduce : à eux trois, ils couvrent l’immense majorité de vos besoins de transformation.