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 |
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]);
}
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.
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.
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.
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.
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 100 000 de nombres aléatoires */
var aleatoire=new Array();
for (var i=0; i<100000; 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 :
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.
Nous avons vu comment créer un tableau simple à une seule dimension. C'est la base de tous les tableaux possibles en JavaScript.
| 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.
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.
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 :
|
|
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.
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 :
Nous avons déjà utilisé la propriété length qui retourne le nombre d'éléments d'un tableau.
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 :
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 :
Les méthodes push() et unshift ajoutent des éléments respectivement en fin et en début de tableau.
Les méthodes pop() et shift() suppriment respectivement le dernier et le premier élément du tableau.
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.
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é.
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.
En savoir plus