Comment supprimer un élément spécifique d'un tableau en JavaScript : les 5 meilleures méthodes

Comment supprimer un élément spécifique d'un tableau en JavaScript : guide détaillé avec exemples

Bonjour, collègue développeur ! Si tu as déjà écrit en JavaScript, tu as sûrement rencontré une situation où il faut supprimer un élément spécifique d'un tableau. Cela semble être une tâche simple, mais les débutants (et même les programmeurs expérimentés) sont souvent perdus : splice ? filter ? Ou peut-être delete ? Ou encore écrire sa propre solution sur mesure ?

La question "How can I remove a specific item from an array in JavaScript?" est l'une des plus populaires sur Stack Overflow avec des millions de vues. Et ce n'est pas un hasard : les tableaux sont la base du travail avec les données en JS, et savoir les nettoyer correctement est une compétence indispensable.

Dans cet article, nous allons examiner 5 méthodes éprouvées pour supprimer un élément d'un tableau en JavaScript. Tu découvriras quelle méthode est la plus rapide, laquelle est la plus propre à lire, et dans quelles situations chacune est la mieux adaptée. C'est parti !

1. La méthode splice() — un grand classique

Commençons par la méthode la plus populaire — splice(). Cette méthode modifie le tableau d'origine en supprimant, remplaçant ou ajoutant des éléments. Pour supprimer un seul élément, la syntaxe est la suivante :

array.splice(index, 1);

Le premier paramètre est l'index de l'élément à supprimer, le second est le nombre d'éléments à supprimer (1 signifie que nous supprimons un seul élément).

Exemple :

let fruits = ['pomme', 'banane', 'poire', 'orange'];\n\n// Supprimer 'banane' (index 1)\nfruits.splice(1, 1);\n\nconsole.log(fruits); // ['pomme', 'poire', 'orange']

Important : splice() modifie le tableau d'origine. Si tu as besoin d'une copie, fais d'abord let copy = [...array].

Quand l'utiliser : quand tu connais exactement l'index de l'élément. Idéal pour la suppression par position.

2. Combinaison indexOf() + splice() — suppression par valeur

Et si nous ne connaissons pas l'index, mais connaissons la valeur elle-même ? Ici, indexOf() nous vient en aide — il trouve le premier index de l'élément avec la valeur donnée (ou retourne -1 si l'élément n'existe pas).

let numbers = [10, 20, 30, 40, 50];\nlet itemToRemove = 30;\n\nlet index = numbers.indexOf(itemToRemove);\nif (index !== -1) {\n    numbers.splice(index, 1);\n}\n\nconsole.log(numbers); // [10, 20, 40, 50]

Important : cette méthode supprime uniquement la première occurrence. Si le tableau contient plusieurs éléments identiques, les autres resteront.

Quand l'utiliser : quand tu dois supprimer un élément spécifique d'un tableau par sa valeur, et que tu es sûr que l'élément apparaît une seule fois.

3. La méthode filter() — pour ceux qui aiment la propreté

La méthode filter() est ma préférée. Elle ne modifie pas le tableau d'origine, mais crée un nouveau tableau contenant uniquement les éléments qui réussissent le test. Cela rend le code plus prévisible et plus sûr.

let numbers = [10, 20, 30, 40, 50];\nlet itemToRemove = 30;\n\nlet filteredNumbers = numbers.filter(num => num !== itemToRemove);\n\nconsole.log(filteredNumbers); // [10, 20, 40, 50]\nconsole.log(numbers); // [10, 20, 30, 40, 50] (l'original n'a pas changé)

Avantage : supprime toutes les occurrences de la valeur. Si le tableau contient deux fois le nombre 30, les deux disparaîtront.

Inconvénient : crée un nouveau tableau, ce qui peut être moins efficace pour de très grands tableaux (mais pour 99% des tâches, ce n'est pas critique).

Quand l'utiliser : quand tu as besoin d'immuabilité (ne pas modifier les données d'origine) ou de supprimer tous les doublons.

4. L'opérateur delete — dangereux mais rapide

L'opérateur delete supprime une propriété d'un objet. Comme un tableau est aussi un objet, on peut l'appliquer à un tableau. Mais attention : il laisse un « trou » (un élément vide).

let fruits = ['pomme', 'banane', 'poire'];