Supprimer un objet d'un tableau en JavaScript

1. Utilisez la méthode splice() pour supprimer un objet d’un tableau en JavaScript
2. Utilisation de la méthode slice() pour supprimer un objet d’un tableau en JavaScript
3. Utilisez la méthode filter() pour supprimer un objet d’un tableau

Dans cet article, nous allons apprendre à supprimer un objet d’un tableau JavaScript. L’article présentera et implémentera des méthodes telles que splice(), slice() et filter().

Utilisez la méthode splice() pour supprimer un objet d’un tableau en JavaScript

La méthode splice() pourrait être la meilleure méthode que nous puissions utiliser pour supprimer l’objet d’un tableau. Il modifie le contenu d’un tableau en supprimant ou en remplaçant des éléments existants ou en ajoutant de nouveaux éléments en place. La syntaxe de la méthode splice() est indiquée ci-dessous.

Array.splice(index, count, items1, ..., itemX)

L’option index fait référence à un entier qui spécifie à quelle position ajouter/supprimer des éléments. Nous pouvons également utiliser des valeurs négatives pour spécifier la position à partir de la fin du tableau. L’option count est facultative et indique le nombre d’éléments à supprimer. L’option items1, ..., itemX est également facultative et peut être utilisée pour ajouter de nouveaux éléments au tableau.

Dans un premier temps, nous déclarons une variable de tableau nommée myArray, qui contient trois objets dans le tableau. Ensuite, dans la deuxième ligne, nous utilisons la méthode splice() pour le tableau. Nous indiquons également 0 et 1 comme arguments. Ensuite, nous enregistrons le tableau dans la console.

Initialement, le tableau contient trois objets. La valeur 0 dans la méthode splice() indique le premier indice du tableau, c’est-à-dire le premier objet. Cela signifie que nous allons commencer à supprimer du premier index. La valeur suivante, 1 dans la méthode, spécifie que la méthode supprimera un élément du point de départ. Ainsi, l’exemple ci-dessous supprimera le premier objet du tableau.

Notons que la méthode splice() modifie le tableau ; ainsi, nous pouvons utiliser la méthode slice() pour supprimer l’objet souhaité du tableau sans modifier le tableau d’origine.

Exemple de code :

var myArray =
    [{id: 1, name: 'John'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
myArray.splice(0, 1)
console.log(myArray)

Production:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

Utilisation de la méthode slice() pour supprimer un objet d’un tableau en JavaScript

La méthode slice() renvoie la copie modifiée de la portion du tableau sélectionnée du début à la fin, mais l’indice de fin passé à la méthode ne sera pas inclus. La syntaxe de la méthode slice() est ci-dessous.

Array.slice(startIndex, endIndex)

Ici, startIndex est l’index de base zéro à partir duquel nous commençons l’extraction. Un indice négatif peut être utilisé, ce qui indique un décalage par rapport à la fin de la séquence. Par exemple, slice(-3) extrait les trois derniers éléments de la séquence. Si startIndex n’est pas défini, la fonction slice() démarre à l’index 0, alors que si startIndex est supérieur à la plage d’index du tableau, un tableau vide est renvoyé.

L’option endIndex est également un index de base zéro avant lequel terminer l’extraction. La méthode slice() extrait jusqu’au endIndex mais inclut le endIndex lui-même. Si l’option endIndex est exclue, la fonction slice() extrait jusqu’à la fin de la séquence, c’est-à-dire jusqu’au array.length. Si endIndex est supérieur à la longueur de la séquence, la fonction slice() extrait également jusqu’à la fin de la séquence.

La méthode slice(1,3) dans l’exemple ci-dessous extraira les éléments du deuxième index vers le quatrième index. Comme il n’y a pas de quatrième index dans le tableau, il extraira les éléments jusqu’à la fin de la séquence.

Exemple de code :

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.slice(1, 3);
console.log(newArray)

Production:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]

Utilisez la méthode filter() pour supprimer un objet d’un tableau

La méthode filter() crée un nouveau tableau avec les éléments qui passent le test fourni par la fonction. Cela signifie qu’il renverra un nouveau tableau d’objets. Si aucun élément ne réussit le test, la fonction renverra un tableau vide. Nous utiliserons la fonction flèche pour démontrer la méthode filter().

La méthode filter() utilise une terminologie appelée fonction de rappel, qui va comme

var newArray = myArray.filter(
    (element, index, array) => {
        ...Items passing this condition will be added to the new array...})

La méthode accepte trois arguments. L’option element est l’élément en cours de traitement dans le tableau. L’index est facultatif et indique l’index de l’élément courant en cours de traitement dans le tableau. Enfin, l’option array est le filtre de tableau appelé et optionnel.

Tout d’abord, créez un tableau avec des objets comme indiqué dans les méthodes ci-dessus. Appelez ensuite la fonction filter() avec la variable tableau. Spécifiez item comme argument de la fonction flèche et retournez les éléments du tableau avec l’expression item.id ! == 1. Stockez le nouveau tableau dans la variable newArray et enregistrez-le dans la console.

L’exemple ci-dessous ne renvoie que l’élément du tableau dont id n’est pas égal à la valeur 1. Ainsi, il renvoie le deuxième et le troisième élément du tableau.

Exemple de code :

var myArray =
    [{id: 1, name: 'Morty'}, {id: 2, name: 'Rick'}, {id: 3, name: 'Anna'}];
var newArray = myArray.filter((item) => item.id !== 1);
console.log(newArray);

Production:

[{id:2, name:'Rick'},{id:3, name:'Anna'}]