Les tableaux sont omniprésents dans JavaScript et se retrouvent dans presque tous les projets, qu’il s’agisse de manipuler des listes d’utilisateurs, des produits, ou des données API. Voici un guide complet sur les fonctions les plus utiles des tableaux couvrant les cas les plus aux cas les plus avancés
Array.map( ) - Transformer des Données
La fonction map() est parfaite lorsque tu veux appliquer une transformation à chaque élément d’un tableau pour obtenir un nouveau tableau.
imaginons une liste d’utilisateurs à laquelle on souhaite ajouter une propriété isActive.
1let users = [
2 { name: "Alice", age: 25 },
3 { name: "Bob", age: 30 },
4 { name: "Charlie", age: 35 },
5];
6
7let updatedUsers = users.map(user => ({
8 ...user, // On garde les anciennes propriétés
9 isActive: true, // On ajoute une nouvelle propriété
10}));
11
12console.log(updatedUsers);
13/*
14[
15 { name: "Alice", age: 25, isActive: true },
16 { name: "Bob", age: 30, isActive: true },
17 { name: "Charlie", age: 35, isActive: true },
18]
19*/
Astuce : Utilise map() pour reformater les données reçues d’une API avant de les afficher.
Array.filter( ) - Sélectionner des Éléments
La fonction filter() crée un nouveau tableau en gardant uniquement les éléments qui respectent une condition.
Imaginons une liste où on veut extraire uniquement les utilisateurs ayant plus de 18 ans.
1let users = [
2 { name: "Alice", age: 16 },
3 { name: "Bob", age: 25 },
4 { name: "Charlie", age: 18 },
5];
6
7let adults = users.filter(user => user.age >= 18);
8
9console.log(adults);
10/*
11[
12 { name: "Bob", age: 25 },
13 { name: "Charlie", age: 18 },
14]
15*/
16
Array.find( ) - Trouver un Élément
La fonction find() retourne le premier élément qui satisfait une condition (ou undefined si aucun élément ne correspond).
1//Recherche dans une liste d'objet utilisateur
2let userList1 = ["Alice", "Bob", "Charlie"];
3
4let user1 = userList2.find(item => item === "Bob");
5
6console.log(user1); // "Bob"
7
8
9//Recherche dans une liste de nom
10let userList2 = [
11 { name: "Alice", age: 25 },
12 { name: "Bob", age: 30 },
13 { name: "Charlie", age: 35 },
14];
15let user2 = userList1.find(user => user.name === "Bob");
16
17console.log(user2); // { name: "Bob", age: 30 }
Array.sort( ) - Trier les Éléments
La fonction sort() trie les éléments en place. Cependant, elle trie les valeurs comme des chaînes de caractères par défaut, ce qui peut donner des résultats inattendus.
Trier des chaînes de caractères
Trier une liste de noms par ordre alphabétique
1let names = ["Charlie", "Alice", "Bob"];
2names.sort(); // Tri alphabétique
3console.log(names); // ["Alice", "Bob", "Charlie"]
Trier des nombres
Par défaut, sort() ne trie pas correctement les nombres car il les compare comme des chaînes.
Trions une liste de nombre par ordre croissant :
1let numbers = [10, 2, 30, 4];
2numbers.sort((a, b) => a - b); // Tri croissant
3console.log(numbers); // [2, 4, 10, 30]
Trier des objets
Trions des utilisateurs par âge
1let users = [
2 { name: "Alice", age: 25 },
3 { name: "Bob", age: 30 },
4 { name: "Charlie", age: 20 },
5];
6
7
8//Tri croissant selon l'âge
9users.sort((a, b) => a.age - b.age);
10console.log(users);
11/*
12[
13 { name: "Charlie", age: 20 },
14 { name: "Alice", age: 25 },
15 { name: "Bob", age: 30 },
16]
17*/
Trions des utilisateurs par nom
1//Tri par nom
2users.sort((a, b) => a.name.localeCompare(b.name));
3console.log(users);
4/*
5[
6 { name: "Alice", age: 25 },
7 { name: "Bob", age: 30 },
8 { name: "Charlie", age: 20 },
9]
10*/
Array.forEach( )
La fonction forEach() exécute une action pour chaque élément, mais elle ne retourne rien.
Par exemple, affichons les noms des utilisateurs :
1let users = [
2 { name: "Alice", age: 25 },
3 { name: "Bob", age: 30 },
4 { name: "Charlie", age: 35 },
5];
6
7users.forEach(user => console.log(user.name));
8// Alice
9// Bob
10// Charlie
Chaque fonction de tableau a un usage spécifique. Voici un résumé rapide pour t’aider à choisir la bonne fonction selon ton besoin :
