📊

LES TABLEAUX EN JAVASCRIPT

Version Ultra-Détaillée - Définitions & Explications Complètes

📖 1. INTRODUCTION AUX TABLEAUX

Définition : Un tableau (Array) est une structure de données qui permet de stocker une collection ordonnée d'éléments. Chaque élément est identifié par un index (position) commençant à 0.

Métaphore : Un tableau est comme une liste de courses :

Chaque élément est un article dans la liste.
Les articles sont numérotés (0, 1, 2, ...).
On peut ajouter des articles, supprimer des articles, ou modifier leur position.

Pourquoi les tableaux sont-ils importants ?

Ils permettent de stocker et organiser des collections de données.
Ils offrent des méthodes puissantes pour manipuler les données.
Ils sont partout en JavaScript (API, DOM, algorithmes).

🛠️ 2. CRÉATION DE TABLEAUX

2.1 Littéral de Tableau

Définition : Le littéral de tableau est la façon la plus simple et la plus courante de créer un tableau. On utilise des crochets [ ].

// Tableau vide

const vide = [];

// Tableau de nombres

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

// Tableau de chaînes

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

// Tableau mixte (différents types)

const mixte = [42, "texte", true, { nom: "Jean" }];

// Tableau de tableaux (matrice)

const matrice = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];

2.2 Constructeur Array()

Définition : On peut créer un tableau en utilisant le constructeur new Array(). Attention au comportement particulier avec un seul argument numérique.

// Tableau avec des éléments

const fruits = new Array("pomme", "banane", "orange");

// ⚠️ Piège : avec un seul nombre, cela crée un tableau de cette longueur

const longueur = new Array(5); // [empty x 5] (5 emplacements vides)

// Avec plusieurs arguments, cela crée un tableau avec ces valeurs

const avecValeurs = new Array(1, 2, 3); // [1, 2, 3]

Recommandation : Utilisez toujours le littéral [ ] pour créer des tableaux. C'est plus clair et évite les pièges du constructeur.

2.3 Array.from()

Définition : Array.from() est une méthode statique qui crée un tableau à partir d'un itérable ou d'un objet semblable à un tableau.

// Depuis une chaîne de caractères

const lettres = Array.from("Bonjour");

console.log(lettres); // ["B", "o", "n", "j", "o", "u", "r"]

// Avec une fonction de transformation (map)

const carres = Array.from([1, 2, 3, 4], x => x * x);

console.log(carres); // [1, 4, 9, 16]

// Créer un tableau de 5 éléments (1 à 5)

const nombres = Array.from({ length: 5 }, (_, i) => i + 1);

console.log(nombres); // [1, 2, 3, 4, 5]

🔍 3. ACCÈS ET MANIPULATION DE BASE

3.1 Accès aux Éléments

Définition : On accède à un élément d'un tableau en utilisant son index (position) entre crochets. L'index commence à 0.

const fruits = ["pomme", "banane", "orange", "kiwi"];

console.log(fruits[0]); // "pomme" (premier élément)

console.log(fruits[2]); // "orange" (troisième élément)

console.log(fruits[fruits.length - 1]); // "kiwi" (dernier élément)

console.log(fruits[10]); // undefined (index hors limites)

3.2 Propriété length

Définition : La propriété length retourne le nombre d'éléments dans le tableau. Elle peut aussi être modifiée pour tronquer ou agrandir un tableau.

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

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

// Tronquer le tableau

fruits.length = 2;

console.log(fruits); // ["pomme", "banane"]

3.3 Ajouter des Éléments

Méthodes :

push() : Ajoute un ou plusieurs éléments à la fin du tableau.
unshift() : Ajoute un ou plusieurs éléments au début du tableau.

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

// push() - ajoute à la fin

fruits.push("orange");

console.log(fruits); // ["pomme", "banane", "orange"]

// push() retourne la nouvelle longueur

const nouvelleLongueur = fruits.push("kiwi");

console.log(nouvelleLongueur); // 4

// unshift() - ajoute au début

fruits.unshift("fraise");

console.log(fruits); // ["fraise", "pomme", "banane", "orange", "kiwi"]

3.4 Supprimer des Éléments

Méthodes :

pop() : Supprime le dernier élément et le retourne.
shift() : Supprime le premier élément et le retourne.

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

// pop() - supprime le dernier élément

const dernier = fruits.pop();

console.log(dernier); // "orange"

console.log(fruits); // ["pomme", "banane"]

// shift() - supprime le premier élément

const premier = fruits.shift();

console.log(premier); // "pomme"

console.log(fruits); // ["banane"]

3.5 splice() - Ajouter/Supprimer/Remplacer

Définition : splice() est une méthode polyvalente qui permet d'ajouter, de supprimer ou de remplacer des éléments à n'importe quelle position.

Syntaxe : array.splice(start, deleteCount, ...items)

start : Index de départ.
deleteCount : Nombre d'éléments à supprimer.
...items : Éléments à ajouter (optionnel).

const fruits = ["pomme", "banane", "orange", "kiwi"];

// Supprimer 2 éléments à partir de l'index 1

const supprime = fruits.splice(1, 2);

console.log(supprime); // ["banane", "orange"]

console.log(fruits); // ["pomme", "kiwi"]

// Ajouter des éléments à l'index 1

fruits.splice(1, 0, "fraise", "mangue");

console.log(fruits); // ["pomme", "fraise", "mangue", "kiwi"]

// Remplacer à l'index 1

fruits.splice(1, 1, "cerise");

console.log(fruits); // ["pomme", "cerise", "mangue", "kiwi"]

3.6 slice() - Extraire une Partie

Définition : slice() retourne une copie superficielle d'une portion du tableau, sans modifier l'original.

Syntaxe : array.slice(start, end)

const fruits = ["pomme", "banane", "orange", "kiwi", "mangue"];

// Extraire les éléments de l'index 1 à 3 (exclu)

const sousTableau = fruits.slice(1, 4);

console.log(sousTableau); // ["banane", "orange", "kiwi"]

// Indices négatifs (à partir de la fin)

const derniers = fruits.slice(-2);

console.log(derniers); // ["kiwi", "mangue"]

// Copie complète du tableau

const copie = fruits.slice();

console.log(copie); // ["pomme", "banane", "orange", "kiwi", "mangue"]

🔄 4. MÉTHODES DE PARCOURS (ITÉRATION)

Définition : Les méthodes d'itération permettent de parcourir tous les éléments d'un tableau et d'appliquer une fonction à chaque élément. Ces méthodes sont modernes, puissantes et expriment clairement l'intention du code.

Métaphore : Ces méthodes sont comme des tapas roulantes dans une usine : chaque élément passe sur la tapis, subit une transformation (ou un contrôle), et sort de l'autre côté.

4.1 forEach() - Exécuter une Action

Définition : forEach() exécute une fonction sur chaque élément du tableau. Il ne retourne rien (undefined). On l'utilise pour des effets de bord (afficher, modifier une variable externe, etc.).

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

// Afficher chaque fruit

fruits.forEach(function(fruit) { console.log(fruit); });

// Affiche : "pomme", "banane", "orange"

// Avec fonction fléchée + index

fruits.forEach((fruit, index) => { console.log(`${index}: ${fruit}`); });

// Affiche : "0: pomme", "1: banane", "2: orange"

⚠️ Attention : forEach() ne peut pas être arrêté avec break (contrairement à la boucle for). Utilisez some() ou every() si vous avez besoin de sortir prématurément.

4.2 map() - Transformer Chaque Élément

Définition : map() crée un nouveau tableau en appliquant une transformation à chaque élément du tableau d'origine. Le tableau original n'est pas modifié.

Métaphore : map() est comme une machine à peindre : vous mettez des pommes d'un côté, elle les peint en rouge, et des pommes rouges sortent de l'autre côté.

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

// Doubler chaque nombre

const doubles = nombres.map(n => n * 2);

console.log(doubles); // [2, 4, 6, 8]

console.log(nombres); // [1, 2, 3, 4] (original inchangé)

// Transformer des objets

const personnes = [ { nom: "Jean", age: 30 }, { nom: "Marie", age: 25 } ];

const noms = personnes.map(p => p.nom);

console.log(noms); // ["Jean", "Marie"]

4.3 filter() - Filtrer les Éléments

Définition : filter() crée un nouveau tableau contenant uniquement les éléments qui satisfont une condition (fonction retournant true). Le tableau original n'est pas modifié.

Métaphore : filter() est comme un tamis : vous versez un mélange, seuls les éléments qui répondent au critère passent à travers.

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

// Filtrer les nombres pairs

const pairs = nombres.filter(n => n % 2 === 0);

console.log(pairs); // [2, 4, 6]

// Filtrer des objets

const personnes = [ { nom: "Jean", age: 30 }, { nom: "Marie", age: 17 }, { nom: "Pierre", age: 25 } ];

const adultes = personnes.filter(p => p.age >= 18);

console.log(adultes); // [{nom: "Jean", age: 30}, {nom: "Pierre", age: 25}]

4.4 reduce() - Réduire à une Seule Valeur

Définition : reduce() est une méthode puissante qui réduit un tableau à une seule valeur (somme, produit, concaténation, etc.) en appliquant une fonction cumulativement.

Syntaxe : array.reduce((accumulateur, valeurCourante) => ..., valeurInitiale)

accumulateur : La valeur accumulée à chaque étape.
valeurCourante : L'élément actuel du tableau.
valeurInitiale : La valeur de départ de l'accumulateur.

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

// Somme des nombres

const somme = nombres.reduce((acc, n) => acc + n, 0);

console.log(somme); // 10

// Produit des nombres

const produit = nombres.reduce((acc, n) => acc * n, 1);

console.log(produit); // 24

// Concaténer des chaînes

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

const phrase = fruits.reduce((acc, fruit, index) => { if (index === 0) return fruit; return acc + ", " + fruit; });

console.log(phrase); // "pomme, banane, orange"

// Compter les occurrences

const mots = ["a", "b", "a", "c", "b", "a"];

const compteur = mots.reduce((acc, mot) => { acc[mot] = (acc[mot] || 0) + 1; return acc; }, {});

console.log(compteur); // { a: 3, b: 2, c: 1 }

4.5 some() et every() - Vérifier des Conditions

Définitions :

some() : Retourne true si au moins un élément satisfait la condition.
every() : Retourne true si tous les éléments satisfont la condition.

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

// some() - y a-t-il un nombre pair ?

const aPair = nombres.some(n => n % 2 === 0);

console.log(aPair); // true

// every() - tous les nombres sont-ils positifs ?

const tousPositifs = nombres.every(n => n > 0);

console.log(tousPositifs); // true

// every() - tous les nombres sont-ils pairs ?

const tousPairs = nombres.every(n => n % 2 === 0);

console.log(tousPairs); // false

4.6 find() et findIndex() - Trouver un Élément

Définitions :

find() : Retourne le premier élément qui satisfait la condition, ou undefined.
findIndex() : Retourne l'index du premier élément qui satisfait la condition, ou -1.

const personnes = [ { nom: "Jean", age: 30 }, { nom: "Marie", age: 17 }, { nom: "Pierre", age: 25 } ];

// find() - trouver la première personne majeure

const majeur = personnes.find(p => p.age >= 18);

console.log(majeur); // {nom: "Jean", age: 30}

// findIndex() - trouver l'index de la première personne majeure

const index = personnes.findIndex(p => p.age >= 18);

console.log(index); // 0

4.7 includes() - Vérifier la Présence

Définition : includes() vérifie si un tableau contient une valeur spécifique. Retourne true ou false.

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

console.log(fruits.includes("banane")); // true

console.log(fruits.includes("kiwi")); // false

console.log(fruits.includes("banane", 2)); // false (recherche à partir de l'index 2)

4.8 sort() - Trier les Éléments

Définition : sort() trie les éléments du tableau en place (modifie le tableau original) et retourne le tableau trié.

⚠️ Attention : Par défaut, sort() convertit les éléments en chaînes et les trie comme des textes. Cela peut donner des résultats surprenants avec des nombres.

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

// ❌ Tri par défaut (comme des chaînes)

nombres.sort();

console.log(nombres); // [1, 1, 3, 4, 5, 9] (ça marche ici par hasard)

// ✅ Tri numérique (fonction de comparaison)

const nombres2 = [10, 2, 30, 4];

nombres2.sort((a, b) => a - b);

console.log(nombres2); // [2, 4, 10, 30] (ascendant)

nombres2.sort((a, b) => b - a);

console.log(nombres2); // [30, 10, 4, 2] (descendant)

// Trier des objets

const personnes = [ { nom: "Jean", age: 30 }, { nom: "Marie", age: 25 }, { nom: "Pierre", age: 35 } ];

personnes.sort((a, b) => a.age - b.age);

console.log(personnes);

// [ {nom: "Marie", age: 25}, {nom: "Jean", age: 30}, {nom: "Pierre", age: 35} ]

⛓️ 5. CHAÎNAGE DE MÉTHODES

Définition : Le chaînage de méthodes consiste à enchaîner plusieurs méthodes sur un tableau, car chaque méthode retourne un tableau (ou une valeur) sur lequel on peut appliquer la méthode suivante.

Métaphore : C'est comme une chaîne de montage : chaque étape transforme le produit et le passe à l'étape suivante.

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

// Exemple : filtrer les pairs, doubler, puis sommer

const resultat = nombres .filter(n => n % 2 === 0) // [2, 4, 6, 8] .map(n => n * 2) // [4, 8, 12, 16] .reduce((acc, n) => acc + n, 0); // 40

console.log(resultat); // 40

// Exemple avec des objets

const personnes = [ { nom: "Jean", age: 30 }, { nom: "Marie", age: 17 }, { nom: "Pierre", age: 25 }, { nom: "Sophie", age: 19 } ];

const nomsAdultes = personnes .filter(p => p.age >= 18) .map(p => p.nom) .sort();

console.log(nomsAdultes); // ["Jean", "Pierre", "Sophie"]

📊 6. RÉSUMÉ - LES TABLEAUX

Méthode	Description	Retour	Modifie original
push()	Ajoute à la fin	Nouvelle longueur	✅ Oui
pop()	Supprime le dernier	Élément supprimé	✅ Oui
unshift()	Ajoute au début	Nouvelle longueur	✅ Oui
shift()	Supprime le premier	Élément supprimé	✅ Oui
splice()	Ajoute/Supprime/Remplace	Éléments supprimés	✅ Oui
slice()	Extrait une portion	Nouveau tableau	❌ Non
forEach()	Exécute une action	undefined	❌ Non
map()	Transforme chaque élément	Nouveau tableau	❌ Non
filter()	Filtre les éléments	Nouveau tableau	❌ Non
reduce()	Réduit à une valeur	Valeur accumulée	❌ Non
some()	Vérifie si un élément correspond	boolean	❌ Non
every()	Vérifie si tous correspondent	boolean	❌ Non
find()	Trouve un élément	Premier élément / undefined	❌ Non
findIndex()	Trouve l'index d'un élément	Index / -1	❌ Non
includes()	Vérifie la présence	boolean	❌ Non
sort()	Trie le tableau	Tableau trié	✅ Oui

┌─────────────────────────────────────────────────────────────────┐

│ TABLEAUX - RÉCAPITULATIF │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ CRÉATION │ │

│ │ [ ] → new Array() → Array.from() │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ MODIFICATION │ │

│ │ push/pop (fin) → unshift/shift (début) → splice │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ LECTURE │ │

│ │ [index] → length → slice │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ ITÉRATION │ │

│ │ forEach → map → filter → reduce │ │

│ │ some → every → find → findIndex │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ CHAÎNAGE │ │

│ │ array.filter().map().reduce() → résultat final │ │

│ └─────────────────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────────────────┘

Les tableaux

LES TABLEAUX EN JAVASCRIPT

📖 1. INTRODUCTION AUX TABLEAUX

🛠️ 2. CRÉATION DE TABLEAUX

2.1 Littéral de Tableau

2.2 Constructeur Array()

2.3 Array.from()

🔍 3. ACCÈS ET MANIPULATION DE BASE

3.1 Accès aux Éléments

3.2 Propriété length

3.3 Ajouter des Éléments

3.4 Supprimer des Éléments

3.5 splice() - Ajouter/Supprimer/Remplacer

3.6 slice() - Extraire une Partie

🔄 4. MÉTHODES DE PARCOURS (ITÉRATION)

4.1 forEach() - Exécuter une Action

4.2 map() - Transformer Chaque Élément

4.3 filter() - Filtrer les Éléments

4.4 reduce() - Réduire à une Seule Valeur

4.5 some() et every() - Vérifier des Conditions

4.6 find() et findIndex() - Trouver un Élément

4.7 includes() - Vérifier la Présence

4.8 sort() - Trier les Éléments

⛓️ 5. CHAÎNAGE DE MÉTHODES

📊 6. RÉSUMÉ - LES TABLEAUX