Tableaux JavaScript : données ordonnées par index

Un tableau JavaScript stocke une collection ordonnée de valeurs indexées par des entiers. Utilisez les tableaux quand l’ordre compte : listes, files, ou toute donnée où la position a du sens. L’accès par index est immédiat (O(1)) quelle que soit la taille du tableau, et length suit automatiquement la taille.

Exemple de tableau JavaScript pour créer et accéder aux données

Sortie :

rouge
3
[
  "rouge",
  "vert",
  "bleu",
  "jaune"
]

Comment cet exemple fonctionne

1. ["rouge", "vert", "bleu"] crée un tableau de trois éléments avec la syntaxe littérale entre crochets, la manière standard de définir un tableau JavaScript avec des valeurs initiales.
2. couleurs[0] lit le premier élément. Les tableaux utilisent une indexation à base zéro : l’index 0 est le premier élément, 1 le deuxième, etc.
3. couleurs.length renvoie le nombre d’éléments. Cette valeur se met à jour automatiquement quand des éléments sont ajoutés ou supprimés.
4. couleurs.push("jaune") ajoute un élément à la fin. Le tableau d’origine est modifié sur place.

Qu’est-ce qu’un tableau JavaScript ?

Les tableaux JavaScript sont des objets optimisés pour les index numériques : la propriété length se met à jour automatiquement quand vous ajoutez ou supprimez des éléments, et les méthodes intégrées comme map, filter, reduce et forEach itèrent dans l’ordre des index. Utilisez Array.isArray(value) pour détecter un tableau de façon fiable, car typeof [] renvoie "object".

Erreurs courantes avec les tableaux JavaScript

Utiliser new Array(n) pour créer un tableau à un seul élément.

Faux :

const elements = new Array(3); // 3 emplacements vides, pas [3]

Correct :

const elements = [3]; // tableau contenant le nombre 3

Un seul argument numérique définit length et crée des emplacements vides, pas un élément.

Penser que les tableaux clairsemés sont entièrement parcourus.

Faux :

const t = Array(3).map((_, i) => i); // [empty × 3]

Correct :

const t = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

map ignore les emplacements vides. Array.from crée des éléments définis, donc le callback s’exécute pour chaque index.

Méthodes de tableau mutantes vs non mutantes

ES2023 a ajouté toReversed(), toSorted(), toSpliced() et with() : des versions qui ne modifient pas le tableau, contrairement à leurs équivalents en place. Si vous avez besoin de conserver le tableau d’origine tout en obtenant un ordre trié, préférez toSorted() à sort().

Considérations de performance

push et pop opèrent en fin de tableau en O(1). shift et unshift réindexent chaque élément, ce qui les rend O(n). Dans les boucles critiques, évitez les opérations en tête sur de grands tableaux.

Plus d’exemples

Tableau de tableaux : accéder à des données imbriquées :

const matrice = [[1, 2], [3, 4], [5, 6]];
console.log(matrice[1][0]); // 3

Chaque élément est lui-même un tableau. Un tableau JavaScript de tableaux est une façon simple de modéliser une grille, et la double indexation [ligne][colonne] atteint les valeurs internes.

Pile avec push et pop :

const pile = [10, 20, 30];
pile.push(40);
console.log(pile.at(-1)); // 40
pile.pop();
console.log(pile);        // [ 10, 20, 30 ]

push ajoute à la fin, pop retire de la fin, les deux en O(1). at(-1) lit le dernier élément sans connaître la longueur.

Quand utiliser les tableaux JavaScript

• Collections ordonnées où l’accès par position est important (listes, files, piles).
• Toute séquence qui doit grandir ou rétrécir : push/pop pour une pile, push/shift pour une file.
• Données groupées modélisées comme un tableau de tableaux (lignes, colonnes, matrice).
• N’utilisez pas les tableaux pour la recherche clé-valeur : utilisez plutôt Map ou un objet simple.
• N’utilisez pas les tableaux quand chaque élément doit être unique : utilisez Set.

FAQ

Comment créer un tableau JavaScript avec des valeurs initiales ?

Utilisez la notation entre crochets : const couleurs = ["rouge", "vert", "bleu"]. C’est la syntaxe littérale recommandée. Array.of(1, 2, 3) fonctionne aussi, mais reste rarement nécessaire en dehors de code polymorphe où new Array(n) serait ambigu.

Quelles méthodes de tableau JavaScript modifient le tableau d’origine ?

push, pop, shift, unshift, splice, sort, reverse et fill modifient le tableau sur place. Les alternatives modernes comme toSorted, toReversed et toSpliced (ES2023) renvoient de nouveaux tableaux sans toucher à l’original.

Comment vérifier si une valeur est un tableau en JavaScript ?

Appelez Array.isArray(value). Cette méthode fonctionne entre iframes et realms, contrairement à instanceof Array, qui échoue quand le tableau a été créé dans un contexte d’exécution différent.