Comment ajouter un élément à un tableau en JavaScript : 5 méthodes avec exemples

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Comment ajouter un élément à un tableau en JavaScript ? Analyse complète avec exemples

\n\n

Vous écrivez du code en JavaScript, et soudain une question se pose : « Comment ajouter un nouvel élément à la fin d’un tableau ? Et au début ? Et au milieu ? ». Si vous avez déjà cherché sur Google « How to append something to an array? » — vous n’êtes pas seul. Cette question sur Stack Overflow a rassemblé des milliers de vues, et aujourd’hui nous allons l’analyser une fois pour toutes.

\n\n

Les tableaux sont la base du travail avec les données en JS. Savoir ajouter rapidement et correctement des éléments vous fera gagner des heures de débogage et rendra votre code plus propre. Dans ce tutoriel, je vais vous montrer 5 façons d’ajouter un élément à un tableau, du classique push() au moderne opérateur spread. C’est parti !

\n\n

1. Méthode push() : ajouter à la fin du tableau

\n\n

La méthode la plus populaire. push() ajoute un ou plusieurs éléments à la fin du tableau et retourne la nouvelle longueur.

\n\n

const fruits = ['pomme', 'banane'];\nconst newLength = fruits.push('orange');\n\nconsole.log(fruits);    // ['pomme', 'banane', 'orange']\nconsole.log(newLength); // 3\n

\n\n

On peut ajouter plusieurs éléments à la fois :

\n\n

fruits.push('poire', 'raisin');\nconsole.log(fruits);\n// ['pomme', 'banane', 'orange', 'poire', 'raisin']\n

\n\n

Quand l’utiliser : lorsque vous devez ajouter des données à la fin d’une liste — par exemple, un nouveau produit dans un panier, un message dans un chat, une entrée dans un journal. La méthode est rapide (O(1)) et modifie le tableau d’origine.

\n\n

2. Méthode unshift() : ajouter au début du tableau

\n\n

Si vous devez insérer un élément au début, utilisez unshift(). Il décale tous les éléments existants vers la droite.

\n\n

const numbers = [2, 3, 4];\nnumbers.unshift(1);\n\nconsole.log(numbers); // [1, 2, 3, 4]\n

\n\n

Fonctionne aussi avec plusieurs éléments :

\n\n

numbers.unshift(-1, 0);\nconsole.log(numbers); // [-1, 0, 1, 2, 3, 4]\n

\n\n

Important : unshift() est plus lent que push() pour les grands tableaux, car il faut décaler tous les éléments. Si le tableau contient 100 000 éléments — mieux vaut envisager une autre structure de données (par exemple, une file avec deque).

\n\n

3. Méthode splice() : insérer à n’importe quelle position

\n\n

Le couteau suisse. splice() peut supprimer, remplacer et, bien sûr, ajouter des éléments à n’importe quelle position du tableau.

\n\n

Syntaxe : array.splice(start, deleteCount, item1, item2, ...)

\n\n

start — l’index à partir duquel on commence
deleteCount — combien d’éléments on supprime (on met 0 si on ajoute seulement)
item1, item2, ... — les éléments à insérer

\n\n

Exemple : insérer « cerise » à la deuxième position (index 1) :

\n\n

const colors = ['rouge', 'bleu', 'vert'];\ncolors.splice(1, 0, 'cerise');\n\nconsole.log(colors);\n// ['rouge', 'cerise', 'bleu', 'vert']\n

\n\n

On peut insérer plusieurs éléments à la fois :

\n\n

const letters = ['a', 'd'];\nletters.splice(1, 0, 'b', 'c');\n\nconsole.log(letters); // ['a', 'b', 'c', 'd']\n

\n\n

Quand l’utiliser : lorsque vous devez insérer un élément strictement au milieu du tableau — par exemple, ajouter un nouvel élément de menu entre des éléments existants. Rappelez-vous : splice() modifie le tableau.

\n\n

4. Méthode concat() : créer un nouveau tableau

\n\n

Contrairement aux méthodes précédentes, concat() ne modifie pas le tableau d’origine, mais retourne un nouveau tableau en combinant deux ou plusieurs tableaux (ou éléments).

\n\n

const arr1 = [1, 2, 3];\nconst arr2 = [4, 5];\nconst result = arr1.concat(arr2);\n\nconsole.log(result); // [1, 2, 3, 4, 5]\nconsole.log(arr1);   // [1, 2, 3] — inchangé\n

\n\n

On peut ajouter non seulement des tableaux, mais aussi des valeurs individuelles :

\n\n