L'objet Array

Les tableaux sont un type spécial de variables qui permettent de contenir plusieurs valeurs à la fois. Si une variable classique peut avoir une seule valeur, les tableaux, quant à eux, peuvent en contenir autant que l'on souhaite.

En Javascript, un tableau est un objet. Il peut contenir des entrées du même type ou de types différents. Il peut même contenir d'autres tableaux. On parle alors d'un tableau à 2 dimensions, à 3 dimensions etc...

Déclaration d'un tableau

Il existe plusieurs méthodes pour déclarer un tableau en Javascript. Pour mieux comprendre comment ça fonctionne, on va considérer que l'on veut créer un tableau d'éléments qui renferme les valeurs suivantes: "Javascript", "Coté client" et 40. "Javascript" indique la technologie à apprendre, "Coté client" indique l'endroit où il s’exécute (par défaut parlant) et 40 représente une estimation du nombre d'heures nécessaires pour en maîtriser les fondements.

Tout d'abord, ce tableau est sensé accueillir 3 entrées. Chaque entrée sera indexée par un indice numérique commençant de 0 et qui s'incrémente de 1. On aura donc les indices 0,1 et 2 qui représenteront respectivement "Javascript", "Coté client" et 40.

Première méthode:
Ici nous avons créé un tableau identifié par le nom tab. Le nom d'un tableau vérifie les même règles de nommage d'une variable classique. Le mot clé new signifie que l'on veut créer un nouvel objet. En effet, en programmation orientée objet (ou prototype) on utilise le mot clé new pour créer un objet à partir d'une classe (cas de la POO) ou à partir d'un prototype (cad de la POP). Cependant, il faut désigner à partir de quel objet (prototype) on veut créer notre objet tab, c'est le rôle de Array() (avec A majuscule). Dans ce cas tab sera un objet tableau.

Après la création de l'objet tab on a procédé à l'initialisation de ses indexes. On parle en fait d'un tableau indexé, c'est à dire qu'il utilise des indices numériques spécifiés entre les crochets ([]) pour accueillir les différentes valeurs. Vous avez remarqué que nous avons déclaré les indexes dans l'ordre (0 puis 1 puis 2). Cependant rien ne nous oblige à les incrémenter de 1. On aurait donc pu, à titre d'exemple, déclarer les indexes 0 puis 1 puis 10. Dans ce cas, les indexes sautés (de 2 à 9) sont vides.

Comme je l'ai spécifié plus haut, un tableau peut accueillir des éléments de types différents. Dans notre cas, les deux premiers éléments sont des chaines de caractères tandis que le troisième et un nombre entier.

Deuxième méthode:
Ici l'initialisation des indexes est faite en une seule instruction. Deux crochets renferment les trois valeurs. La première valeur est implicitement indexée par 0, la deuxième par 1 et la troisième par 2.

Troisième méthode:
Dans ce cas, nous avons déclaré une seule instruction qui permet de créer l'objet tableau et l'initialiser par les valeurs passées entre les parenthèses. Là encore, les indexes sont implicites. Ils commencent de 0 et s'incrémentent à chaque nouvel élément déclaré.

Tableau à plusieurs dimensions

Il est possible de créer un tableau à plusieurs dimensions. Pour simplifier, je vous expliquerai le principe d'un tableau à 2 dimensions. En se basant dessus, vous pouvez créer autant de dimensions que vous voulez.

Imaginons que nous voulons créer un tableau qui contient: "Le nom de l'entreprise", "Nombre d'employés" et "Chiffre d'affaires". Il y'aura 3 entreprises en tout.

Commençons d'aborder par déclarer trois tableaux élémentaires (à une dimension) pour chaque entreprise:
Maintenant que les trois tableaux sont déclarés, nous allons déclarer le tableau principal qui regroupera toutes ces données:
Là, nous avons déclaré le tableau tab qui regroupe les trois tableaux déclarés avant (tab1, tab2 et tab3). Ce tableau contient deux dimensions. Pour que vous compreniez à quoi cela correspond, il s'agit en fait d'une matrice, ou une grille qui est divisées en lignes et en colonnes. En tout, la grille contient trois lignes (qui représente les entreprises) et trois colonnes qui représentent les données de chaque entreprise.

En schématisant ceci, on obtient la forme suivante:

Entreprise A [0][0]	40 [0][1]	1000000 [0][2]
Entreprise B [1][0]	90 [1][1]	5000000 [1][2]
Entreprise C [2][0]	110 [2][1]	9000000 [2][2]

Pour appeler la première colonne de la première ligne (la valeur "Entreprise A") on fait appel à tab[0][0]. Le premier crochet contient l'indice de la ligne et le deuxième l'indice de la colonne.

Parcourir un tableau

Pour parcourir tous les éléments d'un tableau, la méthode la plus connue et l'utilisation de la boucle for ou la boucle while.

Supposons qu'on veut afficher toutes les valeurs du dernier tableau (à deux dimensions) dans une boite de dialogue alerte. Le code ressemblerai donc à ceci:
Puisque nous avons un tableau à deux dimensions, alors on aura forcément besoin de deux boucles. La première avec l’indice i parcourt les linges, et la deuxième avec l'indice j parcourt les colonnes. Chaque boucle fait trois itérations de 0 à 2 (car on sait qu'il y a trois entreprises, chacune dispose de trois données).

A chaque fois, on affecte à la variable str la valeurs de la cellule en cours en conservant son ancienne valeur (affectation avec concaténation). Le n désigne nouvelle ligne pour passer à la ligne suivante dans la boite de dialogue alert().

Attributs et méthodes de l'objet Array

Attributs et méthodes de base applicables aux tableaux en Javascript

L'objet Array dispose d'un ensemble d'attributs et méthodes qui permettent de manipuler les tableaux. En voici les plus utilisés:

• length: Cet attribut retourne la taille du tableau, c'est à dire le nombre d'élément que celui ci contient.
• sort(): Cette méthode retourne le tableau dont les éléments sont triés dans l'ordre alphanumérique croissant.
• reverse(): Cette méthode retourne le tableau dont l'ordre des éléments a été inversé.
• join(): Cette méthode retourne une chaîne de caractères constituée des éléments du tableau séparés par l’occurrence passée en paramètres (entre les parenthèses).

Exemples:
Comme vous l'avez constaté dans le dernier exemple, on peut imbriquer les méthodes. L'instruction tab.sort().reverse().join("-") exécute les traitements suivant:

1. sort() crée un tableau dont les éléments sont ceux de tab triés dans l'ordre alphanumérique croissant.
2. reverse() crée un tableau dont les éléments sont ceux du tableau obtenu dont les éléments sont inversés.
3. join("-") crée une chaîne de caractère à partir des éléments du dernier tableau obtenu séparés par "-".

L'itérable forEach() pour parcourir un tableau plus efficacement

La méthode forEach() et un itérable Javascript qui permet de parcourir un tableau élément par élément tout en effectuant un traitement.

A titre d'exemple, si on veut simplement afficher les éléments d'un tableau, alors on peut invoquer la méthode forEach() de la manière suivante:
Dans la console on aura:
La méthode forEach() accpete comme argument une fonction (dans ce cas, il s'agit d'une fonction anonyme qu'on aura l'occasion de voir plus en détail dans la partie consacrée du DOM). Cette fonction accepte comme argument une variable qui vaudra l'élément courant du tableau au moment de son parcours. N'oubliez pas que la méthode forEach() est un itérable, donc il exécutera des itérations autant de fois qu'il y a d’éléments dans le tableau. Dans le corps de la fonction, on affiche l'élément courant à l'aide de la méthode console.log(). Bien entendu, on pourrait exécuter n'importe quel traitement qui invoque les éléments du tableau.

Notez qu'il est plus pratique d'utiliser une fonction fléchée dans ce genre de traitement. Le code précédent devient donc:

La méthode map()

La méthode map() permet de créer un nouveau tableau à partir des éléments du tableau original après leur avoir appliqué une transformation.

A titre d'exemple, imaginons que l'on veut créer un tableau de nombres qui contient les carrés des éléments englobés dans un tableau original. Notre code ressemblera donc à ceci:
Le tableau nouveauTab contient désormais les valeurs [100,400,900].

Là encore, je me suis servi d'une fonction anonyme comme pour la méthode forEach(). D'ailleurs, on peut toujours simplifier le code à l'aide une fonction fléchée comme ceci:

Les tableaux (objet Array) en vidéo