Retourner à la page d'accueil de TJS

Les tableaux en JavaScript

La déclaration de tableaux

C'est quoi un tableau ?

Les tableaux sont des éléments indispensables de la programmation dans tous les langages.

Un tableau est une structure ordonnée contenant des informations, accessibles et manipulables facilement.
Les jours de la semaine peuvent être stockés en mémoire dans un tableau. Le tableau en mémoire peut être comparé au tableau réel :

Indice 1 2 3 4 5 6 7
Contenu Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

L'intérêt premier du tableau est de permettre un accès à une information par son indice.
Par exemple, le premier élément de ce tableau contient "Lundi".

Déclaration de base

Un tableau est un objet Array. Pour déclarer un tableau, il faut utiliser l'instruction new :
var tab=new Array();
La variable tab a maintenant la structure d'un tableau. Elle possède les propriétés et les méthodes des tableaux et est prête à recevoir le contenu du tableau.

En JavaScript, comme dans la plupart des langages de programmation, le premier élément du tableau commence à l'indice 0. C'est un peu gênant, mais on s'habitue...
Pour alimenter le tableau avec les jours de la semaine, on écrit le code suivant :

var tab=new Array();
tab[0]="Lundi";
tab[1]="Mardi";
tab[2]="Mercredi";
tab[3]="Jeudi";
tab[4]="Vendredi";
tab[5]="Samedi";
tab[6]="Dimanche";
var longueur=tab.length;

Maintenant, le tableau est initialisé avec les jours de la semaine.

La variable longueur, obtenue par la propriété length, contient 7 : il y a 7 élements dans le tableau de l'indice 0 à l'indice 6 (soit 7-1).

Voyez le formulaire pour obtenir le contenu du tableau à l'indice voulu.

<form name="f1">
  Indice : <INPUT type="text" name="indice" size=5 value=0>
  <input type="button" value="Contenu du tableau" onClick="displayJour(this.form.indice.value)">
</form>

La fonction displayJour() est définie ainsi et affiche dans la console le jour de la semaine à l'indice j :

function displayJour(j) {
  console.log("Jour "+j+" = "+tab[j]);	
}

Emulation de la console

Si on accède à un élément dont l'indice n'existe pas, JavaScript retourne undefined.
Par exemple, tab[10] n'existe pas, cet élément vaut undefined.

Afficher un tableau dans la console

La console du navigateur permet d'afficher un tableau directement avec console.table(tableau) :

console.table(tab);

Le tableau est directement affiché dans la console dans un format lisible.


Emulation de la console

Déclaration accélérée

La déclaration du tableau des jours de la semaine peut se faire plus directement en utilisant les paramètres du constructeur :
var tab2=new Array("Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche");
La fonction Array reçoit en paramètres les éléments ordonnés du tableau. Elle construit le tableau. Array est appelé le constructeur de l'objet tableau.

Le tableau tab2 a exactement les mêmes propriétés que le premier tab.

Déclaration au format JSON

Le format JSON permet de créer et d'alimenter les données d'un tableau encore plus rapidement. Les crochets ouvrant et fermant définissent un tableau. Les données sont ajoutées à l'intérieur, séparées par des virgules.

var tab3=["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
var mois=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet", "Août","Septembre","Octobre","Novembre","Décembre"];

Le tableau tab3 a exactement les mêmes propriétés que tab et tab2.

Parcourir un tableau

Une boucle for permet de parcourir l'ensemble des éléments d'un tableau.

Voici un exemple d'utilisation de boucle pour calculer la somme et la moyenne des valeurs d'un tableau remplis de nombres aléatoires avec Math.random() :

/* Création d'un tableau de 1 million de nombres aléatoires */
var aleatoire=new Array();
for (var i=0; i<10000000; i++) {
  aleatoire[i]=Math.random();
}

/* Calcul de la moyenne */
var somme=0;
for (var i=0; i<aleatoire.length; i++) {
  somme+=aleatoire[i];
}
var moyenne=somme / aleatoire.length;
document.write( "moyenne = " + moyenne );

Le script calcule la somme des éléments et affiche la moyenne :


Emulation de la console

Parcourir un tableau est possible avec la méthode forEach() exécute une fonction de l'utilisateur sur chaque élément du tableau. Observez le principe sur l'exemple de tri de tableau.

Les tableaux spéciaux

Nous avons vu comment créer un tableau simple à une seule dimension. C'est la base de tous les tableaux possibles en JavaScript.

Changer les indices

Dans certains cas, un indice numérique est moins pratique ou moins explicite qu'un indice sous forme de texte.
Par exemple, imaginons que pour chaque jour de la semaine on ait une page spéciale à charger :
  - samedi et dimanche = weekend.html
  - mercredi = enfant.html
  - les autres jours = semaine.html

Il pourrait être intéressant d'avoir un tableau de ce type :

Indice Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche
Contenu semaine semaine enfant semaine semaine weekend weekend

Qui serait déclaré ainsi en JavaScript :

var tabPage=new Array();
tabPage["Lundi"]="semaine";
tabPage["Mardi"]="semaine";
tabPage["Mercredi"]="enfant";
tabPage["Jeudi"]="semaine";
tabPage["Vendredi"]="semaine";
tabPage["Samedi"]="weekend";
tabPage["Dimanche"]="weekend";

console.table(tabPage);
var j=1;
document.write( "Le jour à l'indice " + j + " est " + tab[j] );
document.write( ". C'est un jour de " + tabPage[ tab[j] ] );

Ce script crée le tableau des pages associées aux jours de la semaine et l'affiche dans la console.


Emulation de la console

La clé du couple clé/valeur de tab2 n'est plus numérique et indicielle. Elle peut être aussi sous forme de chaîne de caractères.

Les tableaux d'objets

Pour l'instant, les tableaux que nous avons vus contenaient des valeurs basiques (chaînes de caractères ou nombres). Il est possible d'associer à un élément de tableau un objet JavaScript complexe.
Je vous invite à lire la page concernant le JavaScript objet si vous n'êtes pas familier avec la notion d'objet.

Imaginons un tableau contenant tous vos animaux domestiques.
Un animal domestique est décrit par :
  - son nom
  - son espèce
  - son âge
Voici la fonction qui construit un animal en mémoire :
function Animal(un_nom,une_espece,un_age) {
  this.nom=un_nom;
  this.espece=une_espece;
  this.age=un_age;
}
On peut créer les animaux en appelant la fonction Animal :
var milou=new Animal("Milou","Chien","4");
var titi=new Animal("Titi","Oiseau","1");
var rominet=new Animal("Rominet","Chat","2");
var nemo=new Animal("Nemo","Poisson","6");

On a maintenant en mémoire 4 variables correspondant à nos 4 animaux milou, titi, rominet et nemo
ATTENTION : il ne faut pas confondre les variables en minuscules avec le nom de l'animal qui est une chaîne de caractères et qui comporte une majuscule !

Il ne reste qu'à créer le tableau animaux :

var animaux=new Array();
animaux[0]=milou;
animaux[1]=titi;
animaux[2]=rominet;
animaux[3]=nemo;

Ici, le premier élément du tableau animaux contient un objet, la variable milou. Il ne faut pas mettre de guillemet autour de milou : ce n'est pas une chaîne de caractères, mais un nom de variable.

Pour accéder à l'objet premier animal (n'oubliez pas, à indice 0) et à ses propriétés, on utilise la notion pointée :

var nom=animaux[0].nom;
var espece=animaux[0].espece;
var age=animaux[0].age;

document.write("Mon premier animal "+nom+" est un "+espece+" et a "+age+" ans.");

Ce qui donne à l'exécution l'affichage sous forme de phrase du descriptif du premier animal :

Emulation de la console

Les tableaux à plusieurs dimensions

On vient de voir qu'il est possible de créer des tableaux d'objets. Or un tableau est aussi un objet JavaScript Array.
Il est donc possible de créer des tableaux de tableaux, ce qui correspond à des tableaux à plusieurs dimensions.
Le nombre de dimensions d'un tableau n'est pas limité; mais nous allons traiter un exemple simple et concret à deux dimensions.

Imaginons un jeu de morpion. La zone de jeu est un plateau de 3 par 3. Supposons cette grille à un moment donné de la partie :

  X
XO 
OX 

012
0
1
2

Cette grille est bien un tableau à 2 dimensions.
Décidons, par convention, d'indicer d'abord la colonne puis la ligne.
Ainsi, la case[0,0] coin supérieur gauche est vide, la case [0,2] coin inférieur gauche contient "O", la case[2,0] coin supérieur droit contient "X".

Comment faire pour créer un tableau JavaScript de ce type ?

var morpion=new Array();
morpion[0]=new Array(" ","X","O"); 
morpion[1]=new Array(" ","O","X");  
morpion[2]=new Array("X"," "," "); 

Pour accéder à l'élément [0,2], on écrit simplement :

document.write( morpion[0][2] );

Le premier indice entre crochets appelle la colonne, le second appelle la case de la colonne indicée.

Emulation de la console

Les propriétés et les méthodes des tableaux

Au cours des évolutions des navigateurs et du JavaScript, les tableaux se sont enrichis de propriétés et de méthodes nouvelles. Toutes les propriétés et les méthodes sont détaillées dans la référence du langage sur l'objet Array. Les plus courantes sont résumées ici :

Le nombre d'éléments

Nous avons déjà utilisé la propriété length qui retourne le nombre d'éléments d'un tableau.

La conversion en chaînes de caractères

Un tableau peut être transformé en une simple chaîne de caractères composée de tous ses éléments séparés par un séparateur adapté avec l'appel à join() :

document.write( tab.join(",") );

Le tableau des jours de la semaine est fusionné en une chaîne avec la virgule en séparateur :


Emulation de la console

Le découpage de chaînes de caractères

L'opération inverse est facilement réalisable. La méthode split() crée un tableau à partir des éléments d'une chaîne séparé par le séparateur adapté :

var chaine="Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi,Dimanche";
var jours=chaine.split(",");
console.table(jours);

Le tableau des jours de la semaine est créé à partir de la chaine de tous les jours :


Emulation de la console

La concaténation de tableaux

Comme pour les chaînes, il est possible de concaténer plusieurs tableaux pour n'en former qu'un seul. La fusion se fait avec concat().

Un nouveau tableau d'animaux est déclaré au format JSON puis il est concaténé au tableau animaux du début de cette page :

var animaux2 = [
 {"nom": "Dumbo", "espece": "Eléphant", "age": 50},
 {"nom": "Booba", "espece": "Ours", "age": 8}
];
var tousMesAnimaux=animaux.concat(animaux2);
document.write(tousMesAnimaux.length);

A l'exécution, le tableau tousMesAnimaux contient 6 instances d'animaux.

Emulation de la console

Le tri de tableaux

JavaScript propose des méthodes de tri de tableaux puissantes.

Utilisons notre tableau des mois de l'année et trions le par ordre alphabétique avec sort().

var mois=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
document.write("Affichage du tableau avant le tri :<br>");
document.write(mois.join(", "));
/* Tri du tableau */
mois.sort();
document.write("<hr>Affichage du tableau trié :<br>");
document.write(mois.join(", "));
/* Inversion du tableau */
mois.reverse();
document.write("<hr>Affichage du tableau inversé :<br>");
document.write(mois.join(", "));

A l'exécution, le tableau mois est trié.

Emulation de la console

Notez que mois.sort() ne retourne pas de résultat. C'est le tableau mois sur lequel est appliquée la méthode qui est trié.

La méthode reverse() inverse l'ordre du tableau.

Nous venons de voir comment trier un tableau contenant des éléments simples comme des nombres ou des chaînes. Il est aussi possible de trier un tableau avec sa propre fonction de tri.

Voyons comment trier notre tableau tousMesAnimaux par âge de nos bestioles :

tousMesAnimaux.sort(function (a, b) {
  return a.age - b.age;
});
tousMesAnimaux.forEach(function(animal) {
  document.write("Mon "+animal.espece+" "+animal.nom+" a "+animal.age+" an(s).<br>");	
});

Le script appelle la méthode sort() qui utilise une fonction personnalisée avec 2 paramètres de comparaison.
L'appel à forEach() exécute pour chaque élément du tableau une fonction personnalisée d'affiche de l'animal parcouru. On voit que le tableau est trié par âge de l'animal.


Emulation de la console
Tutoriel écrit par webmaster mis à jour le

Chercher une fonction, un objet, ...

Le 21/09/2017 18:01:40 sur php7 en 14.06 ms