Les tableaux JavaScript

Introduction aux tableaux JavaScript

Un array JavaScript est une collection de valeurs ordonnée et indexée par des entiers. Contrairement aux objets, qui stockent des propriétés nommées sans ordre garanti, un array conserve ses éléments dans une séquence précise et permet d'accéder à n'importe quel élément par sa position (son index). Les index commencent à 0, donc le premier élément se trouve à l'index 0, le deuxième à l'index 1, et ainsi de suite.

Les arrays sont l'une des structures de données les plus utilisées du langage, car ils peuvent contenir un mélange de n'importe quel type de valeur — nombres, strings, booleans, objects, et même d'autres arrays — et ils grandissent ou rétrécissent automatiquement lorsque vous ajoutez ou supprimez des éléments. Cette page explique comment créer des arrays, modifier leur contenu, les parcourir en boucle, les transformer et les rechercher, ainsi que les pratiques qui rendent le code utilisant des arrays lisible.

Créer et initialiser des arrays

La façon la plus courante de créer un array est la syntaxe de littéral de tableau — une liste séparée par des virgules entre crochets :

let fruits = ["Apple", "Banana", "Cherry"];

Vous pouvez également utiliser le constructeur new Array(), bien qu'il soit rarement utilisé et présente un cas particulier déroutant : lorsque vous passez un seul nombre, il définit la longueur de l'array plutôt que d'ajouter ce nombre comme élément.

En raison de ce piège, préférez la syntaxe littérale pour tout, sauf pour pré-dimensionner délibérément un array.

Accéder aux éléments et à la longueur

Lisez ou remplacez un élément par son index, et lisez le nombre total d'éléments avec la propriété length. Assigner une valeur à un index au-delà de la fin actuelle étend l'array.

Ajouter et supprimer des éléments

Quatre méthodes couvrent les deux extrémités d'un array. Notez la valeur que chacune retourne — c'est une source d'erreurs fréquente.

• push() — ajoute un ou plusieurs éléments à la fin et retourne la nouvelle longueur.

• pop() — supprime le dernier élément et retourne cet élément.

• unshift() — ajoute un ou plusieurs éléments au début et retourne la nouvelle longueur.

• shift() — supprime le premier élément et retourne cet élément.

Insérer et supprimer au milieu avec splice()

push/pop/shift/unshift ne touchent que les extrémités. Pour ajouter, supprimer ou remplacer des éléments n'importe où, utilisez splice(start, deleteCount, ...itemsToInsert). Cette méthode modifie l'array en place et retourne un array des éléments supprimés.

Copier une section avec slice()

slice(start, end) retourne une copie superficielle d'une partie de l'array sans modifier l'original. L'index end n'est pas inclus.

Parcourir les éléments

Il existe plusieurs façons de boucler sur un array. Utilisez une boucle for...of ou forEach() lorsque vous souhaitez simplement accéder à chaque valeur ; utilisez les boucles basées sur les index uniquement lorsque vous avez réellement besoin de l'index. (Consultez le chapitre sur les boucles pour l'ensemble des formes de boucles.)

• for...of — la façon la plus simple de lire chaque valeur dans l'ordre.

• forEach() — exécute un callback une fois par élément, en recevant la valeur, l'index et l'array lui-même.

Transformer des arrays

Ces méthodes retournent un nouvel array (ou une valeur) au lieu de muter l'original, ce qui les rend idéales pour un traitement de données prévisible et chaînable.

• map() — construit un nouvel array en transformant chaque élément.

• filter() — construit un nouvel array avec uniquement les éléments qui satisfont un test.

• reduce() — réduit l'ensemble de l'array à une seule valeur en accumulant un résultat. Il prend un callback (accumulator, current) et une valeur initiale.

Comme map et filter retournent chacun un array, vous pouvez les chaîner :

Rechercher dans des arrays

• includes() — retourne true/false selon qu'une valeur existe. indexOf() retourne l'index de la valeur, ou -1 si elle n'est pas trouvée.

• find() et findIndex() — retournent le premier élément (ou son index) qui satisfait un callback de test.

Trier des arrays

sort() ordonne les éléments en place et retourne le même array.

Convertir des arrays en strings

La méthode join() combine tous les éléments en une seule string, en utilisant le séparateur que vous passez (une virgule par défaut).

Opérations avancées sur les arrays

Arrays multidimensionnels

Comme un array peut contenir d'autres arrays, vous pouvez modéliser des grilles et des matrices. Utilisez deux index — matrix[row][column] — pour accéder à une valeur interne.

L'opérateur de décomposition

L'opérateur de décomposition (...) développe un itérable — un array ou une string — en éléments individuels là où plusieurs valeurs sont attendues. C'est la façon moderne de combiner et copier des arrays. (Pour la forme de collecte associée, consultez paramètres rest et syntaxe spread.)

• Combiner des arrays :

• Copier un array (une copie superficielle, donc l'original n'est pas modifié) :

• Passer des éléments d'un array comme arguments de fonction :

La déstructuration de tableau

La déstructuration décompresse les valeurs d'un array dans des variables distinctes en une seule instruction. (La même idée s'applique aux objects — voir l'affectation par déstructuration.)

• Échanger des variables sans variable temporaire :

• Les valeurs par défaut comblent les positions manquantes :

Bonnes pratiques pour utiliser les arrays

• Déclarez avec const quand la référence de l'array ne changera pas. const empêche uniquement la réaffectation de la variable — vous pouvez toujours utiliser push, pop et modifier les éléments, car le contenu de l'array n'est pas figé.

• Préférez map, filter et reduce aux boucles manuelles pour transformer des données — ils décrivent l'intention et retournent de nouveaux arrays plutôt que de muter un état partagé.
• Utilisez l'opérateur de décomposition pour copier avant de muter lorsque vous souhaitez éviter de modifier l'array original.
• Passez toujours une fonction de comparaison à sort() pour les nombres.

Conclusion

Les arrays sont le socle de la manipulation de données en JavaScript : ordonnés, basés sur des index et de taille dynamique. Une fois que vous savez quelles méthodes mutent l'array (push, pop, splice, sort) par rapport à celles qui retournent de nouvelles valeurs (map, filter, slice, reduce), vous pouvez manipuler des collections en toute confiance. Combinez cela avec l'opérateur de décomposition et la déstructuration pour un code concis et lisible. Ensuite, explorez la référence complète des méthodes de tableau et comment les arrays se comparent aux objets JavaScript.

Exercices pratiques