[4/4] Passez de zéro à héros avec ces méthodes JavaScript
Tags: javascript, beginners, french
Published: 2023-03-22 15:15:07

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.

&nbsp;
# 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**[. 

&nbsp;
### 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)

&nbsp;
## Exemple

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

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

// Output [🥨, 🍟, 🥗, 🍫]
// Tableau [🥨, 🍟, 🥗, 🍫]
```
&nbsp;
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.

```jsx
// 1 : indice de départ

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

// Output [🍟, 🥗, 🍫]
// Tableau [🥨, 🍟, 🥗, 🍫]
```
&nbsp;
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.

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

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

// Output [🍟, 🥗]
// Tableau [🥨, 🍟, 🥗, 🍫]
```
&nbsp;
# 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**.
&nbsp;
### 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

&nbsp;
## 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.

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

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

// Output []
// Tableau [🍟, 🍩, 🍰, 🥗, 🍫]
```
```jsx
// 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.

&nbsp;
### 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.

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

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

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

```jsx
// 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.

&nbsp;
### 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.

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

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

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

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

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

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

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

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

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

&nbsp;
# 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 !