En JavaScript, la notion de tableau, ou « Array », fait référence à un ensemble structuré de données. Il ne s'agit pas de créer un tableau à afficher sur une page web, comme le permet la balise HTML <table>, mais de stocker une liste d'éléments dans une variable unique, pour pouvoir les manipuler et les modifier facilement. Le tableau JavaScript est capable de contenir des éléments de tous types, chaînes de caractères et nombres notamment, et peut même contenir d'autres tableaux. Chaque élément a un identifiant, appelé indice, constitué d'un nombre entier. Pour récupérer un élément, il faut indiquer son indice ainsi que le nom du tableau qui le contient. Une grande variété de méthodes permet de parcourir le tableau, et de le faire évoluer : ajouter, remplacer ou encore supprimer des données.
Qu'est-ce qu'un tableau en JavaScript ?
Un tableau est un objet JavaScript qui stocke une liste de valeurs, de type chaînes ou nombres. On parle aussi d'objet Array. Chaque élément de la liste est indexé avec un indice : le premier élément a l'indice 0, et ainsi de suite. Créer un tableau facilite l'accès aux données et leur manipulation.
Quel est le rôle d'un tableau en JavaScript ?
Un tableau, en JavaScript, sert à regrouper des données dans une unique variable, pour y accéder et pour les modifier facilement.
Quand il faut gérer un grand volume de données, le tableau JavaScript permet au développeur d'économiser des lignes de code. A priori, une variable JavaScript ne peut contenir qu'une seule valeur : il faut donc écrire autant de variables qu'il y a de données. Quand elles sont nombreuses, le code devient très long et le risque d'erreurs est accru. L'objet Array est une variable particulière, car elle permet de stocker un nombre illimité de valeurs, sous forme de liste entre crochets où les éléments sont séparés par des virgules. Le tableau JavaScript fait ainsi de gagner du temps au moment de renseigner les données : nul besoin de créer une multitude de variables, une suffit.
Un tableau est capable de stocker tous types d'éléments. Contrairement aux autres langages de programmation, JavaScript permet de stocker, dans une unique variable, plusieurs types de données. La liste d'éléments du tableau peut ainsi contenir des chaînes de caractères, des nombres, des images ainsi que d'autres objets. Un tableau peut par exemple contenir un ou plusieurs autres tableaux.
Le rôle du tableau JavaScript est de regrouper des données, mais aussi de les parcourir, de les récupérer, d'ajouter et de supprimer des éléments. L'objet Array en effet possède de nombreuses méthodes pour faire évoluer la liste d'éléments contenus dans le tableau. L'indexation des éléments en outre est efficace pour accéder aux données de manière individuelle, en vue de les utiliser à divers effets : pour appeler un élément, il suffit d'indiquer son indice et le nom du tableau. À noter que les indices sont attribués automatiquement, sous forme de nombres entiers, en commençant par 0.
Illustration : l'exercice consiste à gérer des données de facturation.
- Le tableau permet d'enregistrer tous les produits, simplement séparés par des virgules : le code ne contient qu'une variable.
- Références des produits, nombre de produits et prix unitaires : toutes les données nécessaires à la facturation peuvent être regroupées dans le tableau, peu importe leur format, texte ou numérique.
- Pour éditer la facture, il suffit de renseigner les indices correspondant aux éléments de la liste. Si la facture doit inclure les trois premiers éléments, par exemple, il faut renseigner les indices 0, 1 et 2, et indiquer le nom du tableau.
- Des méthodes de l'objet Array permettent d'effectuer des actions utiles, telles que compter le nombre de produits ou calculer le prix total, par exemple.
Exemples de tableaux JavaScript
Exemple de code pour créer un tableau
Il n'est pas nécessaire d'écrire l'objet Array pour créer le tableau. Cette syntaxe permet de spécifier un tableau : let tableau1 = ['élément 1', 'élément 2', 'élément 3', 'élément 4', 'élément 5', 'élément 6']. Ici, « tableau1 » indique le nom du tableau et chaque élément de la liste est une valeur au format texte ou numérique. L'élément 1 a l'indice 0, l'élément 2 a l'indice 1, et ainsi de suite. Le nombre d'éléments n'est pas limité, et il peut varier.
Écrire cette ligne de code dans JavaScript permet de créer le tableau. Pour afficher les éléments, il faut utiliser la boucle for…of qui a pour fonction de parcourir le tableau. Illustration :
See the Pen tableau-javascript_afficher-elements by HubSpot France (@HubSpot-France) on CodePen.
Dans cet exemple, le tableau contient une liste de produits. La boucle for…of indique qu'il faut parcourir le tableau. La méthode getElementById permet au code HTML de récupérer les éléments à afficher. Ici, la balise <br> introduit un saut de ligne après chaque produit, pour les afficher sous forme de liste.
Exemple de code pour accéder à une valeur du tableau
Le tableau JavaScript est utile pour récupérer les valeurs individuellement, grâce à leur indice. Pour accéder à une valeur, il faut renseigner le nom du tableau et l'indice de l'élément.
Dans l'exemple qui suit, l'objectif est de visualiser des données client. Par souci de lisibilité, un tableau est créé pour chaque type de données : identifiant client, âge et région de domicile.
See the Pen tableau-javascript_recuperer-valeur by HubSpot France (@HubSpot-France) on CodePen.
Exemple de code pour connaître la taille d'un tableau
L'objet Array a une propriété length, qui compte le nombre d'éléments dans le tableau. Quand un tableau est très volumineux, la propriété length est utile pour calculer automatiquement le nombre de valeurs.
See the Pen tableau-javascript_propriete-length by HubSpot France (@HubSpot-France) on CodePen.
Exemples de méthodes Array
Les méthodes Array sont utiles pour modifier le tableau : ajouter et supprimer des éléments en début ou en fin de liste, par exemple.
Supprimer et ajouter un élément à la fin du tableau avec les méthodes pop() et push() :
See the Pen tableau-javascript_push-pop by HubSpot France (@HubSpot-France) on CodePen.
Supprimer et ajouter un élément au début du tableau avec les méthodes shift() et unshift() :
See the Pen tableau-javascript_unshif-shift by HubSpot France (@HubSpot-France) on CodePen.
La méthode Slice de l'objet Array permet de créer un nouveau tableau, qui contient une portion du tableau JavaScript d'origine, délimitée par les indices des éléments à extraire. Dans cet exemple, la copie du tableau des produits ne contient que les éléments indexés des indices 2 à 5 :
See the Pen tableau-javascript_methode-slice by HubSpot France (@HubSpot-France) on CodePen.
Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.
