Les tableaux en JavaScript

Attention le terme "tableau" peut désigner des choses très différentes en programmation web selon que l'on évoque HTML ou JavaScript.
En HTML un tableau est une façon de présenter plusieurs données en un seul élément (balise TABLE qui contient à son tour les éléments TR & TD).
En JavaScript un tableau est une variable pouvant stocker plusieurs données.
Notez cependant le point commun : plusieurs données !

Il y a deux catégories de tableaux en JS : les tableaux indicés et les tableaux avec clés.

Les tableaux indicés

Dans un tableau indicé chaque valeur est repérée par son rang (ou indice).
Attention la première valeur a le rang (ou indice) zéro !

Exemple

var vvilles = ['Boulogne', 'Calais', 'Dunkerque', 'Saint Omer'] ; // création d'un tableau avec 4 éléments alert(vvilles[0]) ; // affiche Boulogne alert(vvilles[3]) ; // affiche Saint Omer vvilles.push('Montreuil') ; // ajout d'un cinquième élément document.write("Affichage tableau - solution 1" + "<br>") ; for (var i = 0 ; i < vvilles.length; i++) // parcours du tableau {document.write(i + " : " + vvilles[i]+"<br>") ; } alert(vvilles[4]) ; // affiche élément de rang 4 (cinquième élément) alert(vvilles.length) ; // retourne le nombre d'éléments du tableau vvilles[4] = 'Berck' ; // remplacement de l'élément de rang 4 alert(vvilles[4]) ; // affiche Berck et non plus Montreuil vvilles.pop() ; // supprime le dernier élément du tableau document.write("Affichage tableau solution 2" + "<br>") ; for (var i in vvilles) // parcours du tableau {document.write(i + " : " + vvilles[i]+"<br>") ; }
Testez ce script !

Analyse du script

Notez bien l'utilisation de crochets pour délimiter les éléments du tableau.
Vous verrez dans le deuxième exemple qu'il y a une autre syntaxe pour définir un tableau indicé.

Ici le tableau indicé est nommé vvilles et comprend 4 éléments. On peut le réprésenter comme suit (un tableau HTML) :

indice0123
donnéeBoulogneCalaisDunkerqueSaint Omer

Donc chaque élément du tableau peut être identifié par un numéro (un indice). Mais attention la numérotation commence à 0 !.

alert(vvilles[0]) : affiche le premier élément (indice vaut 0)
alert(vvilles[3]) : affiche l'élément numéroté 3 (le quatrième)
vvilles.push('Montreuil') : ajoute un élément en fin de tableau (donc un cinquième élément). push() est une méthode de l'objet tableau.

Ensuite nous avons une boucle for qui permet de parcourir tout le tableau :
vvilles.length : retourne 5 ; donc on boucle 5 fois ; i prenant successivement les valeurs 0, 1, 2, 3
alert(vvilles.length) : retourne le nombre d'éléments du tableau.
vvilles.pop() : supprime le dernier élément du tableau.

Après il y a de nouveau le parcours du tableau mais cette fois avec la structure for ... in

La structure for ... in permet de parcourir un tableau avec une syntaxe simplifiée : le comptage du nombre de termes du tableau est implicite !

Vocabulaire

Ne confondez pas méthode et propriété d'un objet !
Une méthode est une fonction associée à un objet. Une méthode permet de manipuler un objet.
push() & pop() sont des méthodes que l'on peut utiliser avec objet de type tableau ("Array" en JS).
Une méthode est toujours suivie d'une paire de parenthèses et même s'il n'y a pas d'argument à passer. Ainsi il faut écrire : vvilles.pop()

Une propriété retourne des informations sur l'objet. Il n'y a pas de parenthèses après le nom de la propriété.
La seule propriété associée à un tableau est length. Il faut écrire : vvilles.length

Les méthodes relatives aux tableau indicés

Nous venons de voir deux méthodes que l'on peut appliquer aux objets de type "Array" (ou tableau) : push() & pop() qui respectivement ajoute / retire un élément en fin de tableau.
Mais il existe d'autres méthodes très pratiques que nous allons aborder à travers un deuxième exemple.

Le script du deuxième exemple

// tableau indicé déclaré tel un nouvel objet de type Array var prenoms = new Array('Sylvie', 'Laurence', 'Lucienne', 'Pauline', 'Claudine'); document.write("Contenu initial du tableau" + "<br>") ; for (var i in prenoms) // parcours du tableau {document.write(i + " : " + prenoms[i] + "<br>") ; } document.write("<hr>" + "<br>") ; prenoms.sort(); // tri du tableau par ordre alphabétique document.write("Tableau trié de A à Z" + "<br>") ; for (var i in prenoms) // parcours du tableau {document.write(i + " : " + prenoms[i] + "<br>") ; } document.write("<hr>" + "<br>") ; prenoms.reverse(); // tri du tableau par ordre alphabétique inversé document.write("Tableau trié de Z à A" + "<br>") ; for (var i in prenoms) // parcours du tableau {document.write(i + " : " + prenoms[i] + "<br>") ; } document.write("<hr>" + "<br>") ; prenoms.unshift('Berthe','Camille'); // ajout de prenoms en début de tableau document.write("Nouveau contenu du tableau" + "<br>") ; for (var i in prenoms) // parcours du tableau {document.write(i + " : " + prenoms[i] + "<br>") ; } document.write("<hr>" + "<br>") ; var liste = prenoms.join(' ; '); // production d'une chaine à partir du tableau document.write("Tableau sous forme d'une liste : " + liste);

Commentaire

Il y a beaucoup à dire ...

Remarquez d'abord que j'ai utilisé une autre syntaxe pour définir le tableau : nouvel objet de type Array et nommé prenoms .
Attention à la syntaxe : var nomTableau = new Array(élément1, ... , élément N) .
N'oubliez pas le A majuscule à Array ! ; les éléments sont délimités cette fois par des parenthèses (et non plus des crochets).

Remarquez que les méthodes pour supprimer des éléments n'ont pas besoin d'argument : pop() & shift()
Testez ce deuxième script !

les tableaux avec clés (identifiants textuels)

Il peut être plus pratique d'identifier une donnée par un identifiant textuel (on dit aussi une clé). On pourrait dire "propriété" ... On parle alors de tableaux avec clés ou tableaux associatifs (pour reprendre la terminologie PHP).
Attention les "tableaux associatifs" en JS c'est un peu de la "bidouille programmatique" ; officiellement ça n'existe pas ...

Donc toutes les méthodes vues ci-dessous (push(), sort(), reverse(), unshift(), etc.) ne s'appliquent qu'aux tableaux indicés !!!

Le script de l'exemple

var jean_auto = { marque : 'renault', modele : 'clio' , places : '5 adultes' , p_fiscale : '5cv', carburant : 'gazole', } var paul_auto = { marque : 'citroen', modele : 'C3' , places : '5 adultes' , p_fiscale : '4cv', carburant : 'essence', } alert("auto de Jean consomme du : " + jean_auto.carburant); // affiche gazole alert("auto de Paul consomme du : " + paul_auto.carburant) ; // affiche essence jean_auto.p_reelle = "100cv" ; // ajout d'une paire clé/valeur dans premier tableau paul_auto.p_reelle = "90cv" ; // ajout d'une paire clé/valeur dans deuxième tableau // infos sur voiture de jean document.write ("voiture de Jean : "); for (var cle in jean_auto) // parcours du premier tableau { document.write("<br>" + cle + " : " +jean_auto[cle]) ; } document.write("<br> <hr>") ; // saut de ligne et trait // infos sur voiture de Paul document.write("voiture de Paul :") ; for (var propriete in paul_auto) // parcours du deuxième tableau { document.write("<br>" + propriete + " : " + paul_auto[propriete]) ; } // instructions fausses alert ("taille du premier tableau : " + jean_auto.length ); alert ("taille du premier tableau : " + paul_auto.length );
Testez ce script !

Attention les deux dernières instructions "buguent". En effet on ne peut appliquer la propriété length qu'aux tableaux indicés !

Analyse du script

On crée deux tableaux associatifs intitulés "jean_auto" et "paul_auto".

Par exemple le contenu du tableau "jean_auto" peut être représenté de la façon suivante :

clémarquemodèleplacesp_fiscalecarburant
valeurrenaultclio5 adultes5 cvgazole

Plutôt que le mot "clé" on pourrait parler aussi de "propriété" .

Cette fois-ci pour décrire les deux tableaux associatifs j'ai utilisé la notation JSON(JavaScript Object Notation).
Vous retrouverez cette notation pour définir des objets dans le cadre de la POO (Programmation Orientée Objet).
En fait un tableau avec clés c'est un objet avec des propriétés ...

Examinons quelques instructions du script :

alert(jean_auto.modele) : affiche la donnée ayant pour clé modele dans le tableau jean_auto
jean_auto.p_reelle = "100cv" : ajout d'une donnée identifiée par la clé p_reelle dans le tableau jean_auto
for (var cle in jean_auto) : parcours du tableau jean_auto

Pour parcourir un tableau associatif il faut utiliser obligatoirement la structure for ... in .
En effet la propriété length n'étant pas disponible pour ce type de données on ne peut pas écrire : for (var i = 0 ; i < nomTableau.length; i++)

Les tableaux bidimensionnels

L'ULCO est une université multipolaire : quatre sites. Des personnels doivent faire des déplacements entre ces différents pôles. Afin de les indemniser il est important de connaitre les distance entre les pôles.

Tableau des distances :

calaisboulognedunkerquesaint omer
calais0344644
boulogne3407654
dunkerque4676047
saint omer4454470

Le script correspondant

// déclaration du tableau à deux dimensions var distances = { 'calais' : {'calais' : 0,'boulogne' : 34, 'dunkerque' : 46 , 'saintOmer' : 44}, 'boulogne' : {'calais' : 34,'boulogne' : 30, 'dunkerque' : 76 , 'saintOmer' : 54}, 'dunkerque' : {'calais' : 46,'boulogne' : 76, 'dunkerque' : 0 , 'saintOmer' : 47}, 'saintOmer' : {'calais' : 44,'boulogne' : 54, 'dunkerque' : 47 , 'saintOmer' : 0}, } ; // fin tableau bidimensionnel // les traitements alert ('calais-boulogne : ' + distances.calais.boulogne) ; // affiche 34 alert ('dunkerque-calais : ' + distances.dunkerque.calais) ; // affiche 46 alert ('saintOmer-calais : ' + distances.saintOmer.calais) ; // affiche 44 alert ('calais-calais : ' + distances.calais.calais) ; // affiche 0 alert ('boulogne-dunkerque : ' + distances.boulogne.dunkerque) ; //affiche 76 alert ('boulogne-saintOmer : ' + distances.boulogne.saintOmer) ; // affiche 54 Testez ce code !

Commentaire

Là encore nous avons utilisé la notation JSON (JavaScript Object Notation) pour stocker les données dans le tableau multidimensionnel distances.
Notez cependant qu'il y a deux niveaux :le tableau "distances" comprend les "sous-tableaux" calais", "boulogne", "dunkerque", "saintOmer.
Retour menu