Manipuler les tableaux en Javascript

Cet article fait suite à mon précédent article intitulé Comprendre les tableaux en Javascript.
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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

Comments

[maldestor95]

Merci pour l'article!

Je recherchai comment ajouter, retirer, déplacer un élément d'un tableau. La solution est avec la méthode splice

developer.mozilla.org/en-US/docs/W...

[inadayutaka0707]

c'est génial

[Claire D.]

Merci