Tableaux

C'est quoi un tableau ?

Jusqu'ici, une variable contenait une seule valeur. Mais comment stocker une liste ? Une liste de courses, des scores, un panier ?

Un tableau (array en anglais), c'est une variable qui contient plusieurs valeurs dans un ordre précis. Imagine une étagère avec des cases numérotées.

JavaScript

// Créer un tableau avec des crochets [ ]
const fruits = ["pomme", "banane", "cerise"];
const scores = [42, 87, 15, 63];
const mixte  = ["Alice", 28, true]; // types différents, c'est possible

Accéder aux éléments

Chaque élément a un index — sa position dans le tableau. Attention : on commence à compter à partir de 0, pas 1.

JavaScript

const fruits = ["pomme", "banane", "cerise"];
//               index 0    index 1    index 2

console.log(fruits[0]); // pomme
console.log(fruits[1]); // banane
console.log(fruits[2]); // cerise
console.log(fruits[3]); // undefined — n'existe pas

// Nombre d'éléments
console.log(fruits.length); // 3

// Dernier élément (astuce)
console.log(fruits[fruits.length - 1]); // cerise

Modifier un tableau

Même avec const, on peut modifier le contenu du tableau. const empêche de remplacer le tableau, pas de le modifier.

JavaScript

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

// Ajouter à la fin
fruits.push("cerise");
console.log(fruits); // ["pomme", "banane", "cerise"]

// Supprimer le dernier élément
const dernier = fruits.pop();
console.log(dernier); // cerise
console.log(fruits);  // ["pomme", "banane"]

// Ajouter au début
fruits.unshift("abricot");
console.log(fruits); // ["abricot", "pomme", "banane"]

// Supprimer le premier élément
fruits.shift();
console.log(fruits); // ["pomme", "banane"]

// Modifier un élément précis
fruits[0] = "fraise";
console.log(fruits); // ["fraise", "banane"]

Parcourir un tableau

JavaScript

const prenoms = ["Alice", "Bob", "Charlie"];

// forEach — la méthode la plus claire
prenoms.forEach(function(prenom) {
  console.log(`Bonjour, ${prenom} !`);
});

// for...of — simple et lisible
for (const prenom of prenoms) {
  console.log(prenom);
}

// for classique avec index
for (let i = 0; i < prenoms.length; i++) {
  console.log(`${i} : ${prenoms[i]}`);
}

Méthodes utiles

JavaScript

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

// Chercher un élément
console.log(nombres.includes(4));   // true
console.log(nombres.indexOf(1));    // 1 (premier index trouvé)

// Trier
const trie = [...nombres].sort((a, b) => a - b);
console.log(trie); // [1, 1, 3, 4, 5, 9]

// Filtrer — garder seulement les éléments > 3
const grands = nombres.filter((n) => n > 3);
console.log(grands); // [4, 5, 9]

// Transformer — multiplier chaque élément par 2
const doubles = nombres.map((n) => n * 2);
console.log(doubles); // [6, 2, 8, 2, 10, 18]

// Joindre en texte
console.log(nombres.join(" - ")); // "3 - 1 - 4 - 1 - 5 - 9"

Essaie dans le playground

Playground — Tableaux

Sortie

Lance le code avec le bouton ▶ Exécuter

// À retenir

Tableau = liste ordonnée, créée avec [ ]
Les index commencent à 0 : premier élément = tableau[0]
tableau.length → nombre d'éléments
push() ajoute à la fin, pop() supprime le dernier
unshift() ajoute au début, shift() supprime le premier
forEach() ou for...of pour parcourir
filter() filtre, map() transforme, includes() cherche