Méthodes d'array JavaScript
Apprenez les méthodes d'array JavaScript essentielles avec des exemples : push, pop, map, filter, reduce, slice, splice, find et les nouvelles méthodes immuables.
Introduction
Les arrays sont l'une des structures de données les plus utilisées en JavaScript, et la plupart de leur puissance vient de leurs méthodes intégrées — des fonctions que l'on appelle sur un array pour ajouter, supprimer, rechercher, transformer ou réordonner ses éléments. Ce guide couvre les méthodes que vous utilisez au quotidien, explique la distinction fondamentale entre les méthodes qui mutent le tableau original et celles qui retournent un nouvel array, et illustre chacune avec un exemple exécutable.
Si vous débutez avec les arrays eux-mêmes, commencez par le chapitre JavaScript Array, puis revenez ici.
Comprendre les arrays JavaScript
Un array stocke une liste ordonnée de valeurs dans une seule variable. Les valeurs peuvent être de n'importe quel type de données JavaScript — nombres, string, object, voire d'autres arrays — et vous n'avez pas à en définir la taille à l'avance.
Créer un array
La façon la plus simple de créer un array est d'utiliser la syntaxe littérale avec des crochets :
let fruits = ["Apple", "Banana", "Cherry"];Cela crée un array nommé fruits avec trois éléments de type string.
Accéder aux éléments d'un array
Les éléments sont accessibles par leur index, une position à base zéro comptant depuis le début du tableau :
La propriété length indique le nombre d'éléments, et at() accepte les index négatifs : at(-1) vous donne toujours le dernier élément.
Méthodes mutantes vs. non-mutantes
Avant d'examiner les méthodes individuellement, apprenez cette distinction — elle explique la plupart des bugs liés aux arrays :
- Les méthodes mutantes modifient le tableau en place.
push,pop,shift,unshift,splice,sort,reverseetfillmodifient toutes le tableau sur lequel elles sont appelées. - Les méthodes non-mutantes laissent l'original intact et retournent un nouvel array ou une valeur.
map,filter,slice,concat,reduce,findet les méthodes plus récentestoSorted/toSpliced/toReversedappartiennent à ce groupe.
Lorsque vous partagez un array entre des fonctions ou que vous le stockez dans un état (par exemple dans un composant React), préférez les méthodes non-mutantes afin de ne pas modifier accidentellement des données dont quelqu'un d'autre dépend.
Méthodes d'array principales
| Méthode | Mute ? | Description |
|---|---|---|
push() | Oui | Ajoute un ou plusieurs éléments à la fin ; retourne la nouvelle longueur. |
pop() | Oui | Supprime le dernier élément et le retourne. |
shift() | Oui | Supprime le premier élément et le retourne. |
unshift() | Oui | Ajoute des éléments au début ; retourne la nouvelle longueur. |
splice() | Oui | Supprime, remplace et/ou insère des éléments à n'importe quelle position. |
sort() | Oui | Trie les éléments (par ordre alphabétique par défaut). |
reverse() | Oui | Inverse l'ordre des éléments. |
fill() | Oui | Écrase une plage d'éléments avec une valeur statique. |
slice() | Non | Retourne une copie superficielle d'une portion du tableau. |
concat() | Non | Fusionne des arrays et retourne un nouvel array. |
map() | Non | Retourne un nouvel array avec les résultats d'une fonction appliquée à chaque élément. |
filter() | Non | Retourne un nouvel array des éléments qui passent un test. |
reduce() | Non | Réduit le tableau à une seule valeur. |
forEach() | Non | Exécute une fonction pour chaque élément (retourne undefined). |
find() | Non | Retourne le premier élément qui satisfait un test. |
findIndex() | Non | Retourne l'index du premier élément qui satisfait un test. |
indexOf() | Non | Retourne le premier index d'une valeur, ou -1. |
includes() | Non | Retourne true/false selon qu'une valeur existe ou non. |
some() | Non | true si au moins un élément passe un test. |
every() | Non | true si tous les éléments passent un test. |
toSorted() | Non | Retourne une copie triée (le tableau reste inchangé). |
toSpliced() | Non | Retourne une copie modifiée par splice (le tableau reste inchangé). |
Ajouter et supprimer des éléments
push()
push() ajoute un ou plusieurs éléments à la fin du tableau et retourne la nouvelle longueur.
unshift()
unshift() insère des éléments au début du tableau.
pop()
pop() supprime le dernier élément et le retourne. Combiné à push(), il permet à un array de se comporter comme une pile (dernier entré, premier sorti).
shift()
shift() supprime le premier élément et le retourne. Notez que shift et unshift sont plus lents que push/pop, car chaque élément restant doit être réindexé.
Rechercher des éléments
indexOf()
indexOf() retourne le premier index d'une valeur, ou -1 si la valeur n'est pas trouvée. Il utilise l'égalité stricte, donc il ne peut pas trouver des object par leur contenu.
includes()
includes() répond à une question simple oui/non : cette valeur est-elle dans le tableau ? C'est plus clair que indexOf(x) !== -1 et, contrairement à indexOf, il peut trouver NaN.
find() et findIndex()
Lorsque vous devez localiser un élément selon une condition plutôt qu'une valeur exacte, utilisez find() (retourne l'élément) ou findIndex() (retourne son index). Les deux s'arrêtent à la première correspondance.
some() et every()
some() retourne true si au moins un élément passe le test ; every() retourne true uniquement si tous le passent.
Itérer et transformer
Ces méthodes prennent une fonction de rappel et sont au cœur du JavaScript moderne et déclaratif. Elles s'associent naturellement aux patterns du chapitre JavaScript Loops.
forEach()
forEach() exécute une fonction une fois par élément. Elle retourne toujours undefined, donc utilisez-la pour les effets de bord (comme la journalisation), et non pour construire une nouvelle valeur.
map()
map() crée un nouvel array en transformant chaque élément. Le nouvel array a toujours la même longueur que l'original.
filter()
filter() crée un nouvel array contenant uniquement les éléments pour lesquels la fonction de rappel retourne une valeur truthy.
reduce()
reduce() réduit un array à une seule valeur en appliquant une fonction de manière répétée. La fonction de rappel reçoit un accumulateur et l'élément courant ; le second argument de reduce est la valeur de départ de l'accumulateur.
Vous pouvez enchaîner ces transformations : map d'abord, puis filter, puis reduce, chaque étape produisant l'entrée de la suivante.
Réordonner et découper
sort()
sort() trie en place. Par défaut, il compare les éléments comme des string, ce qui donne des résultats surprenants pour les nombres — 10 est trié avant 2 car "10" vient avant "2" alphabétiquement. Passez toujours une fonction de comparaison lorsque vous triez des nombres.
reverse()
reverse() inverse l'ordre des éléments en place.
slice()
slice(start, end) retourne une copie superficielle d'une portion du tableau. L'index end n'est pas inclus et l'original reste intact — ce qui fait de slice() un moyen pratique de copier un array.
splice()
splice(start, deleteCount, ...items) est l'éditeur universel en place : il peut supprimer, remplacer et insérer. Ici, il insère "Grape" à l'index 2 sans rien supprimer (deleteCount vaut 0).
concat()
concat() fusionne des arrays en un nouvel array sans modifier les originaux. La syntaxe de décomposition ([...a, ...b]) fait la même chose — voir Rest parameters and spread syntax.
fill()
fill(value, start, end) écrase une plage d'éléments avec une valeur statique, en place.
Méthodes immuables (par copie)
Introduites avec ES2023, ces méthodes font exactement ce que sort, splice et reverse font — mais elles retournent un nouvel array et laissent l'original intact. Elles sont idéales pour les états que vous ne devez pas muter.
toSorted()
toSpliced()
Conclusion
Maîtriser les méthodes d'array JavaScript est l'une des compétences les plus rentables du langage : map, filter et reduce remplacent la plupart des boucles manuelles, tandis que savoir quelles méthodes mutent par rapport à celles qui copient permet d'éviter toute une catégorie de bugs. Continuez à pratiquer avec les exemples exécutables ci-dessus, et explorez des sujets connexes comme les bases de JavaScript Array et la syntaxe de décomposition.