Maîtriser les opérations avancées sur les tableaux
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Comprendre .reduce() et l'accumulateur
Réduire un tableau à une seule valeur
2. Utiliser .reduce() pour calculer
Sommes, moyennes, regroupements
3. Trier avec .sort()
Comprendre la fonction de comparaison
4. Vérifications globales
.every() et .some()
5. Bonus : .findIndex()
Trouver l'index d'un élément
6. Bonus : .flat()
Aplatir les tableaux imbriqués
Le problème que .reduce() résout
Réduire un tableau à une seule valeur
.reduce() pas à pas
L'accumulateur, la valeur initiale, le retour
Cas d'usage
Somme, comptage, maximum, moyenne
.sort() et son piège
Tri alphabétique par défaut vs numérique
.every() et .some()
Vérifications globales sur un tableau
Bonus : .findIndex() et .flat()
Méthodes utilitaires pratiques
Calculer la somme d'un tableau
// Sans .reduce()... Verbeux!
const nombres = [10, 20, 30, 40, 50];
let somme = 0;
for (let i = 0; i < nombres.length; i++) {
somme = somme + nombres[i];
}
console.log(somme); // 150
5 lignes de code pour une simple somme...
Peut-on faire plus élégant?
Réduire un tableau à une seule valeur
Prendre un tableau de N éléments
et le réduire à UNE seule valeur
const somme = nombres.reduce((acc, n) => acc + n, 0);
L'accumulateur
La valeur qui s'accumule tour après tour
1
Tour 1
Accumulateur = valeur initiale
2
Tour 2
Accumulateur = résultat tour 1
3
Tour 3
Accumulateur = résultat tour 2
À chaque tour, l'accumulateur "se souvient" du résultat précédent
tableau.reduce((accumulateur, element, index, array) => {
// traitement
return nouvelleValeur;
}, valeurInitiale);
accumulateur
La valeur qui s'accumule (obligatoire)
element
L'élément courant du tableau (obligatoire)
index
L'index de l'élément (optionnel)
array
Le tableau complet (optionnel)
La fonction DOIT retourner une valeur (le nouvel accumulateur)
const nombres = [10, 20, 30];
const resultat = nombres.reduce((acc, n) => acc + n, 0);
| Tour | Élément | Acc AVANT | Opération | Acc APRÈS |
|---|---|---|---|---|
| 1 | 10 | 0 | 0 + 10 | 10 |
| 2 | 20 | 10 | 10 + 20 | 30 |
| 3 | 30 | 30 | 30 + 30 | 60 |
Résultat final : 60
const nombres = [10, 20, 30];
const resultat = nombres.reduce((acc, n) => {
console.log('Accumulateur:', acc, 'Élément:', n);
return acc + n;
}, 0);
// Sortie console :
Accumulateur: 0 Élément: 10
Accumulateur: 10 Élément: 20
Accumulateur: 30 Élément: 30
Visualiser avec console.log aide à comprendre le flux!
Sans valeur initiale
[10, 20, 30].reduce((acc, n) => acc + n);
Le 1er élément devient l'accumulateur!
Acc initial = 10 (pas 0)
Avec valeur initiale
[10, 20, 30].reduce((acc, n) => acc + n, 0);
L'accumulateur démarre à 0
Acc initial = 0
Sans valeur initiale : le 1er élément est utilisé, donc ignoré dans le traitement!
[10, 20, 30]
acc = 0
60
Une seule valeur!
const prix = [15, 30, 25, 10];
const total = prix.reduce((acc, prix) => acc + prix, 0);
console.log(total); // 80
Le cas le plus classique : additionner tous les éléments
const scores = [85, 92, 78, 95, 88];
const max = scores.reduce((acc, score) => {
return score > acc ? score : acc;
}, scores[0]);
console.log(max); // 95
On compare chaque élément avec l'accumulateur et on garde le plus grand
const notes = [12, 15, 18, 14, 16];
const somme = notes.reduce((acc, note) => acc + note, 0);
const moyenne = somme / notes.length;
console.log(moyenne); // 15
D'abord la somme avec .reduce(), puis diviser par la longueur
const mots = ['pomme', 'banane', 'pomme', 'orange', 'pomme'];
const comptage = mots.reduce((acc, mot) => {
acc[mot] = (acc[mot] || 0) + 1;
return acc;
}, {});
console.log(comptage);
// { pomme: 3, banane: 1, orange: 1 }
L'accumulateur est un objet! On compte chaque mot dedans
const personnes = [
{ nom: 'Alice', age: 25 },
{ nom: 'Bob', age: 30 },
{ nom: 'Charlie', age: 25 }
];
const parAge = personnes.reduce((acc, p) => {
const cle = p.age;
if (!acc[cle]) acc[cle] = [];
acc[cle].push(p);
return acc;
}, {});
Grouper des objets par une propriété commune
Trier les éléments d'un tableau
Mais attention... il y a un PIÈGE!
Trier des nombres sans callback...
const nombres = [10, 5, 100, 2, 50];
nombres.sort();
console.log(nombres);
Résultat : [10, 100, 2, 5, 50]
Ce n'est PAS trié numériquement!
.sort() trie par défaut en ALPHABÉTIQUE (conversion en string)
const nombres = [10, 5, 100, 2, 50];
// Croissant
nombres.sort((a, b) => a - b);
// [2, 5, 10, 50, 100]
// Décroissant
nombres.sort((a, b) => b - a);
// [100, 50, 10, 5, 2]
a - b < 0
a avant b
a - b = 0
inchangé
a - b > 0
b avant a
Contrairement à .map() et .filter()
const nombres = [3, 1, 2];
const trie = nombres.sort((a, b) => a - b);
console.log(trie); // [1, 2, 3]
console.log(nombres); // [1, 2, 3] MODIFIÉ!
Pour éviter : utiliser [...tableau].sort() ou tableau.slice().sort()
.every() et .some()
.every()
TOUS les éléments?
.some()
AU MOINS UN?
Retourne true si TOUS les éléments satisfont la condition
const ages = [25, 30, 35, 40];
const tousMajeurs = ages.every(age => age >= 18);
console.log(tousMajeurs); // true
const tousJeunes = ages.every(age => age < 30);
console.log(tousJeunes); // false (35 et 40 >= 30)
Dès qu'un élément ne passe pas le test, .every() retourne false
Retourne true si AU MOINS UN élément satisfait la condition
const notes = [12, 8, 15, 6];
const aUnEchec = notes.some(note => note < 10);
console.log(aUnEchec); // true (8 et 6 < 10)
const aUn20 = notes.some(note => note === 20);
console.log(aUn20); // false
Dès qu'un élément passe le test, .some() retourne true
Trouver l'index du premier élément qui passe le test
const nombres = [5, 12, 8, 130, 44];
const index = nombres.findIndex(n => n > 10);
console.log(index); // 1 (12 est le premier > 10)
const pasTrouve = nombres.findIndex(n => n > 200);
console.log(pasTrouve); // -1 (non trouvé)
.find()
Retourne l'élément lui-même
.findIndex()
Retourne l'index (position)
Aplatir un tableau de tableaux
const tableau = [[1, 2], [3, 4], [5]];
const plat = tableau.flat();
console.log(plat); // [1, 2, 3, 4, 5]
// Profondeur personnalisée
const profond = [[1, [2, 3]], [4]];
profond.flat(2); // [1, 2, 3, 4]
Par défaut, .flat() aplatit à une profondeur de 1
1. Oublier la valeur initiale
// [].reduce((acc, n) => acc + n) ERREUR sur tableau vide!
Toujours fournir une valeur initiale, surtout pour les sommes
2. Oublier le return
arr.reduce((acc, n) => { acc + n; }) // Pas de return!
arr.reduce((acc, n) => { return acc + n; }) // Correct
Sans return, l'accumulateur devient undefined
1. Tri alphabétique par défaut
[10, 5, 100].sort() // [10, 100, 5]
Utiliser .sort((a, b) => a - b) pour les nombres
2. Mutation du tableau original
const original = [3, 1, 2];
original.sort(); // original est modifié!
Utiliser [...arr].sort() pour préserver l'original
.reduce()
Réduire à une seule valeur
Valeur initiale cruciale!
.sort()
Trier les éléments
(a, b) => a - b pour nombres
.every()
TOUS passent le test?
.some()
AU MOINS UN passe?
Visualisez .reduce() avec console.log pour comprendre!
1. Calculer le total d'un panier
[{prix: 10}, {prix: 25}, {prix: 15}] avec .reduce()
2. Trier correctement un tableau de nombres
[100, 2, 50, 10, 5] en ordre croissant
3. Vérifier si tous les nombres sont positifs
Utiliser .every() sur [5, 10, -3, 8]
4. Trouver l'index du premier élément > 100
Utiliser .findIndex() sur [50, 75, 120, 80]
5. Aplatir un tableau imbriqué
[[1, 2], [3, [4, 5]]] avec .flat(2)
.reduce() est intimidant au début, mais ça vient avec la pratique!
Visualisez avec console.log(acc)
Et n'oubliez pas la valeur initiale!