Supprimer le premier élément d'un tableau en JavaScript

1. Supprimer le premier élément d’un tableau en modifiant le tableau d’origine en JavaScript
2. Supprimer le premier élément du tableau en gardant le tableau d’origine inchangé dans JavaScript

Le langage de programmation JavaScript contient de nombreuses méthodes de pré-construction qui peuvent nous aider à accélérer le processus de développement. Pour toute tâche à laquelle vous pouvez penser, il y aura toujours une méthode prédéfinie disponible en JavaScript pour effectuer cette tâche particulière. Par exemple, découper une chaîne, insérer et supprimer les éléments du tableau, convertir un type de données en un autre ou générer des nombres aléatoires, et bien d’autres.

De même, tout en traitant des tableaux, plusieurs méthodes pratiques nous aident à travailler et à manipuler les structures de données des tableaux en JavaScript. Dans cet article, nous allons voir trois méthodes à l’aide desquelles nous pouvons supprimer le premier élément du tableau.

Il existe deux types de méthodes disponibles en JavaScript. Un type de méthode modifiera le tableau d’origine et le second type de méthode conservera le tableau d’origine inchangé. Si vous n’avez aucun problème si le tableau d’origine est altéré, utilisez les méthodes splice() et shift. Mais si vous ne voulez pas changer le tableau d’origine, utilisez les méthodes filter() et slice.

Supprimer le premier élément d’un tableau en modifiant le tableau d’origine en JavaScript

1. Méthode splice() :

La méthode splice() est utilisée pour supprimer ou remplacer des éléments existants du tableau. Cette méthode change ou modifie le tableau d’origine. La méthode splice() renvoie également les éléments qui ont été supprimés du tableau. Si vous souhaitez obtenir les éléments supprimés, vous pouvez également stocker cet élément renvoyé dans une variable pour une utilisation ultérieure.

Syntaxe:

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

Le paramètre start nous indique à partir de quel élément commencer à manipuler le tableau. Le start peut prendre des valeurs positives ou négatives. Si vous utilisez les valeurs positives (1, 2, 3…, n) alors il commencera à changer le tableau de gauche à droite, et si vous utilisez les valeurs négatives (-1, -2, -3, .. ., -n) puis il commencera à changer le tableau de droite à gauche.

Ensuite, nous avons également les paramètres deleteCount et item1, item2, ..., qui sont tous deux facultatifs. Si vous souhaitez supprimer certains éléments du tableau, vous pouvez passer le nombre total d’éléments que vous souhaitez supprimer en tant que valeur au paramètre deleteCount. Si passé 0, aucun élément ne sera supprimé du tableau. Dans item1, item2, ... vous pouvez passer les éléments que vous souhaitez ajouter au tableau. Pour plus d’informations, lisez la documentation de la méthode splice().

Ci-dessous, nous avons un tableau de nombres stockés à l’intérieur de la variable array qui se compose de 5 éléments. Dans notre cas, nous devons supprimer le premier élément du tableau. Ici, nous devons spécifier l’index de départ et le nombre d’éléments que nous voulons supprimer. Puisque nous voulons supprimer le premier élément, notre index de départ serait donc 0 et l’élément total que nous devons supprimer est 1. Ainsi, nous passerons les valeurs (0, 1) en paramètre à la méthode splice().

let array = [1, 2, 3, 4, 5] let firstElement = array.splice(0, 1);
console.log(array, firstElement);

Nous stockons également l’élément supprimé du tableau dans une variable appelée firstElement. Après avoir supprimé le premier élément du tableau, nous imprimons le tableau array et la valeur stockée dans la variable firstElement.

Vous pouvez exécuter le code ci-dessus en le collant dans la console du navigateur, puis vous obtiendrez le résultat suivant.

Production:

Array(4)[2, 3, 4, 5]
Array[1]

Comme vous pouvez le voir sur la sortie, le premier élément, dans ce cas, 1 est supprimé avec succès du tableau d’origine.

2. méthode shift() :

Une autre façon de supprimer le premier élément du tableau est d’utiliser la méthode shift(). Avec la méthode splice(), vous pouvez ajouter ou supprimer n’importe quel élément à n’importe quel index du tableau, mais la méthode shift() est spécifiquement utilisée pour supprimer l’élément à l’index 0 uniquement. Il supprime le premier élément (élément présent à l’index 0) et déplace les éléments restants du tableau vers la gauche.

Cette méthode renvoie également l’élément qui a été supprimé du tableau. Ici, nous avons également créé une variable firstElement qui stockera le premier élément supprimé du tableau.

let array = [1, 2, 3, 4, 5];
let firstElement = array.shift();
console.log(array, firstElement);

Enfin, nous imprimerons les variables array et firstElement.

Production:

Array(4) [ 2, 3, 4, 5 ]
1

Supprimer le premier élément du tableau en gardant le tableau d’origine inchangé dans JavaScript

1. Méthode filter() :

Nous avons vu les méthodes qui changent ou modifient le tableau d’origine ; Voyons maintenant quelques méthodes qui conservent le tableau d’origine tel qu’il est et stockent les résultats de l’opération dans un nouveau tableau. L’une de ces méthodes est la méthode filter().

La méthode filter() fonctionne en fonction de la condition. Et selon que la condition est vraie ou fausse, il décide d’ajouter ou non les éléments dans un nouveau tableau.

let array_1 = [1, 2, 3, 4, 5];
let array_2 = array_1.filter((element, index) => index > 0);
console.log(array_1, array_2);

La méthode filter() prend une fonction de rappel (fonction flèche) comme argument. Cette fonction de rappel est appelée sur chaque élément du tableau. Cette fonction va nous donner element du tableau et son index.

Puisque nous voulons supprimer le premier élément, nous allons ajouter une condition que l’index de l’élément soit supérieur à zéro ou non (index > 0). Si cela est vrai, alors seule la fonction filter() insérera l’élément dans le nouveau tableau et pas autrement. Tous les autres éléments seront insérés dans le nouveau tableau à l’exception de l’élément à l’index 0 (c’est-à-dire le premier élément).

Production:

Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]

2. Méthode slice() :

La méthode suivante qui conserve le tableau d’origine est la méthode slice(). La méthode slice() coupe le tableau à deux endroits. Pour cela, nous devons spécifier l’index de début et de fin. Le start représente le premier index à partir duquel nous voulons commencer à découper le tableau, et le découpage s’arrêtera un élément avant le end.

Tous les éléments présents entre start et end (y compris la valeur de départ et l’arrêt d’un élément avant la fin) seront insérés dans le nouveau tableau. Ces deux paramètres sont facultatifs. Pour plus d’informations, lisez la documentation de la méthode slice().

let array_1 = [1, 2, 3, 4, 5];
let array_2 = array_1.slice(1);
console.log(array_1, array_2);

Nous passerons le paramètre start uniquement puisque nous voulons supprimer le premier élément du tableau. Ne pas spécifier la end signifie que tous les éléments du tableau à partir de la valeur start seront inclus. Dans notre cas, nous passerons slice(1). Cela copiera les éléments [2,3,4,5] du tableau d’origine, c’est-à-dire array_1 dans array_2. Au final, nous imprimerons les deux tableaux en utilisant la méthode console.log(). La sortie du code ci-dessus est comme indiqué ci-dessous.

Production:

Array(5) [ 1, 2, 3, 4, 5 ]
Array(4) [ 2, 3, 4, 5 ]