Arrays - Mémo JavaScript

Arrays Avancés

Méthodes Fonctionnelles & Immutabilité

Les arrays en JS sont des objets puissants avec 30+ méthodes. Maîtriser les méthodes fonctionnelles est essentiel pour le développement moderne.

🎯 Les 15 Méthodes Essentielles

map()

Transforme chaque élément

Transform

filter()

Filtre selon condition

Transform

reduce()

Accumule en une valeur

Transform

find()

Premier élément trouvé

findIndex()

Index du premier trouvé

includes()

Contient la valeur ?

some()

Au moins un respecte ?

Test

every()

Tous respectent ?

Test

push()

Ajoute à la fin

Mutate

splice()

Modifie en place

Mutate

sort()

Trie en place

Mutate

slice()

Copie une portion

Transform

flat()

Aplatit les niveaux

Transform

join()

Convertit en string

Transform

concat()

Fusionne arrays

Transform

🔨 Method Chain Builder

Cliquez sur les méthodes ci-dessus pour construire une chaîne de transformation.

Array de départ :

Sélectionnez des méthodes pour construire une chaîne

Résultat...

🔒 Immutabilité : Mutation vs Copie

❌ Mutation (Danger)

const arr = [1, 2, 3];

// Modifie l'original
arr.push(4);
arr.sort((a, b) => b - a);
arr[0] = 99;

// ⚠️ Effets de bord
// ⚠️ Bugs difficiles à tracer

✅ Immutable (Safe)

const arr = [1, 2, 3];

// Crée de nouveaux arrays
const arr2 = [...arr, 4];
const arr3 = [...arr].sort((a, b) => b - a);
const arr4 = arr.map((x, i) => i === 0 ? 99 : x);

// ✅ Original intact
// ✅ Prédictible

⚡ Le Pouvoir de reduce()

reduce() est la méthode la plus puissante. Elle peut remplacer presque toutes les autres.

const numbers = [1, 2, 3, 4, 5];

// 1. Somme (classique)
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

// 2. Grouper par propriété
const users = [{role: 'admin', name: 'Alice'}, {role: 'user', name: 'Bob'}];
const byRole = users.reduce((acc, user) => {
    (acc[user.role] = acc[user.role] || []).push(user);
    return acc;
}, {});
// { admin: [{...}], user: [{...}] }

// 3. Compter occurrences
const fruits = ['🍎', '🍌', '🍎', '🍊', '🍌', '🍎'];
const count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});
// { '🍎': 3, '🍌': 2, '🍊': 1 }

// 4. Flatten (aplatir)
const nested = [[1, 2], [3, 4], [5]];
const flat = nested.reduce((acc, arr) => acc.concat(arr), []);
// [1, 2, 3, 4, 5]

Best Practice : Privilégiez les méthodes immutables (map, filter, slice) pour éviter les bugs. Utilisez le spread operator [...arr] pour copier avant de muter.

← Fonctions Suivant: Objects →