Dans ce dernier article sur les méthodes JavaScript indispensables pour les tableaux, nous allons voir les méthodes slice et splice. Nous verrons que malgré leur ressemblance orthographique, ces deux méthodes ont bien plus qu’un “p” qui les différencie.

1. slice

La méthode slice permet d’obtenir une copie partielle d’un tableau en définissant la section du tableau souhaitée [indice de début ; indice de fin[.

Paramètres

La méthode slice accepte entre 0 et 2 paramètres.

• indice de début du sous tableau
• indice de fin du sous tableau (l’élément à cet indice ne sera pas pris dans le sous tableau)

Exemple

Si on appel la méthode slice sans paramètre, le retour sera une copie du tableau d’origine.

[🥨, 🍟, 🥗, 🍫].slice()

// Output [🥨, 🍟, 🥗, 🍫]
// Tableau [🥨, 🍟, 🥗, 🍫]

 
Si on appelle la méthode slice avec un paramètre, on obtient une copie du tableau original de l’indice de début à la fin du tableau.

Dans l’exemple, on applique slice avec :

• indice de début : 1
• pas d’indice de fin

On obtient la séquence [1 ; 3] du tableau original.

// 1 : indice de départ

[🥨, 🍟, 🥗, 🍫].slice(1)

// Output [🍟, 🥗, 🍫]
// Tableau [🥨, 🍟, 🥗, 🍫]

 
Si on appelle la méthode slice avec deux paramètres, on obtient une copie de la séquence [indice de début ; indice de fin[ du tableau original.

Dans l’exemple, on applique slice avec

• indice de début : 1
• indice de fin : 3

On obtient la séquence [1 ; 3[ du tableau original.

// 1 : indice de départ
// 3 : indice de fin

[🥨, 🍟, 🥗, 🍫].slice(1,3)

// Output [🍟, 🥗]
// Tableau [🥨, 🍟, 🥗, 🍫]

2. splice

La méthode splice permet de supprimer des éléments d’un tableau et en insérer d’autres.

Attention : Cette méthode ne renvoie pas de copie et modifie le tableau d’origine.
 

Paramètres

La méthode splice accepte entre 3 et n paramètres.

• indice de début
• nombre d’éléments à supprimer
• les éléments à ajouter

Exemple

La méthode splice permet de faire plusieurs opérations différentes, voici quelques exemples d’utilisation.

Insérer un ou plusieurs éléments

splice permet d’insérer des éléments dans un tableau en mettant 0 en deuxième argument de la méthode.

Tous les arguments en troisième position et au-delà sont les éléments à ajoutés.

// 1 : indice de départ
// 0 : nombre d'éléments supprimés
// 🍩, 🍰 : éléments à insérer à l'indice 1

[🍟, 🥗, 🍫].splice(1, 0, 🍩, 🍰)

// Output []
// Tableau [🍟, 🍩, 🍰, 🥗, 🍫]

// 0 : indice de départ
// 0 : nombre d'éléments supprimés
// 🍩, 🍰 : éléments à insérer à l'indice 0

[🍟, 🥗, 🍫].splice(0, 0, 🍩, 🍰)

// Output []
// Tableau [🍩, 🍰, 🍟, 🥗, 🍫]

L’output de la méthode est un tableau vide car on ne supprime aucun élément.

Supprimer un ou plusieurs éléments

splice permet également de supprimer des éléments dans un tableau si on ne renseigne pas de troisième arguments.

// 1 : indice de départ
// 1 : nombre d'éléments supprimés

[🍟, 🥗, 🍫].splice(1, 1)

// Output [🥗]
// Tableau [🍟, 🍫]

// 1 : indice de départ
// 2 : nombre d'éléments supprimés

[🍟, 🥗, 🍫].splice(1, 2)

// Output [🥗, 🍫]
// Tableau [🍟]

On remarque que l’output de la méthode est un tableau des éléments supprimés.

Combo : Supprimer et Insérer un ou plusieurs éléments

Comme vous vous en doutez, il est possible de faire une combinaison des deux actions vues précédemment : supprimer des éléments et en insérer des nouveaux.

// 1 : indice de départ
// 1 : nombre d'éléments supprimés
// 🍩 : éléments à insérer à l'indice 1

[🍟, 🥗, 🍫].splice(1, 1, 🍩)

// Output [🥗]
// Tableau [🍟, 🍩, 🍫]

// 1 : indice de départ
// 2 : nombre d'éléments supprimés
// 🍩 : éléments à insérer à l'indice 1

[🍟, 🥗, 🍫].splice(1, 2, 🍩)

// Output [🥗, 🍫]
// Tableau [🍟, 🍩]

// 1 : indice de départ
// 1 : nombre d'éléments supprimés
// 🍩, 🍰 : éléments à insérer à l'indice 1

[🍟, 🥗, 🍫].splice(1, 1, 🍩, 🍰)

// Output [🥗]
// Tableau [🍟, 🍩, 🍰, 🍫]

Conclusion

Nous avons vu les deux dernières méthodes JavaScript pour les tableaux à connaitre pour écrire du code lisible et robuste.

Pour résumer, la méthode slice permet de récupérer des bouts de tableau. Cette méthode ne transforme pas le tableau d’origine et renvoie une copie. Le méthode splice permet de supprimer et insérer des éléments dans une tableau. Cette méthode va transformer le tableau d’origine.

Vous voilà prêt à affronter les défis JavaScript sur les tableaux. J’espère vous avoir aidé à écrire du code de meilleure qualité ! Je vous souhaite beaucoup d’amusement dans votre entraînement et votre pratique !