コドジョkodojo

Avancé30 min de lecture

Méthodes Modernes de Tableaux

Maîtrise map, filter, reduce, find, some, every et d'autres méthodes fonctionnelles de tableaux pour un code propre et expressif.

Transformation : map()

La méthode map() crée un nouveau tableau en appliquant une fonction à chaque élément du tableau original. Elle ne modifie pas l'original.

javascript

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]
console.log(numbers);  // [1, 2, 3, 4, 5] — inchangé

map() retourne toujours un tableau de la même longueur que l'original. C'est la méthode de référence pour transformer des données :

javascript

// Extraire une propriété d'objets
const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
];
const names = users.map(user => user.name);
// ['Alice', 'Bob']

// Convertir des types
const strings = ['1', '2', '3'];
const nums = strings.map(Number);
// [1, 2, 3]

// Construire du HTML
const items = ['Apple', 'Banana', 'Cherry'];
const html = items.map(item => `<li>${item}</li>`).join('');
// '<li>Apple</li><li>Banana</li><li>Cherry</li>'

Le callback reçoit trois arguments : (element, index, array). L'index et le tableau sont optionnels mais utiles :

javascript

const indexed = ['a', 'b', 'c'].map((letter, i) => `${i}: ${letter}`);
// ['0: a', '1: b', '2: c']

Filtrage : filter() & find()

filter() retourne un nouveau tableau contenant uniquement les éléments qui passent une condition (le callback retourne true) :

javascript

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

Le tableau retourné peut être plus court que l'original (ou même vide si rien ne correspond). L'original n'est pas modifié.

javascript

const users = [
  { name: 'Alice', active: true },
  { name: 'Bob', active: false },
  { name: 'Charlie', active: true },
];
const activeUsers = users.filter(u => u.active);
// [{ name: 'Alice', active: true }, { name: 'Charlie', active: true }]

find() retourne le premier élément qui correspond à la condition (ou undefined si aucun ne correspond) :

javascript

const found = numbers.find(n => n > 5);
console.log(found); // 6 (le premier nombre supérieur à 5)

findIndex() retourne l'index de la première correspondance (ou -1 si non trouvé) :

javascript

const index = numbers.findIndex(n => n > 5);
console.log(index); // 5

includes() est la vérification la plus simple — retourne true ou false pour une valeur spécifique :

javascript

console.log(numbers.includes(3)); // true
console.log(numbers.includes(99)); // false

Réduction : reduce()

reduce() traite un tableau et le réduit à une valeur unique. Elle prend un callback avec deux paramètres principaux — un accumulateur et l'élément courant — plus une valeur initiale :

javascript

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0);
console.log(sum); // 15

Étape par étape :

Départ : accumulator = 0 (valeur initiale)
Itération 1 : 0 + 1 = 1
Itération 2 : 1 + 2 = 3
Itération 3 : 3 + 3 = 6
Itération 4 : 6 + 4 = 10
Itération 5 : 10 + 5 = 15

reduce() est extrêmement polyvalente :

javascript

// Compter les occurrences
const fruits = ['apple', 'banana', 'apple', 'cherry', 'banana', 'apple'];
const counts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
// { apple: 3, banana: 2, cherry: 1 }

// Trouver la valeur maximum
const max = numbers.reduce((a, b) => a > b ? a : b);
// 5

// Aplatir des tableaux
const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.reduce((acc, arr) => [...acc, ...arr], []);
// [1, 2, 3, 4, 5, 6]

Fournis toujours une valeur initiale (le deuxième argument de reduce). L'omettre utilise le premier élément comme accumulateur initial, ce qui peut causer des bugs avec des tableaux vides.

Tests : some() & every()

some() retourne true si au moins un élément passe le test :

javascript

const numbers = [1, 3, 5, 7, 8];
console.log(numbers.some(n => n % 2 === 0)); // true (8 est pair)
console.log(numbers.some(n => n > 10));      // false

every() retourne true si tous les éléments passent le test :

javascript

const scores = [80, 92, 75, 88];
console.log(scores.every(s => s >= 70)); // true (tous ont réussi)
console.log(scores.every(s => s >= 80)); // false (75 < 80)

Les deux méthodes font un court-circuit — elles arrêtent l'itération dès que le résultat est déterminé. some() s'arrête au premier true, et every() s'arrête au premier false.

flat() aplatit les tableaux imbriqués d'un niveau (ou plus avec un argument de profondeur) :

javascript

const nested = [[1, 2], [3, [4, 5]]];
console.log(nested.flat());  // [1, 2, 3, [4, 5]]
console.log(nested.flat(2)); // [1, 2, 3, 4, 5]

flatMap() combine map() et flat(1) en une seule étape :

javascript

const sentences = ['Hello world', 'Goodbye world'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Goodbye', 'world']

Chaînage de Méthodes

Puisque map(), filter() et beaucoup d'autres méthodes de tableaux retournent de nouveaux tableaux, tu peux les chaîner ensemble pour des transformations de données concises et lisibles :

javascript

const users = [
  { name: 'Alice', age: 30, active: true },
  { name: 'Bob', age: 17, active: true },
  { name: 'Charlie', age: 25, active: false },
  { name: 'Diana', age: 22, active: true },
];

const result = users
  .filter(u => u.active)           // garder les utilisateurs actifs
  .filter(u => u.age >= 18)        // garder les adultes
  .map(u => u.name)                // extraire les noms
  .join(', ');                     // combiner en chaîne de caractères

console.log(result); // 'Alice, Diana'

Le chaînage se lit comme un pipeline — chaque étape transforme les données et les passe à la suivante. C'est un motif central en programmation fonctionnelle.

Tu peux aussi chaîner vers un reduce() :

javascript

const total = orders
  .filter(order => order.status === 'completed')
  .map(order => order.total)
  .reduce((sum, total) => sum + total, 0);

Astuce : Pour de très grands tableaux, chaque méthode chaînée crée un nouveau tableau intermédiaire. Si la performance est critique, un seul reduce() ou une boucle for peut être plus efficace. Mais pour la plupart des cas d'usage, la lisibilité du chaînage l'emporte largement sur le coût de performance.

Méthodes de Tableaux en Action

html

<div id="output"></div>

<script>
  const products = [
    { name: 'Laptop', price: 999, inStock: true },
    { name: 'Phone', price: 699, inStock: true },
    { name: 'Tablet', price: 499, inStock: false },
    { name: 'Watch', price: 299, inStock: true },
    { name: 'Earbuds', price: 149, inStock: true },
  ];

  // Chain: filter in-stock → map to formatted strings → join
  const available = products
    .filter(p => p.inStock)
    .map(p => `${p.name}: $${p.price}`)
    .join(', ');

  // Reduce: total of in-stock items
  const total = products
    .filter(p => p.inStock)
    .reduce((sum, p) => sum + p.price, 0);

  const output = document.getElementById('output');
  output.innerHTML = `
    <p><strong>Available:</strong> ${available}</p>
    <p><strong>Total value:</strong> $${total}</p>
  `;
</script>

Que retourne [1, 2, 3].map(x => x * 2) ?

Prêt à pratiquer ?

Crée ton compte gratuit pour accéder à l'éditeur de code interactif, lancer les défis et suivre ta progression.