Tableaux en JavaScript

📊 Le cours : travailler sur des listes

Un tableau JavaScript est ce que Python appelle une liste : ordonné, de taille variable, et ses éléments peuvent être de types différents. Les notions générales (indices, parcours, copies) sont celles du chapitre Tableaux 1D ; ici, voici leur version JavaScript.

Lire et sortir des limites

Contrairement au C ou à Java, lire un indice qui n'existe pas ne provoque aucune erreur : on obtient undefined. Et écrire à un indice supérieur à la taille agrandit le tableau en laissant des « trous ». t.at(-1) donne le dernier élément (les indices négatifs sont acceptés par at).

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

console.log(t[5], t.at(-1), t.length);
t[5] = "f";
console.log(t.length);

undefined c 3
6

Ajouter et retirer

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

const retires = t.splice(1, 2);      // retire 2 éléments à partir de l'indice 1
console.log(t.join(" "), "|", retires.join(" "));
console.log(t.slice(0, 2).join(" "));

1 4 5 | 2 3
1 4

Parcourir

for (const x of t) pour les valeurs, un for classique quand il faut l'indice, t.forEach((x, i) => …) pour appeler une fonction par élément (voir Boucles).

Transformer : map, filter, reduce

Ces trois méthodes ne modifient pas le tableau d'origine : elles en renvoient un nouveau (ou une valeur). map produit un tableau de même taille, filter un tableau plus court, reduce combine les éléments grâce à un accumulateur dont on donne la valeur de départ (le second argument). On les enchaîne : notes.filter(…).map(…).

Pour chercher : find renvoie le premier élément qui passe le test (ou undefined), findIndex son indice (ou -1), some répond « au moins un ? » et every « tous ? ».

const ages = [14, 17, 19, 25];

console.log(ages.find((a) => a >= 18));
console.log(ages.some((a) => a < 16), ages.every((a) => a >= 14));
console.log(ages.findIndex((a) => a > 100));

19
true true
-1

Trier : attention au tri par défaut

sort() sans argument trie comme du texte : 10 vient avant 9 parce que "1" précède "9". Pour des nombres, donne une fonction de comparaison (a, b) => a - b (négative : a avant b). Pour du texte avec accents, a.localeCompare(b). Et sort modifie le tableau : trie une copie ([...t].sort(…)) si tu veux garder l'original.

const nombres = [10, 9, 1, 100];

console.log([...nombres].sort().join(" "));
console.log([...nombres].sort((a, b) => a - b).join(" "));

const mots = ["éléphant", "zèbre", "abeille"];
console.log(mots.sort((a, b) => a.localeCompare(b)).join(" "));

1 10 100 9
1 9 10 100
abeille éléphant zèbre

Copier : référence ou vraie copie ?

const b = a; ne copie pas : a et b désignent le même tableau (alias). Pour une copie : [...a], a.slice() ou Array.from(a). Ces copies sont superficielles : si le tableau contient des tableaux ou des objets, ceux-ci restent partagés. structuredClone(a) fait une copie complète. C'est l'*aliasing* de Aliasing et copies.

const a = [1, 2, 3];
const alias = a;
const copie = [...a];

alias.push(4);
console.log(a.length, copie.length);

4 3

Décomposition et spread

La décomposition ([x, y] = tableau) extrait des éléments dans des variables, ...reste ramasse les suivants, et permet d'échanger deux variables sans variable temporaire. L'opérateur spread ...t « déplie » un tableau, par exemple pour passer ses éléments comme arguments.

const [premier, deuxieme, ...reste] = [10, 20, 30, 40];
let a = 1;
let b = 2;
[a, b] = [b, a];

console.log(premier, deuxieme, reste.join(","), a, b);
console.log(Math.max(...[3, 9, 2]));

10 20 30,40 2 1
9

Tableaux à deux dimensions

Un tableau 2D est un tableau de tableaux : grille[ligne][colonne]. Pour le créer, ne remplis jamais avec Array(n).fill(Array(m).fill(0)) : le même tableau-ligne est alors partagé par toutes les lignes. Utilise Array.from avec une fonction qui construit une ligne neuve à chaque fois (voir Construction sans piège).

const bon = Array.from({ length: 2 }, () => Array(3).fill(0));
const piege = Array(2).fill(Array(3).fill(0));

bon[0][1] = 5;
piege[0][1] = 5;
console.log(JSON.stringify(bon));
console.log(JSON.stringify(piege));

[[0,5,0],[0,0,0]]
[[0,5,0],[0,5,0]]

⚠️ Erreurs fréquentes

Oublier la fonction de comparaison de sort

[10, 9, 1].sort()                  // [1, 10, 9] : tri comme du texte

[10, 9, 1].sort((a, b) => a - b)   // [1, 9, 10]

Croire que const protège le contenu

const t = [1, 2]; interdit t = [3], mais pas t.push(3). La variable pointe toujours vers le même tableau, dont le contenu change.

Un map sans return

const doubles = t.map((x) => { x * 2; });   // [undefined, undefined…]

const doubles = t.map((x) => x * 2);          // ou { return x * 2; }

Chercher un objet ou un tableau avec includes ou indexOf

[[1, 2]].includes([1, 2]) est false : on compare des références, pas des contenus. Cherche avec some et une comparaison explicite, ou stocke des identifiants.

delete et length pour vider ou retirer

delete t[1] laisse un trou sans réduire la taille. Retire avec splice(1, 1) ; vide avec t.length = 0 ou t.splice(0).

Array(3) et map

Array(3) crée 3 cases vides (ni undefined ni valeur) que map et forEach sautent. Utilise Array(3).fill(0) ou Array.from({ length: 3 }, (_, i) => i).

Modifier le tableau pendant qu'on le parcourt

Retirer des éléments dans un forEach fait sauter le suivant. Construis plutôt un nouveau tableau avec filter.

📋 Aide-mémoire

• [a, b, c], t[i], t.length, t.at(-1) ; hors limites : undefined, jamais d'erreur.
• Modifient : push pop shift unshift splice sort reverse fill ; ne modifient pas : map filter slice concat join includes indexOf.
• map transforme, filter garde, reduce(f, départ) combine, find / findIndex / some / every cherchent.
• sort((a, b) => a - b) pour des nombres, localeCompare pour du texte ; sans fonction, le tri est alphabétique.
• b = a = alias ; copie : [...a] ou slice() (superficielle), structuredClone(a) (complète).
• Tableau 2D : Array.from({ length: n }, () => Array(m).fill(0)), jamais Array(n).fill(Array(m).fill(0)).