Stocker plusieurs valeurs dans une seule variable
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Comprendre ce qu'est un tableau
Pourquoi on en a besoin
2. Créer et accéder aux éléments
Par index (attention : commence à 0!)
3. Maîtriser .length et les méthodes
push, pop, shift, unshift
4. Itérer sur un tableau
for et for...of
Pourquoi les tableaux ?
Le problème des 30 variables individuelles
Créer un tableau, accéder aux éléments
Par index (attention : commence à 0!)
La propriété .length et les 4 méthodes de base
push, pop, shift, unshift
Itérer avec for classique et for...of
Quand utiliser lequel
Live coding : construire une file d'attente
Avec un tableau
Stocker les noms de 30 étudiants
// Sans tableau... ça devient rapidement impossible!
let etudiant1 = "Alice";
let etudiant2 = "Bob";
let etudiant3 = "Charlie";
...
let etudiant30 = "Zoé";
// 30 variables! Comment les manipuler?
Problèmes :
Impossible de boucler facilement
Comment trouver un étudiant?
Comment ajouter/supprimer?
Une seule variable pour stocker plusieurs valeurs
Un tableau = liste ordonnée de valeurs
Chaque valeur a une position (index)
let etudiants = ["Alice", "Bob", "Charlie", ...];
Une seule variable pour 30 noms!
Méthode 1 : Crochets [] (la plus courante)
let fruits = ["pomme", "banane", "orange"];
Méthode 2 : new Array()
let fruits = new Array("pomme", "banane", "orange");
Recommandation : Utilisez toujours les crochets []
Plus court, plus lisible, plus performant
let fruits = ["pomme", "banane", "orange"];
console.log(fruits[0]); // "pomme"
console.log(fruits[1]); // "banane"
console.log(fruits[2]); // "orange"
fruits[0]
1er élément
"pomme"
fruits[1]
2ème élément
"banane"
fruits[2]
3ème élément
"orange"
L'erreur #1 chez les débutants
Le premier élément est à l'index 0
Le deuxième élément est à l'index 1
Piège classique :
Penser que fruits[1] est le 1er élément
Non! C'est le 2ème! fruits[0] est le 1er!
arr[2] n'est PAS le 2ème élément!
let nombres = [10, 20, 30, 40];
console.log(nombres[2]); // Beaucoup pensent que c'est 20...
// Mais c'est 30! (index 2 = 3ème élément)
nombres[2]
Index 2
30
3ème élément
nombres[1]
Index 1
20
2ème élément
Retourne le nombre d'éléments dans le tableau
let fruits = ["pomme", "banane", "orange"];
console.log(fruits.length); // 3
let vide = [];
console.log(vide.length); // 0
Utile pour les boucles et validations
if (fruits.length > 0) { ... }
.length retourne le nombre d'éléments, PAS le dernier index!
let fruits = ["pomme", "banane", "orange"];
console.log(fruits.length); // 3 éléments
console.log(fruits[2]); // Dernier élément = index 2
// fruits[3] = undefined! (pas d'élément à l'index 3)
Règle :
Dernier index = length - 1
La formule magique
array[array.length - 1]
let fruits = ["pomme", "banane", "orange"];
let dernier = fruits[fruits.length - 1];
// dernier = "orange"
Ajouter
push()
Ajouter à la fin (très courant)
unshift()
Ajouter au début (rare)
Retirer
pop()
Retirer à la fin (courant)
shift()
Retirer au début (rare)
Moyenne d'utilisation :
push/pop = 80% des cas | shift/unshift = 20% des cas
La méthode la plus courante
let fruits = ["pomme", "banane"];
fruits.push("orange");
// fruits = ["pomme", "banane", "orange"]
fruits.push("fraise", "kiwi");
// fruits = ["pomme", "banane", "orange", "fraise", "kiwi"]
push() retourne la nouvelle longueur
let nouvelleLongueur = fruits.push("ananas"); // 6
Retire et retourne le dernier élément
let fruits = ["pomme", "banane", "orange"];
let dernier = fruits.pop();
// dernier = "orange"
// fruits = ["pomme", "banane"]
Utilisation typique : File d'attente (LIFO)
Last In, First Out - Dernier arrivé, premier servi
Plus rare mais parfois utile
let fruits = ["pomme", "banane"];
fruits.unshift("orange");
// fruits = ["orange", "pomme", "banane"]
fruits.unshift("fraise", "kiwi");
// fruits = ["fraise", "kiwi", "orange", "pomme", "banane"]
Attention : Moins performant que push()
Doit décaler tous les éléments existants
Retire et retourne le premier élément
let fruits = ["pomme", "banane", "orange"];
let premier = fruits.shift();
// premier = "pomme"
// fruits = ["banane", "orange"]
Utilisation typique : Queue (FIFO)
First In, First Out - Premier arrivé, premier servi
push()
Ajouter à la fin
[a, b].push(c) // [a, b, c]
pop()
Retirer à la fin
[a, b, c].pop() // [a, b]
unshift()
Ajouter au début
[a, b].unshift(c) // [c, a, b]
shift()
Retirer au début
[a, b, c].shift() // [b, c]
push/pop = 80% des cas | shift/unshift = 20% des cas
Idéal pour connaître la position de chaque élément
let fruits = ["pomme", "banane", "orange"];
for (let i = 0; i < fruits.length; i++) {
console.log("Élément", i, "=", fruits[i]);
}
// Résultat :
Élément 0 = pomme
Élément 1 = banane
Élément 2 = orange
Quand on n'a pas besoin de la position
let fruits = ["pomme", "banane", "orange"];
for (let fruit of fruits) {
console.log(fruit);
}
// Résultat :
pomme
banane
orange
Plus simple, plus lisible, moins d'erreurs!
for classique
Quand tu as besoin de l'index
× Modifier un élément spécifique
× Afficher la position
× Comparer avec l'index
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
for...of
Quand tu veux juste les valeurs
× Afficher tous les éléments
× Calculer une somme
× Filtrer des éléments
for (let element of arr) {
console.log(element);
}
Recommandation : Commencez avec for...of, utilisez for seulement si nécessaire
Ne JAMAIS utiliser for...in pour les tableaux!
for...in
POUR LES OBJETS
Retourne les clés/propriétés
for...of
POUR LES TABLEAUX
Retourne les valeurs
Le piège du `<=` au lieu de `<`
let fruits = ["pomme", "banane", "orange"];
// ERREUR!
for (let i = 0; i <= fruits.length; i++) {
console.log(fruits[i]); // fruits[3] = undefined!
}
Solution : Utiliser `<` pas `<=`
for (let i = 0; i < fruits.length; i++) { ... }
1. Confondre index et valeur
arr[2] n'est PAS le 2ème élément, c'est le 3ème!
2. Oublier que .length n'est pas le dernier index
Dernier index = length - 1
3. Utiliser for...in au lieu de for...of
for...in = pour les objets | for...of = pour les tableaux
Mémorisez ces 3 pièges - ils représentent 90% des erreurs débutants!
Construire une file d'attente avec un tableau
File d'attente = FIFO
First In, First Out
On utilise push() pour ajouter
et shift() pour retirer
let file = [];
// Ajouter des personnes
file.push("Alice"); // ["Alice"]
file.push("Bob"); // ["Alice", "Bob"]
file.push("Charlie"); // ["Alice", "Bob", "Charlie"]
// Servir la première personne
let serve = file.shift(); // "Alice"
// file = ["Bob", "Charlie"]
Parfait pour : queues, tâches, messages
1. Créer un tableau de nombres de 1 à 10
Utiliser une boucle pour le remplir
2. Afficher chaque nombre avec for...of
Plus lisible que for classique
3. Ajouter 11, 12, 13 avec push()
Vérifier la nouvelle longueur
4. Créer une file d'attente
Ajouter 3 noms, puis servir le premier avec shift()
Index commence à 0!
arr[0] = 1er élément | arr[2] = 3ème élément
.length = nombre d'éléments
Dernier index = length - 1
push/pop = 80% des cas
shift/unshift = plus rares
for...of > for (quand possible)
Plus lisible, moins d'erreurs
Les tableaux sont la base de la manipulation de données
Prochaine leçon : Les objets JavaScript