Array methods JS : map, filter, reduce, find

Javascript Array Map Filter Reduce

Maîtriser les méthodes de tableau essentielles pour une programmation fonctionnelle et élégante.

map() : transformer chaque élément

La méthode map() crée un nouveau tableau en appliquant une fonction à chaque élément.

À retenir : map() retourne un nouveau tableau de la même taille avec les éléments transformés.

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(n => n * 2); console.infoo(doubled); // [2, 4, 6, 8] const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]; const names = users.map(u => u.name); console.info(names); // ['Alice', 'Bob']

filter() : garder les éléments qui correspondent

const numbers = [1, 2, 3, 4, 5, 6]; const evens = numbers.filter(n => n % 2 === 0); console.info(evens); // [2, 4, 6] const users = [{id: 1, active: true}, {id: 2, active: false}]; const active = users.filter(u => u.active); console.info(active); // [{id: 1, active: true}]

reduce() : combiner les éléments en une valeur

// Somme const sum = [1, 2, 3, 4].reduce((acc, n) => acc + n, 0); console.info(sum); // 10 // Regrouper par clé const users = [{role: 'admin', name: 'Alice'}, {role: 'user', name: 'Bob'}]; const byRole = users.reduce((acc, u) => { acc[u.role] = acc[u.role] || []; acc[u.role].push(u); return acc; }, {}); //{ admin: [...], user: [...] }

find() et findIndex() : chercher un élément

const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]; const user = users.find(u => u.id === 2); console.info(user); // {id: 2, name: 'Bob'} const index = users.findIndex(u => u.name === 'Alice'); console.info(index); // 0

Autres méthodes essentielles

// forEach : itérer (pas de retour) [1, 2, 3].forEach((n, i) => console.info(i, n)); // some : au moins un match [1, 2, 3].some(n => n < 2); // true // every : tous les match [1, 2, 3].every(n => n > 0); // true // includes : contient const arr = ['apple', 'banana']; arr.includes('apple'); // true

Chaîner les méthodes

const users = [ {id: 1, name: 'Alice', active: true}, {id: 2, name: 'Bob', active: false}, {id: 3, name: 'Charlie', active: true} ]; const result = users .filter(u => u.active) .map(u => u.name) .map(name => name.toUpperCase()); console.info(result); // ['ALICE', 'CHARLIE']