Le tableau est la structure la plus utilisée du langage. Liste de produits, résultats de recherche, lignes d'un panier : dès qu'il y a plusieurs choses du même genre, il y a un tableau.
Sa particularité en JavaScript est le nombre de méthodes qu'il embarque : bien choisies, elles remplacent la quasi-totalité des boucles écrites à la main.
Définition
Un Array est une liste ordonnée de valeurs accessibles par leur position. La première occupe l'index 0, et length donne le nombre d'éléments.
Un tableau n'impose aucun type et peut mélanger nombres, chaînes et objets, mais une liste dont les éléments n'ont pas la même forme se manipule mal.
const prix = [19, 49, 99];
console.log(prix.length); // 3
console.log(prix[0]); // 19
console.log(prix.at(-1)); // 99, le dernier sans calcul d'index
prix.push(149); // ajoute à la fin
console.log(prix); // [19, 49, 99, 149]Les méthodes qui remplacent les boucles
Quatre méthodes couvrent la majorité des besoins. Elles prennent toutes une fonction en argument, appelée sur chaque élément.
| Méthode | Ce qu'elle renvoie | Usage |
|---|---|---|
map | Un tableau de même taille | Transformer chaque élément |
| Array.filter() | Un tableau plus court | Ne garder que certains éléments |
| Array.reduce() | Une valeur unique | Additionner, regrouper, agréger |
| Array.find() | Un élément ou undefined | Chercher le premier qui correspond |
const prix = [19, 49, 99];
console.log(prix.map((p) => p * 2)); // [38, 98, 198]
console.log(prix.filter((p) => p > 20)); // [49, 99]
console.log(prix.reduce((t, p) => t + p, 0)); // 167
console.log(prix.find((p) => p > 20)); // 49map et Array.filter() ne modifient pas le tableau de départ, elles en renvoient un nouveau. Array.forEach() et Array.some() complètent la famille, pour parcourir ou répondre par oui ou non.
Attention à celles qui modifient sur place : sort, reverse, splice et push changent le tableau existant. Sur une donnée partagée, copiez d'abord.
Copier un tableau
Un tableau est manipulé par référence. Affecter une variable à une autre ne duplique rien, les deux noms désignent la même liste.
const original = [1, 2];
const alias = original;
alias.push(3);
console.log(original); // [1, 2, 3] : même tableau
const copie = [...original]; // copie indépendante
copie.push(4);
console.log(original.length); // 3Le Spread (...) suffit pour une liste de valeurs simples. Si le tableau contient des objets, la copie reste superficielle : les objets internes sont toujours partagés.
Questions fréquentes
Comment vérifier qu'une valeur est bien un tableau ?
Avec Array.isArray(valeur), et uniquement avec elle. L'opérateur typeof renvoie "object" sur un tableau comme sur n'importe quel objet, ce qui ne permet pas de les distinguer.
Pourquoi [10, 9, 1].sort() renvoie-t-il [1, 10, 9] ?
Parce que sort convertit les éléments en chaînes avant de comparer, et "10" vient avant "9" dans l'ordre alphabétique. Pour un tri numérique, passez une fonction de comparaison : sort((a, b) => a - b). Le comportement par défaut est un cas classique de Coercition (conversion de type) implicite.
Faut-il encore utiliser une boucle for ?
Oui, dans deux cas : interrompre le parcours en cours de route, ce que map ne permet pas, et la performance sur de très grands volumes. Pour tout le reste, for et of restent lisibles mais les méthodes disent mieux l'intention. Notre formation JavaScript fait justement passer du raisonnement en boucles à celui en transformations.