Comprendre les tableaux en Javascript
Tags: javascript, french, codenewbie, beginners
Published: 2023-06-05 09:14:30

Après avoir vu les [méthodes de chaînes de caractères](https://dev.to/kureru/javascript-12-methodes-essentielles-pour-les-chaines-de-caracteres-5b6), passons aux tableaux. 

Un tableau (ou _array_ en anglais) est similaire à un casier dans des vestiaires. 

![casiers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glcdlb5gxpv3xkcmew2k.jpg)

On peut mettre un élément de notre choix dans chaque casier et il peut y avoir autant d'éléments que souhaité.

```javascript
// Je peux mettre des nombres dans mon tableau
let nums = [23, 56, 12, 0, 54];

// Ou des chaînes de caractères
let prenoms = ["Marcel", "Pascal", "Michelle"];

// Ou mettre plusieurs types ou
// même mettre des tableaux dans les tableaux #inception
let memo = ["samedi", [453, 23, "pizza"]];

// Ou avoir un tableau vide
let mesAmis = [];
```

<mark>💡 Que peut-on faire avec les tableaux ?</mark>

Il y a plusieurs méthodes très pratiques pour manipuler les tableaux et organiser nos données.

## Comment ajouter ou supprimer des éléments

### Ajouter ou extraire un élément 
Il est fréquent de devoir modifier un tableau en ajoutant ou en supprimant des éléments.
#### `array.push()` ajoute un élément à la fin du tableau
#### `array.unshift()` ajoute un élément au début du tableau
```javascript
// Je commence avec cet array
let nourriturePreferee = ["pain", "fromage", "chocolat"]

// ajoute un élément au début de la liste
nourriturePreferee.unshift("pâtes")
console.log(nourriturePreferee) // ['pâtes', 'pain', 'fromage', 'chocolat']

// ajoute quelque chose en fin de liste
nourriturePreferee.push("chou-fleur")
console.log(nourriturePreferee) // ['pâtes', 'pain', 'fromage', 'chocolat', 'chou-fleur']
```

Pour extraire un élément de notre tableau, nous avons les méthodes suivantes : 
#### `array.pop()` extrait le dernier élément du tableau
#### `array.shift()` extrait le premier élément du tableau

```javascript
// On reprend le même exemple
let nourriturePreferee = ["pain", "fromage", "chocolat"]

// extrait le premier élément de la liste
nourriturePreferee.shift()
console.log(nourriturePreferee) // ['fromage', 'chocolat']

// extrait le dernier élément
nourriturePreferee.pop()
console.log(nourriturePreferee) // ['fromage']
```
### Ajouter ou supprimer un ou plusieurs éléments

En plus de ces méthodes de base, il en existe d'autres qui retournent un nouveau tableau sans modifier les tableaux d'origine.

####  `concat(valeur0, valeur1)` :  fusionne deux ou plusieurs tableaux en les concaténant*

> concaténer : mettre bout à bout

```javascript
let sports1 = ["foot", "judo", "basket"]
let sports2 = ["rugby", "pétanque"]
let sportsTotal = sports1.concat(sports2)
console.log(sportsTotal) 
// ['foot', 'judo', 'basket', 'rugby', 'pétanque']
```

####  `arr.slice(début, fin)` : renvoie un tableau, contenant une copie superficielle d'une portion du tableau d'origine

```javascript
let mesSports = ["danse", "musculation", "course", "karaté", "ski"]
sportsDuMardi = mesSports.slice(1,3)
console.log(sportsDuMardi)
// ['musculation', 'course']
```

⚠️ On note que l'élément 1 de notre tableau est "musculation" et non pas "danse". C'est parce que la numérotation des tableau commence toujours à partir de 0. 

<mark> La méthode slice est très pratique, mais si je veux modifier mon tableau d'origine en remplaçant ou supprimant un ou des éléments ? </mark> 

Il existe une autre méthode.

####  `arr.splice(début, nbASupprimer[, élem1[, élem2[, ...]]])` : insère, retire, remplace un ou des éléments. Change le contenu du tableau.

```javascript
let mesSports = ["danse", "musculation", "course", "karaté", "ski"]
mesSports.splice(2, 1, "rugby") 
// sélection le 3ème élément du tableau et le remplace par rubgy
console.log(mesSports)
// ['danse', 'musculation', 'rugby', 'karaté', 'ski']
```

Dans un prochain article, nous verrons davantage de méthodes pour manipuler les tableaux. 
Merci d'avoir lu cet article.