Comment supprimer une valeur spécifique d'un tableau en JavaScript ?

Lucas D. - July 19, 2024

Problème : Supprimer une valeur spécifique d'un tableau

Les tableaux JavaScript nécessitent souvent des modifications, notamment la suppression de valeurs spécifiques. Cette tâche peut être nécessaire lors de la mise à jour de données, du filtrage d'éléments indésirables ou du nettoyage des entrées utilisateur. Savoir comment supprimer une valeur spécifique d'un tableau est une compétence utile pour les développeurs JavaScript.

Utilisation des méthodes indexOf et splice

Trouver l'index de l'élément

Pour supprimer une valeur d'un tableau en JavaScript, utilisez la méthode indexOf pour trouver la position de l'élément. Cette méthode renvoie l'index de la première occurrence de la valeur dans le tableau. Si l'élément n'est pas trouvé, elle renvoie -1.

Pour vérifier si l'élément existe dans le tableau, comparez le résultat de indexOf à -1. Si l'index est supérieur à -1, l'élément est dans le tableau.

Supprimer l'élément avec splice

Après avoir trouvé l'index, utilisez la méthode splice pour supprimer l'élément. La méthode splice modifie le tableau en supprimant ou remplaçant des éléments et/ou en ajoutant de nouveaux éléments.

La méthode splice prend deux paramètres principaux :

L'index à partir duquel commencer à modifier le tableau
Le nombre d'éléments à supprimer

Pour supprimer un seul élément, définissez le deuxième paramètre à 1. Cela indique à splice de supprimer un élément à partir de l'index spécifié.

Voici comment vous pouvez utiliser ces méthodes pour supprimer une valeur d'un tableau :

const array = [2, 5, 9];
const valueToRemove = 5;

const index = array.indexOf(valueToRemove);
if (index > -1) {
  array.splice(index, 1);
}

Ce code trouve l'index de la valeur 5 dans le tableau et la supprime si elle existe. Le tableau résultant sera [2, 9].

Exemple: Supprimer plusieurs occurrences

Pour supprimer toutes les occurrences d'une valeur d'un tableau, utilisez une boucle while avec indexOf et splice :

const array = [2, 5, 2, 9, 2];
const valueToRemove = 2;

let index = array.indexOf(valueToRemove);
while (index > -1) {
  array.splice(index, 1);
  index = array.indexOf(valueToRemove);
}

Ce code supprime toutes les instances de la valeur 2 du tableau, résultant en [5, 9].

Exemple de code : Supprimer un élément unique

Voici un exemple de comment supprimer un seul élément d'un tableau :

// Créer un tableau
const fruits = ['pomme', 'banane', 'cerise', 'datte'];

console.log('Tableau original :', fruits);

// Définir l'élément à supprimer
const fruitASupprimer = 'banane';

// Trouver l'index de l'élément
const index = fruits.indexOf(fruitASupprimer);

// Vérifier si l'élément existe et le supprimer
if (index > -1) {
  fruits.splice(index, 1);
}

console.log('Tableau après suppression :', fruits);

Dans cet exemple, nous avons un tableau de fruits. Nous voulons supprimer 'banane' du tableau. Voici ce que fait le code :

Utiliser indexOf pour trouver la position de 'banane' dans le tableau.
Vérifier si l'index est valide (supérieur à -1).
Si l'élément est trouvé, utiliser splice pour le supprimer du tableau.

Lorsque vous exécutez ce code, vous verrez cette sortie :

Tableau original : ['pomme', 'banane', 'cerise', 'datte']
Tableau après suppression : ['pomme', 'cerise', 'datte']

Cela montre que 'banane' a été supprimé du tableau, tandis que les autres éléments restent. La méthode splice modifie le tableau original, donc vous n'avez pas besoin d'attribuer le résultat à une nouvelle variable.

Exemple: Utiliser filter() pour supprimer un élément

Vous pouvez aussi utiliser la méthode filter() pour supprimer un élément d'un tableau. Cette approche crée un nouveau tableau sans modifier l'original :

const fruits = ['pomme', 'banane', 'cerise', 'datte'];
const fruitASupprimer = 'banane';

const nouveauxFruits = fruits.filter(fruit => fruit !== fruitASupprimer);

console.log('Tableau original :', fruits);
console.log('Nouveau tableau après suppression :', nouveauxFruits);

Cette méthode est utile lorsque vous voulez conserver le tableau original intact.

Solutions alternatives

Fonction pour supprimer une seule occurrence

Vous pouvez créer une fonction pour supprimer une seule occurrence d'une valeur d'un tableau. Voici un exemple :

function removeSingleOccurrence(arr, value) {
  const index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

Cette fonction prend deux paramètres :

arr : Le tableau à modifier
value : La valeur à supprimer

La fonction utilise indexOf pour trouver la première occurrence de la valeur. Si elle est trouvée, elle utilise splice pour supprimer cet élément. La fonction renvoie ensuite le tableau modifié.

Vous pouvez utiliser cette fonction comme ceci :

const numbers = [1, 2, 3, 2, 4, 5];
console.log(removeSingleOccurrence(numbers, 2));
// Résultat : [1, 3, 2, 4, 5]

Exemple: Utilisation de filter() pour l'immutabilité

Si vous préférez ne pas modifier le tableau d'origine, vous pouvez utiliser la méthode filter() pour créer un nouveau tableau sans la première occurrence de la valeur :

function removeSingleOccurrence(arr, value) {
  let removed = false;
  return arr.filter(item => {
    if (item === value && !removed) {
      removed = true;
      return false;
    }
    return true;
  });
}

Cette approche crée un nouveau tableau, laissant l'original inchangé.

Fonction pour supprimer toutes les occurrences

Pour supprimer toutes les occurrences d'une valeur d'un tableau, vous pouvez créer une fonction qui utilise une boucle :

function removeAllOccurrences(arr, value) {
  let i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      i++;
    }
  }
  return arr;
}

Cette fonction fonctionne comme suit :

Elle démarre une boucle qui continue tant que i est inférieur à la longueur du tableau.
Si l'élément actuel correspond à la valeur à supprimer, elle utilise splice pour le supprimer.
Si l'élément ne correspond pas, elle passe à l'élément suivant en augmentant i.
La boucle continue jusqu'à ce qu'elle atteigne la fin du tableau.

Vous pouvez utiliser cette fonction comme ceci :

const numbers = [1, 2, 3, 2, 4, 2, 5];
console.log(removeAllOccurrences(numbers, 2));
// Résultat : [1, 3, 4, 5]

Ces fonctions offrent un moyen de supprimer des éléments des tableaux sans modifier les méthodes originales du tableau. Elles peuvent être utiles lorsque vous devez effectuer ces opérations plusieurs fois dans votre code.