4 façons de supprimer un élément spécifique d’un tableau JavaScript

Les tableaux sont l’une des structures de données les plus courantes avec lesquelles vous interagirez en JavaScript. Lorsque vous supprimez un élément d’un tableau, plusieurs méthodes sont à votre disposition. Tout dépend de l’endroit où se trouve l’élément que vous souhaitez supprimer et de la manière dont vous souhaitez l’identifier.

Découvrez les différentes façons de supprimer un élément d’un tableau JavaScript, que ce soit au début, à la fin ou entre les deux.

1. Supprimer le premier élément d’un tableau

Pour supprimer le premier élément d’un tableau, utilisez la fonction intégrée JavaScript shift() . Elle fonctionne d’emblée. Elle fonctionne d’emblée en supprimant l’élément et en décalant les index de tous les éléments restants.

Une fois l’élément supprimé, la méthode shift le renvoie. Cela signifie que vous pouvez assigner l’élément supprimé à une autre variable et l’utiliser plus tard si vous le souhaitez.

Voici comment procéder :

 const demoArray = [1, 2, 3, 4, 5];
const firstElement = demoArray.shift();
console.log(demoArray); // logs [2, 3, 4, 5]
console.log(firstElement); // logs 1
 

2. Supprimer le dernier élément d’un tableau

JavaScript dispose d’une fonction intégrée pop() pour supprimer le dernier élément d’un tableau. Comme la méthode shift() méthode, pop() renvoie l’élément retiré du tableau.

 const demoArray = [1, 2, 3, 4, 5];
const lastElement = demoArray.pop();
console.log(demoArray); // logs [1, 2, 3, 4]
console.log(lastElement); // logs 5
 

Shift et pop sont deux des méthodes JavaScript les plus courantes pour les tableaux, mais elles n’ont qu’une portée limitée. Outre ces deux méthodes, il en existe d’autres qui vous permettent d’être plus précis sur les éléments que vous supprimez.

3. Utilisation de l’opérateur Delete

Vous pouvez également utiliser l’opérateur supprimer pour supprimer un élément de tableau donné à un index spécifique. Cependant, contrairement aux autres méthodes que nous avons examinées précédemment, il y a un problème.

L’opérateur supprimer supprime uniquement la valeur, laissant un tableau avec un espace vide à son index. Cependant, la longueur du tableau original reste la même, même si vous supprimez le dernier élément.

 const demoArray = [1, 2, 3, 4, 5];
delete demoArray[2];
console.log(demoArray[2]); // logs undefined
console.log(demoArray.length); // logs 5
console.log(demoArray); // logs [1, 2, empty, 4, 5]
 

4. Suppression d’un élément de tableau par valeur

Il est également possible de supprimer un élément spécifique d’un tableau par sa valeur. Il n’y a pas de méthode intégrée pour faire cela, mais vous pouvez combiner deux méthodes existantes pour le faire : indexOf() et splice().

Ces deux méthodes vous permettront de supprimer un élément spécifique d’un tableau sans avoir d’index. Commencez par trouver l’index de l’élément qui vous intéresse en utilisant indexOf():

 const demoArray = [1, 2, 3, 4, 5];
const targetElementIndex = demoArray.indexOf(4);
console.log(targetElementIndex); // logs 3
 

Maintenant que vous avez l’index de l’élément cible, vous pouvez utiliser la méthode splice() pour supprimer l’élément à cet index. Tout ce que vous avez à faire est de passer l’index de l’élément cible comme premier argument, suivi du nombre d’éléments que vous souhaitez supprimer.

Pour supprimer un seul élément, passez une valeur de 1 comme deuxième argument :

 demoArray.splice(targetElementIndex, 1);
 

Le splice() renvoie un tableau des éléments supprimés et modifie le tableau d’origine, tout comme la méthode shift() et pop().

Si certaines de ces méthodes vous sont inconnues, consultez notre feuille d’astuces JavaScript complète. Elle contient toutes les méthodes de tableau disponibles, non seulement pour la suppression, mais aussi pour d’autres opérations telles que l’ajout, le bouclage, l’inversion et le filtrage d’éléments.

Travailler avec les tableaux JavaScript comme un pro

Savoir travailler avec les tableaux en JavaScript est essentiel pour tous les développeurs web, car on les rencontre fréquemment.

Les concepts clés à maîtriser sont toutes les méthodes intégrées à votre disposition qui peuvent vous aider à faire presque n’importe quoi lorsque vous travaillez avec des tableaux.