Manipuler les tableaux en Javascript
Tags: javascript, beginners, french
Published: 2023-06-11 14:53:18

Cet article fait suite à mon précédent article intitulé [Comprendre les tableaux en Javascript](https://dev.to/kureru/comprendre-les-tableaux-en-javascript-3boh).
Si tu as oublié ce qu'est un tableau, ou si tu veux connaître les méthodes pour ajouter et supprimer des éléments, je t'invite à le consulter en premier lieu.

Alors, prêt(e) ? Accroche-toi, nous allons explorer ensemble les méthodes les plus utiles pour manipuler les tableaux en Javascript ! 🛫

Parfois, on n'est pas sûr si l'objet qu'on souhaite manipuler est réellement un tableau. Dans ce cas, on peut utiliser : 

####  `Array.isArray(valeur)` :  renvoie `true` si l'objet passé en argument est un _Array_, et `false` sinon

```javascript
Array.isArray([23, 22, 21]); // true
Array.isArray("pantoufle"); // false
```
### Itération 

Passons maintenant aux choses sérieuses. Que faire si je veux effectuer une action sur chaque élément de mon tableau ? C'est ce qu'on appelle "itérer" sur un tableau.

####  `array.forEach(function(item, index, array){ //... });` :  exécute une fonction sur chaque élément du tableau.

```javascript
const fruits = ['pomme', 'banane', 'orange'];
fruits.forEach((fruit) => {
  console.log(fruit);
});
// 'pomme'
// 'banane'
// 'orange'
```
### Recherche dans un tableau

Il existe également des méthodes pratiques pour chercher des éléments dans un tableau sans avoir à les parcourir un par un (sans boucle).

####  `array.indexOf(element, indiceDepart);` :  recherche un élément à partir de l'indice de départ spécifié, et renvoie son indice s'il est trouvé.

Si l'élément n'est pas présent dans le tableau, la méthode renvoie -1.

```javascript
const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits.indexOf('orange')); // 2
console.log(fruits.indexOf('kiwi')); // -1
```

####  `array.includes(valeur, indiceDepart);` : renvoie  `true` si le tableau contient la valeur spécifiée, et `false` sinon.

```javascript
const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits.includes('pomme')); // true
console.log(fruits.includes('kiwi')); // false
```

####  `array.find(fonction);` : renvoie la valeur du premier élément qui satisfait la condition spécifiée par la fonction de test.

 Si aucun élément ne satisfait la condition, la méthode renvoie `undefined`.

```javascript
const personnes = [
  { nom: 'Alice', age: 25 },
  { nom: 'Bob', age: 17 },
  { nom: 'Charlie', age: 20 },
  { nom: 'Dave', age: 16 }
];

const personneMajeure = personnes.find(personne => personne.age >= 18);

console.log(personneMajeure); // { nom: 'Alice', age: 25 }
```
####  `array.filter(fonction);` : créé une copie du tableau en ne conservant que les éléments qui satisfont la condition spécifiée par la fonction de test.

```javascript
const etudiants = [
  { nom: 'Alice', moyenne: 90 },
  { nom: 'Bob', moyenne: 75 },
  { nom: 'Charlie', moyenne: 85 },
  { nom: 'Dave', moyenne: 95 }
];

const etudiantsSelectionnes = etudiants.filter(etudiant => etudiant.moyenne >= 80);

console.log(etudiantsSelectionnes);
// [
//   { nom: 'Alice', moyenne: 90 },
//   { nom: 'Charlie', moyenne: 85 },
//   { nom: 'Dave', moyenne: 95 }
// ]
```

### Transformation d'un tableau

Pour finir, voici quelques méthodes pour modifier un tableau.

####  `array.map(fonction);` : appelle une fonction pour chaque élément du tableau et renvoie un nouveau tableau contenant les résultats.

```javascript
const fruits = [
  { id: 1, nom: 'Pomme' },
  { id: 2, nom: 'Banane' },
  { id: 3, nom: 'Orange' },
  { id: 4, nom: 'Fraise' }
];

const nomsFruits = fruits.map(fruit => fruit.nom);

console.log(nomsFruits); // ['Pomme', 'Banane', 'Orange', 'Fraise']
```

####  `array.sort();` : modifie le tableau en le triant par ordre croissant

Il est possible d'utiliser une fonction pour spécifier l'ordre de tri, comme dans l'exemple ci-dessous.

```javascript
const etudiants = [
  { nom: 'Alice', moyenne: 90 },
  { nom: 'Bob', moyenne: 75 },
  { nom: 'Charlie', moyenne: 85 },
  { nom: 'Dave', moyenne: 95 }
];

etudiants.sort((a, b) => a.moyenne - b.moyenne);

console.log(etudiants);
// [
//   { nom: 'Bob', moyenne: 75 },
//   { nom: 'Charlie', moyenne: 85 },
//   { nom: 'Alice', moyenne: 90 },
//   { nom: 'Dave', moyenne: 95 }
// ]
```

####  `array.reverse();` : inverse l'ordre des éléments du tableau

```javascript
const nombres = [1, 2, 3, 4, 5];

nombres.reverse();

console.log(nombres); // [5, 4, 3, 2, 1]
```

####  `array.reduce(callback, valeurInitiale)` : réduit les éléments d'un tableau à une seule valeur. Cette méthode exécute une fonction de rappel sur chaque élément du tableau et accumule le résultat à chaque itération.

```javascript
const nombres = [1, 2, 3, 4, 5];

const somme = nombres.reduce((acc, nombre) => acc + nombre, 0);

console.log(somme); // 15
```
Et voilà, nous avons terminé la liste des méthodes utiles pour manipuler les tableaux en Javascript. Si vous avez apprécié cet article, n'hésitez pas à laisser un commentaire pour me le faire savoir.