Comment utiliser Splice en JavaScript : Comprendre la méthode Array

Splice est une méthode Javascript Array qui modifie le contenu d'un tableau en supprimant ou en remplaçant un élément existant ou en ajoutant un nouvel élément en place.

Dans ce guide, j'expliquerai comment utiliser la méthode d'épissure Javascript Array. Les développeurs de tous niveaux peuvent lire et comprendre cet article.

Comprendre la méthode Array (splice)

Si nous jetons un coup d'œil au site Web de MDN, nous nous rendrons compte que le constructeur de prototype de tableau Javascript, qui nous permet d'ajouter de nouvelles méthodes et propriétés à l'objet Array(), a beaucoup de méthodes et splice en fait partie.

Array.prototype.splice()

Si nous essayons cependant d'utiliser cette même méthode sur le prototype de chaîne, comme dans l'exemple ci-dessous ;

const strings = 'learn'

strings.splice()

Nous recevrons cependant une erreur de type indiquant :

Uncaught TypeError: strings.splice is not a function

Il est important de savoir que l'épissure et la tranche ne sont pas les mêmes. La méthode slice ne mute ni ne modifie vos données, mais la méthode splice le fait et c'est pourquoi la méthode splice ne peut pas être utilisée sur les chaînes : les chaînes sont immuables.

Comment utiliser la méthode Javascript array splice

L'utilisation de la méthode de tableau splice Javascript est facile, mais la syntaxe est parfois mal utilisée.

Vous pouvez utiliser la méthode d'épissage dans ces étapes

arr.splice(start, deleteCount, item1, ..., itemN)

La propriété splice() prend certains paramètres, ces paramètres sont utilisés pour déterminer le comportement de n'importe quel tableau auquel la méthode splice a été appelée.

Ils sont les suivants :

• Commencer
• deleteCount
• Articles

Commencer

C'est juste l'index auquel nous voulons que notre tableau commence le changement, aucun élément ne sera supprimé si l'index de l'élément est supérieur à la longueur du tableau. Mais il ajoute un argument à la fin du tableau si l'index est inférieur à la longueur du tableau.

deleteCount

Il s'agit d'un paramètre facultatif qui indique le nombre d'éléments à supprimer du tableau. Pour supprimer ou supprimer un élément, le paramètre start doit être présent.

Si vous n'incluez pas ce paramètre, ou s'il a une valeur égale à la longueur du tableau ou même supérieure à la longueur du tableau, tous les éléments du paramètre start au dernier élément du tableau seront supprimés. Notez que ce paramètre doit être inclus si un paramètre d'élément est présent.

Articles

C'est aussi un paramètre facultatif qui vous indique l'élément à ajouter au tableau

Si nous n'indiquons pas les éléments, la méthode splice() du tableau Javascript supprimera les éléments du tableau. Cela renverrait un tableau vide.

Cas d'utilisation

Maintenant que nous avons compris quels sont les paramètres, essayons de voir des cas d'utilisation et des exemples de la façon dont cela peut être implémenté lors de l'écriture de notre programme.

Suppression de zéro élément avant un index spécifié

Si nous voulons ajouter un élément sans supprimer aucun élément, nous spécifions simplement l'index, et cela ne supprimerait rien mais commencerait avant l'index spécifié.

Regardons l'exemple ci-dessous :

const myMusic = ['piano', 'guitar', 'violin', 'orchestra'];

const removedElement = myMusic.splice(2, 0, 'drum');

// myMusic is [piano', 'guitar', 'drum', 'guitar', 'violin', 'orchestra']

// removedElement is empty [ ], no elements deleted

Dans le code précédent, nous essayons de supprimer un élément sur l'index 3 (mandarin), ce qui signifie que dès qu'il atteint l'index 3, tous les éléments qu'il trouve seraient supprimés sans le remplacer par un élément.

Nous pouvons également supprimer un élément et ajouter d'autres éléments.

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(3, 1, 'sax');

// myMusic is ['piano', 'guitar', 'drum', 'sax', 'orchestra']

// removedElement is ['violin']

De même, dès que nous sommes arrivés à l'index 3, tout ce qu'il trouve, dans ce cas, 'orchestra', serait supprimé et ajouté de nouveaux ('sax'), Le code ci-dessus montre comment 'drum' a été ajouté au tableau . À partir de l'index 2, le zéro lui dit de ne rien supprimer, si nous avions 1 là-bas, il supprimerait 1 élément et ajouterait l'élément que nous voulons, et ainsi de suite.

Suppression d'un ou plusieurs éléments à un index spécifié

Disons que nous voulions supprimer un élément ou un élément sans en ajouter un nouveau dans le tableau, nous pourrions simplement l'écrire comme l'extrait de code précédent

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra'];

const removedElement = myMusic.splice(3, 1);

// myMusic is ['piano', 'guitar', 'drum', 'ochestra']

// removedElement is ['violin']

Nous pouvons commencer à n'importe quel index et supprimer autant d'éléments que nous le voulons.

Supprimer tous les éléments à partir d'un index spécifié

Nous pouvons supprimer tous les éléments du tableau à partir de l'index que nous voulons. Disons, par exemple, que nous voulons tout supprimer à partir de l'index 1. Une fois arrivé à l'index 1, chaque élément à partir de l'index 1 serait supprimé.

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(1);

// myMusic is ['piano', 'guitar']

// removedElement is ['drum', 'sax', 'ochestra']

Cet extrait de code tente de supprimer tous les éléments à partir de l'index 1. Où l'index 1 est 'clown' dans le tableau. Puisque le comptage commence à partir de 0, cela renverrait un nouveau tableau. qui contient un seul élément qui est 'ange'. C'est parce que pendant le comptage, "l'ange" semble être sur l'index 0, et le comptage commence à l'index 1. L'index 0 serait omis, ce qui renverrait ce résultat.

Plats à emporter

Si vous devez effectuer une tâche sur un tableau et que vous ne voulez pas que le tableau d'origine soit modifié, la méthode splice() du tableau Javascript doit être évitée car elle modifie vos données.

const beforeSplice = ['bread','fish','cook']

console.log(beforeSplice)

// ['bread', 'fish', 'cook']

const afterSpliceData = beforeSplice.splice(1)

console.log(afterSplice)

// ['fish', 'cook']

Dans l'exemple ci-dessus. Avant que la méthode du tableau Javascript splice soit appelée sur la variable beforeSplice. Nous avions 3 éléments, mais une fois la méthode appliquée, elle renvoie 2 éléments. Cette méthode a changé les données. Parfois, ce n'est pas ce que nous voulons. Mais si vous voulez simplement supprimer des éléments ou ajouter un élément, c'est parfait.

Rendez-vous au prochain.