Tableaux (Arrays) en JavaScript 📚

Les tableaux sont des listes ordonnees d'elements. C'est l'une des structures de donnees les plus utilisees en JavaScript.

---

1. Creation de tableaux 🏗️

// Declaration
const fruits = ["pomme", "banane", "cerise"];
const nombres = [1, 2, 3, 4, 5];
const mixte = [1, "hello", true, null, { nom: "Alice" }];

// Constructeur (a eviter)
const vides = new Array(5);  // [undefined x 5] — pas utile

// Array.from — creer depuis une chaine
const lettres = Array.from("hello");
console.log(lettres); // ["h", "e", "l", "l", "o"]

// Array.of
const triplet = Array.of(1, 2, 3);
console.log(triplet); // [1, 2, 3]

---

2. Acces aux elements 🔢

const fruits = ["pomme", "banane", "cerise", "datte"];

console.log(fruits[0]);       // "pomme" (premier element)
console.log(fruits[2]);       // "cerise" (troisieme element)
console.log(fruits.at(-1));   // "datte" (dernier element)
console.log(fruits.at(-2));   // "cerise" (avant-dernier)

console.log(fruits.length);   // 4

// Modifier un element
fruits[1] = "fraise";
console.log(fruits); // ["pomme", "fraise", "cerise", "datte"]

💡 arr.at(i) est moderne et supporte les index negatifs. arr[arr.length - 1] est la version classique pour le dernier element.

---

3. Methods de modification 🔧

Ajouter et supprimer

const tab = [1, 2, 3];

// push — ajouter a la fin
tab.push(4);
console.log(tab); // [1, 2, 3, 4]

// pop — supprimer le dernier
tab.pop();
console.log(tab); // [1, 2, 3]

// unshift — ajouter au debut
tab.unshift(0);
console.log(tab); // [0, 1, 2, 3]

// shift — supprimer le premier
tab.shift();
console.log(tab); // [1, 2, 3]

splice — modifier, inserer, supprimer

const tab = ["a", "b", "c", "d", "e"];

// Supprimer 2 elements a partir de l'index 1
tab.splice(1, 2);
console.log(tab); // ["a", "d", "e"]

// Inserer a l'index 1 (sans supprimer)
tab.splice(1, 0, "x", "y");
console.log(tab); // ["a", "x", "y", "d", "e"]

// Remplacer 1 element a l'index 2
tab.splice(2, 1, "z");
console.log(tab); // ["a", "x", "z", "d", "e"]

⚠️ splice MODIFIE le tableau original. Pour creer un nouveau tableau, utilise toSpliced() (ES2023).

slice — copier sans modifier

const original = [1, 2, 3, 4, 5];
const copie = original.slice(1, 3);

console.log(copie);   // [2, 3]
console.log(original); // [1, 2, 3, 4, 5] (intact)

---

4. Methods de parcours et de transformation 🔄

forEach — parcourir

const fruits = ["pomme", "banane", "cerise"];

fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});
// 0: pomme
// 1: banane
// 2: cerise

map — transformer

const nombres = [1, 2, 3, 4, 5];
const doubles = nombres.map(n => n * 2);
console.log(doubles); // [2, 4, 6, 8, 10]

const noms = ["alice", "bob", "charlie"];
const majuscules = noms.map(n => n.toUpperCase());
console.log(majuscules); // ["ALICE", "BOB", "CHARLIE"]

filter — filtrer

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

const personnes = [
    { nom: "Alice", age: 25 },
    { nom: "Bob", age: 17 },
    { nom: "Charlie", age: 30 }
];
const majeurs = personnes.filter(p => p.age >= 18);
console.log(majeurs); // [{ nom: "Alice", ... }, { nom: "Charlie", ... }]

reduce — reduire a une seule valeur

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

// Somme
const somme = nombres.reduce((acc, n) => acc + n, 0);
console.log(somme); // 15

// Maximum
const max = nombres.reduce((acc, n) => n > acc ? n : acc, nombres[0]);
console.log(max); // 5

// Compter les occurrences
const lettres = ["a", "b", "a", "c", "a", "b"];
const compte = lettres.reduce((acc, l) => {
    acc[l] = (acc[l] || 0) + 1;
    return acc;
}, {});
console.log(compte); // { a: 3, b: 2, c: 1 }

find et findIndex

const personnes = [
    { nom: "Alice", age: 25 },
    { nom: "Bob", age: 17 },
    { nom: "Charlie", age: 30 }
];

const bob = personnes.find(p => p.nom === "Bob");
console.log(bob); // { nom: "Bob", age: 17 }

const indexAlice = personnes.findIndex(p => p.nom === "Alice");
console.log(indexAlice); // 0

---

5. Le spread operator (...) 🌟

Le spread etale un tableau en elements individuels :

const premier = [1, 2, 3];
const deuxieme = [4, 5, 6];

// Fusionner
const fusion = [...premier, ...deuxieme];
console.log(fusion); // [1, 2, 3, 4, 5, 6]

// Copier un tableau
const copie = [...premier];
console.log(copie); // [1, 2, 3]

// Ajouter un element
const avecNouveau = [0, ...premier, 4];
console.log(avecNouveau); // [0, 1, 2, 3, 4]

---

6. La destructuration d'arrays 📦

const couleurs = ["rouge", "vert", "bleu", "jaune"];

// Extraire le premier et le deuxieme
const [premier, deuxieme] = couleurs;
console.log(premier);   // "rouge"
console.log(deuxieme);  // "vert"

// Sauter des elements
const [, , troisieme] = couleurs;
console.log(troisieme); // "bleu"

// Rest parameters avec destructuration
const [tete, ...reste] = couleurs;
console.log(tete);   // "rouge"
console.log(reste);  // ["vert", "bleu", "jaune"]

// Valeurs par defaut
const [a, b, c = "defaut"] = [1, 2];
console.log(c); // "defaut"

// Echange de variables
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

---

7. Methodes utiles supplementaires ⚙️

---

8. Immutabilite et tableaux 🛡️

En JavaScript moderne, on evite de modifier les tableaux originaux :

const tab = [3, 1, 4, 1, 5];

// ❌ Modifie l'original
tab.sort();

// ✅ Cree un nouveau tableau trie
const trie = [...tab].sort((a, b) => a - b);

// ❌ Modifie l'original
tab.push(9);

// ✅ Cree un nouveau tableau avec l'element ajoute
const avecNeuf = [...tab, 9];

// toSorted(), toReversed(), toSpliced() — ES2023
const sorted = tab.toSorted();
const reversed = tab.toReversed();
const spliced = tab.toSpliced(1, 2, "x", "y");

---

9. Exercices pour toi 🎯

Exercice 1 : Moyenne Calcule la moyenne de [12, 15, 18, 10, 14] avec reduce.

Exercice 2 : Tri personnalise Trie un tableau d'objets personnes par age croissant :

const personnes = [
    { nom: "Alice", age: 25 },
    { nom: "Bob", age: 17 },
    { nom: "Charlie", age: 30 }
];

Exercice 3 : Flatten Aplati le tableau [[1, 2], [3, [4, 5]], [6]] en [1, 2, 3, 4, 5, 6].