JavaScript : Comment puis-je supprimer un élément spécifique d'un tableau ?

Si vous souhaitez supprimer un élément d'un tableau, vous pouvez utiliser la méthode pop() pour supprimer le dernier élément ou la méthode shift() pour supprimer le premier élément.

Cependant, si l'élément que vous souhaitez supprimer n'est pas le premier ou le dernier élément, ces méthodes ne sont pas les outils qu'il vous faut.

Il existe quelques méthodes que vous pouvez utiliser pour supprimer des éléments spécifiques d'un tableau en JavaScript. Si les méthodes pop() ou shift() ne fonctionnent pas pour vos besoins, vous pouvez sélectionner une méthode selon que vous identifierez l'élément par sa valeur ou son index.

Suppression du dernier élément d'un tableau

La méthode pop() supprime et renvoie le dernier élément d'un tableau.

const monTableau = [1, 2, 3, 4, 5];

const x = monTableau.pop();

console.log(`monTableau : ${monTableau}`);
console.log(`variable x value: ${x}`);

Sortie  :

monTableau : 1,2,3,4
variable x value: 5

Suppression du premier élément d'un tableau

La méthode shift() supprime et renvoie le premier élément d'un tableau.

const monTableau = [1, 2, 3, 4, 5];

const x = monTableau.shift();

console.log(`monTableau values: ${monTableau}`);
console.log(`variable x value: ${x}`);

sortie :

monTableau values = 2,3,4,5
variable x value: 1

Suppression d'un élément par index

Si vous identifiez l'élément à supprimer par son index, vous pouvez utiliser l'opérateur delete. Si vous souhaitez utiliser la valeur de l'élément que vous supprimez, utilisez la méthode splice().

L'opérateur delete

L'opérateur delete supprime la propriété de l'objet à l'index spécifié, mais ne met pas à jour la longueur du tableau, et la valeur à cet index du tableau sera undefined.

const monTableau = [1, 2, 3, 4, 5];

delete monTableau[1];

console.log(`monTableau values: ${monTableau}`);

sortie:

monTableau values: 1,,3,4,5

La méthode splice()

La méthode splice() prend deux arguments, l'index de l'élément que vous souhaitez supprimer et l'index final que vous souhaitez supprimer.

La méthode splice() crée un nouveau tableau qui stocke toutes les valeurs qui ont été supprimées du tableau d'origine. Le tableau d'origine ne contiendra plus les valeurs supprimées et sa longueur sera mise à jour.

const monTableau = [1, 2, 3, 4, 5];

const x = monTableau.splice(1, 1);

console.log(`monTableau values: ${monTableau}`);
console.log(`variable x value: ${x}`);

Sortie :

monTableau values: 1,3,4,5
variable x value: 2

Suppression d'un élément par valeur

Si vous identifiez l'élément à supprimer par sa valeur, vous pouvez supprimer l'élément de son index après avoir identifié l'index avec la méthode indexOf(). Si vous souhaitez utiliser la valeur de l'élément que vous supprimez, utilisez la méthode filter() ou une combinaison des méthodes indexOf() et splice().

Combinaison Méthodes indexOf() et splice()

Passez la valeur de l'élément que vous souhaitez supprimer de votre tableau dans la méthode indexOf() pour renvoyer l'index de l'élément qui correspond à cette valeur dans le tableau. Utilisez ensuite la méthode splice() pour supprimer l'élément à l'index renvoyé.

const monTableau = [1, 2, 3, 4, 5];

const index = monTableau.indexOf(2);

const x = monTableau.splice(index, 1);

console.log(`monTableau values: ${monTableau}`);
console.log(`variable x value: ${x}`);

Sortie :

monTableau values: 1,3,4,5
variable x value: 2

La méthode indexOf() renvoie le premier index où la valeur correspond au paramètre qui lui est passé, et -1 si aucune valeur ne correspond.

La méthode filter()

La méthode array filter() prend une fonction comme argument obligatoire. La fonction nécessite un paramètre currentValue, qui représente l'élément du tableau sur lequel la méthode filter() se trouve actuellement lors de la boucle dans le tableau.

La fonction doit effectuer une vérification qui renvoie true si currentValue est la valeur de l'élément que vous souhaitez supprimer, et false sinon.

La méthode filter() renvoie ensuite un tableau qui contient les valeurs du tableau qui correspondent au currentValue.

Les valeurs renvoyées par la méthode filter() ne sont pas supprimées du tableau d'origine, mais cette fonctionnalité peut être ajoutée à la fonction que vous transmettez à filter().

const monTableau = [1, 2, 3, 4, 5];

function removeValue(value, index, arr) {
    // si la valeur à l'index actuelle vaut la valeur qu'on cherche (2)
    if (value === 2) {
    // supprime la valeur dans le tableau
        arr.splice(index, 1);
        return true;
    }
    return false;
}

// Passer la fonction removeValue dans filter() pour retourner la valeur supprimée 
const x = monTableau.filter(removeValue);

console.log(`monTableau values: ${monTableau}`);
console.log(`variable x value: ${x}`);

Sortie :

monTableau values: 1,3,4,5
variable x value: 2