JavaScript : les tableaux de données

En programmation on désigne par tableau une variable contenant plusieurs données.
Il y a deux catégories de tableaux en JavaScript : les tableaux indicés et les tableaux avec clés.

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 !

Premier 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
		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 du cinquième élément
		alert(vvilles[4]) ; // affiche Berck et non plus Montreuil
		vvilles.pop() ; // supprime le dernier élément du tableau
		
				
		document.write("Affichage tableau - solution 1" + "
") ; for (var i = 0 ; i < vvilles.length; i++) // parcours du tableau {document.write(vvilles[i]+"
") ; } document.write("
"); document.write("Affichage tableau - solution 2" + "
") ; for (var i in vvilles) // parcours du tableau {document.write(vvilles[i]+"
") ; } document.write("
");

Testez ce script !

Analyse du script

Notez bien l'utilisation de crochets pour délimiter les éléments du tableau.
Pour parler savant ce tableau indicé a été créé avec la notation JSON (JavaScript Object Notation)!
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 au départ éléments. On peut le réprésenter comme suit :

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 !.
Examinons maintenant certaines instructions du script.
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 que l'on peut associer à un tableau indicé.
vvilles.length : retourne 5.
vvilles.pop() : supprime le dernier élément du tableau.

Ensuite nous avons une boucle FOR traditionnelle permet de parcourir tout le tableau ; le test doit reposer sur la propriété length.
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 !

Terminologie

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 indicé est length. Il faut écrire : vvilles.length ; pas de parenthèses !

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" + "
") ; for (var i in prenoms) // parcours du tableau {document.write(prenoms[i] + "
") ; } document.write("
" + "
") ; prenoms.sort(); // tri du tableau par ordre alphabétique document.write("Tableau trié de A à Z" + "
") ; for (var i in prenoms) // parcours du tableau {document.write(prenoms[i] + "
") ; } document.write("
" + "
") ; prenoms.reverse(); // tri du tableau par ordre alphabétique inversé document.write("Tableau trié de Z à A" + "
") ; for (var i in prenoms) // parcours du tableau {document.write(prenoms[i] + "
") ; } document.write("
" + "
") ; prenoms.unshift('Berthe','Camille'); // ajout de prenoms en début de tableau document.write("Nouveau contenu du tableau" + "
") ; for (var i in prenoms) // parcours du tableau {document.write(prenoms[i] + "
") ; } document.write("
" + "
") ; var liste = prenoms.join(' ; '); // production d'une chaine à partir du tableau document.write("Tableau sous forme d'une liste : " + liste);

Testez ce deuxième script !

Il y a beaucoup à dire.
Remarquez d'abord que j'ai utilisé une autre syntaxe pour créer le tableau : nouvel objet de type Array et nommé prenoms .
En effet un tableau est un objet ; créer un tableau c'est produire un nouvel objet de type "Array".
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).

Notez que les méthodes pour supprimer des éléments n'ont pas besoin d'argument : pop() & shift()

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é ou propriété). On parle alors de tableaux avec clés ou tableaux associatifs (pour reprendre la terminologie PHP).
Attention les "tableaux associatifs" en JavaScript c'est un peu de la "bidouille programmatique" ; officiellement ça n'existe pas ...

Donc toutes les méthodes évoquées ci-dessus (push(), sort(), reverse(), unshift(), etc.) ne s'appliquent qu'aux tableaux indicés et jamais aux tableaux avec clés. . La propriété "length" n'est pas utilisable.

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("
" + cle + " : " +jean_auto[cle]) ; } document.write("

") ; // 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("
" + 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 "buggent". En effet on ne peut appliquer la propriété length qu'aux tableaux indicés !

Analyse du script

On crée deux objets "jean_auto" et "paul_auto". Ces objets ne sont pas considérés comme des Array par JavaScript. Donc vous ne pourrez utilisez les méthodes telles sort(), push(), pop(), etc.

Par exemple le contenu de l'objet "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é" .

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).

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, on peut tester avec celle-ci.

Les tableaux bidimensionnels

Thématique : 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