Premiers pas en JavaScript
26.2 tableaux multidimensionnels
cuy copyleft
  See You Why?  

 


les tableaux (arrays) en JS (26.1) | | les tableaux associatifs (26.3)

Contenu

 

 

I. Les tableaux en JS

voir < < < Section précédente

 

II. Tableaux multidimentionnels

Dans la section précédente, nous avons abordé les tableaux de dimension 1. Cela s'observe par le fait que tout appel à un élément d'un tableau se fait par le nom du tableau suivi d'un indice unique noté entre crochets.

JavaScript a cependant une curieuse façon de gérer les tableaux. Chaque élément d'un tableau peut être une donnée simple, une propriété simple... mais chaque élément peut aussi être un objet (dans le sens JS du terme) ou un tableau (rien d'étonnant puisque les tableaux sont des objets en JS).

Dans notre chapitre 23, relatif aux objets, nous avions fait allusion à un objet 'moto de GVdK', dont l'une des propriétés était le propriétaire de la moto... rien n'empêche que ce propriétaire soit lui même un objet qui pourrait avoir des propriétés aussi diverses que son nom, som prénom, sa date de naissance, son numéro national, etc.

On imaginera donc facilement un tableau de dimension 1 (un seul indice) dont les éléments pourraient chacun être des tableaux de dimension 1, 2 ou plus... Cela semble impensable, mais facilement réalisable avec JS. Nous y reviendrons. Mais, avant cela, nous pensons qu'il est préférable de vous introduire aux classiques tableaux de dimension 2, puis 3, voire plus. Ce n'est qu'après avoir digéré cette notion que nous pourrons développer un peu les tableaux à dimensions variables.

 
 

A. Les tableaux de dimension 2

Dans notre section précédente, nous avions créé un tableau de dimension 1. Chaque élève de notre classe avait un identificateur unique... ainsi, pour une classe de six élèves (désolé, plus d'élèves engendrerait des explications et des exemples trop volumineux...), on avait dressé un tableau de dimension 1. De même pour les 27 pays de la CE. Pour rappel, la déclaration d'un tableau :

    var el_3rse = new Array; ou     var el_3rse = new Array(6);
    var pays_ce = new Array; ou     var pays_ce = new Array(27);

déclaration suivie de l'affectation (voir section précédente).

Mais chaque élève ne possède pas que son identifiant, il a aussi un nom, un prénom, un numéro de matricule dans l'école, un numéro national, une date de naissance, etc. Cela signifie que chaque élément de mon tableau initial, pourrait avoir autant de propriétés que je ne souhaite lui en donner. Ce serait mon premier tableau de dimension 2 :
1re dimension, le nombre d'élèves par classe ;
2e dimension, chacune des 7 propriétés à lui attribuer (identificateur, nom, prénom, date de naissance, pays de naissance, n° de matricule, n° national).
Notre tableau serait donc un tableau à deux dimensions, de 6 sur 7, 6 car 6 élèves et 7 car 7 propriétés par élève.

De même, chaque pays ne possède pas que son nom, il a aussi d'autres propriétés telles que sa capitale, sa population, sa surface, son sigle iso3166 à 2 caractères, etc. Cela signifie que chaque élément de mon tableau initial (chaque pays), pourrait avoir autant de propriétés que je ne souhaite lui en donner. Ce serait mon deuxième tableau de dimension 2 :
1re dimension, le nombre de pays de la CE ;
2e dimension, chacune des 5 propriétés à lui attribuer (nom, capitale, population, surface, sigle iso3166 à 2 caractères).
Notre tableau serait donc un tableau à deux dimensions, de 27 sur 5, 27 car 27 pays et 5 car 5 propriétés par pays.

Et non, un tableau de dimension 2 n'est pas forcément un carré... je sais, la grille du jeu de dames, l'échiquier ou la grille de morpion sont des tableaux typiques de dimension 2 et sont carrés, mais tous les tableaux de dimension deux ne sont pas forcément carrés. Une autre preuve : un tableau de dimension 2 pourrait être la liste des pays de la Communauté européenne... 1re dimension, les 27 pays adhérents en 2012, 2e dimension, le nom du pays, sa capitale, sa population, sa surface, son sigle en 2 caractères. Si l'on se limite à cela, cela ferait un tableau à 2 dimensions, 27 sur 5, 27 pour chacun des pays et 5 pour les 5 propriétés retenues.

Beaucoup de lecteurs reconnaitront les tableaux à double entrée...

Un tableau de dimension "deux" mais à 4 éléments sur 5, c'est un peu ça :

on devra encore vous le rappeler souvent, en informatique, on commence à compter à partir de 0 (=zéro)...
donc,
le nombre d'éléments = le dernier indice + 1 ;
et réciproquement,
le dernier indice = le nombre d'éléments - 1.

Cette représentation graphique d'un tableau de dimension 2 est très théorique : elle représente ici une dimension pour la largeur de notre rectangle, une autre pour la longueur de notre rectangle...
Beau rectangle parfait si
* on retient pour chaque élève 7 propriétés (c'est le cas ici : identificateur, nom, prénom, n° matricule dans l'école, n° national, date de naissance, pays de naissance) ;
* on retient pour chaque pays a 5 propriétés (c'est aussi le cas ici : nom, capitale, population, surface, sigle iso3166 à 2 caractères).

Que deviendrait notre beau rectangle si l'on ajoutait une 8e propriété pour nos élèves ? ou une 6e propriété pour nos pays ?

Si la 8e propriété pour nos élèves est "le nombre de frères ou soeurs inscrits dans l'école", aucun problème... notre 8e propriété sera un nombre allant de 0 à ??? selon le nombre de frères ou soeurs inscrits dans la même école... et notre tableau de dimension 2 ne serait plus un tableau de 6 sur 7, mais un tableau de 6 sur 8...
Si la 6e propriété pour nos pays est "le PIB en 2011", aucun problème... notre 6e propriété sera une valeur de plusieurs millions d'euros, mais unique pour chaque pays... et notre tableau de dimension 2 ne serait plus un tableau de 27 sur 5, mais un tableau de 27 sur 6...

Cependant, si la 8e propriété pour nos élèves est "les identificateurs des frères ou soeurs inscrits dans l'école", gros problème... notre 8e propriété sera une liste vide ou une liste de 1 à ??? éléments selon le nombre de frères ou soeurs inscrits dans la même école... et notre tableau de dimension 2 ne serait plus un tableau rectangulaire de 6 sur 7, mais un tableau de 6 sur un 8e élément qui sera lui-même un tableau de dimension variable... fini le beau rectangle dont le dernier élément risque d'être une pile de hauteur différente...

Et si la 6e propriété pour nos pays est "une liste de minerais géographiquement présents et exploités dans le sol", nouveau gros problème... notre 6e propriété sera une liste vide ou importante selon la richesse du sol... et notre tableau de dimension 2 ne serait plus un tableau de 27 sur 5, mais un tableau de 27 sur un 6e élément qui sera lui-même un tableau de dimension variable... fini le beau rectangle... le dernier élément risque d'être une pile de hauteur différente...

Pas de panique... JS pourra gérer ce genre de difficulté à l'aise... mais revenons d'abord à nos classiques tableaux rectangulaires de dimension 2.

Et comment déclarer et affecter des valeurs à ce genre de tableaux ?
Puisqu'il s'agit d'une classe de 6 élèves ou d'une liste de 27 pays, on déclarera, comme déjà vu dans la section précédente :

    var el_3rse = new Array; ou     var el_3rse = new Array(6);
    var pays_ce = new Array; ou     var pays_ce = new Array(27);

Jusqu'ici, rien de nouveau... Le lecteur attentif fera même remarquer qu'il n'est pas indispensable de noter la dimension du tableau, mais nous conseillons vivement de le faire (surtout pour vos premiers pas de programmation).
Chaque élément du tableau sera noté :

    el_3rse[0], el_3rse[1], ..., el_3rse[5]
ou
    pays_ce[0], pays_ce[1], ..., pays_ce[26]

Mais chaque élément du tableau est aussi lui-même un tableau de 7 propriétés pour les 6 élèves et de 5 propriétés pour les pays... il suffit donc de déclarer chacun comme un tableau (attention aux crochets et/ou parenthèses, aux indices p/r à la dimension) :

    var el_3rse[0] = new Array(7);
    var el_3rse[1] = new Array(7);
    ...
    var el_3rse[5] = new Array(7);

ou
    var pays_ce[0] = new Array(5);
    var pays_ce[1] = new Array(5);
    ...
    var pays_ce[26] = new Array(5);

Bref, le truc essentiel à retenir :
- on déclare un tableau unique de dimension 1,
    ayant comme dimension n, nombre d'éléments (élèves ou pays) que souhaitez décrire,
- puis on déclare n tableaux de dimension 1,
    ayant comme dimension p, nombre de propriétés que vous retiendrez
    pour chaque élément de votre premier tableau,
- un tableau de dimension 2 n'est rien d'autre
    qu'un tableau (de dimension 1) de tableaux (de dimension 1)
- un tableau de dimension 3 ne sera rien d'autre
    qu'un tableau (de dimension 1) de tableaux (de dimension 1) de tableaux (de dimension 1)

La déclaration étant faite, il ne reste plus qu'à affecter des valeurs selon l'une des méthodes déjà utilisées, à savoir :

    el_3rse[0][0] = "ElifS";el_3rse[0][1] = "Elif";el_3rse[0][2] = "Sari";... ...;
     
    el_3rse[1][0] = "FredD";el_3rse[1][1] = "Frédéric";el_3rse[1][2] = "Delier";... ...;
    ...
    ...
    el_3rse[5][0] = "SihamF";el_3rse[5][1] = "Siham";...    ...;el_3rse[5][6] = "xxxx";

qu'il faudrait lire "Delier est le nom (3e propriété, donc indice 2) du 2e élève (donc indice 1) de ma liste."
et pour les pays :

    pays_ce[0][0] = "Allemagne";pays_ce[0][1] = "Berlin";pays_ce[0][2] = "81471834";... ...;
     
    pays_ce[1][0] = "Autriche";pays_ce[1][1] = "Vienne";pays_ce[1][2] = "8210281";... ...;
    ...
    ...
    pays_ce[26][0] = "Suède";pays_ce[26][1] = "Stockholm";...    ...;pays_ce[26][4] = "SE";

ou

    pays_ce=[["Allemagne","Berlin",81471834,357026,"DE"],
     [
"Autriche","Vienne",8210281,83871,"AT"],               ["Belgique","Bruxelles",10431477,30518,"BE"],
      ... ...,
     ["Suède","Stockholm",9088728,441369,"SE"]]

qu'il faut lire "SE est le sigle (5e propriété, donc indice 4) du 27e pays (donc indice 26) de ma liste."
ou encore

Le lecteur remarquera cette écriture (syntaxe) propre à JS,
chaque indice est noté entre crochets, sans virgules entres eux pour la 1re notation ;
le double niveau de crochets et des virgules pour la 2e notation.

N'oubliez cependant pas la place mémoire qu'occuperont les tableaux que vous créerez en JS. Le tableau à 2 dimensions ci-dessus contient 27 x 5 soit 135 données.

 
 

B. les tableaux de dimension 3

Tous ceux qui ont étudié la géométrie dans l'espace se rappelleront qu'ils travaillaient dans un espace de dimension 3.
Pour les autres, ils comprendront facilement que pour situer un point dans un local, il faut :
* une abscisse : la distance p/r au mur de gauche ;
* une ordonnée : la distance p/r au mur du fond ;
* une profonfeur : distance p/r au niveau du sol.
Avec ces 3 coordonnées, un point est parfaitement situé dans le local... à condition que par convention, tout le monde se tienne debout et face au même mur du fond.

Un enseignant qui a son carnet de cotes, travaille aussi avec des tableaux de dimension 3.
1re dimension : les classes dans lesquelles il enseigne (une page par classe),
2e dimension : les élèves de chaque classe (une ligne par élève),
3e dimension : les tests et épreuves pour ces élèves (une colonne par épreuve).

On pourrait multiplier les exemples de tableaux de dimension 3, mais notre but n'est pas celui-là ici, ce qui nous importe c'est comment JS gère ce genre de données.

Les horaires dans une école sont un nouvel exemple de tableau de dimension 3.
1re dimension : les classes de l'établissement (une page par classe),
2e dimension : les jours de la semaine (une colonne par jour),
3e dimension : les heures ou périodes de la journée (une ligne par période).

Un exemple de tableau de dimension 4 ? Imaginez une école d'enseignement supérieur où les horaires diffèrent de semaines en semaine... la 4e dimension sera la semaine en cours.

Un tableau de dimension "trois" mais à 3 éléments de 4 éléments sur 5, c'est un peu ça :

on ne vous rappellera plus qu'en informatique, on commence à compter à partir de 0 (=zéro)... d'où...


C. l'accès aux données d'un tableau (ou array)

L'accès aux éléments du tableau de dimension 1, se fait en écrivant le nom du tableau suivi d'une paire de crochets contenant l'indice de l'élément.

    var el_3rse = ["ElifS","FredD","KathiaN","LaetitiaH","MelanieA","SihamF"];
    document.write("Le 4e élément du tableau est "+el_3rse[3]);
 

qui affichera

    Le 4e élément du tableau est LaetitiaH 

L'accès aux éléments du tableau de dimension 2, se fait en écrivant le nom du tableau suivi de 2 paires de crochets contenant les indices de l'élément.

    var pays_ce=[["Allemagne","Berlin",81471834,357026,"DE"],
     [
"Autriche","Vienne",8210281,83871,"AT"],               ["Belgique","Bruxelles",10431477,30518,"BE"],
      ... ...,
     ["Suède","Stockholm",9088728,441369,"SE"]]

    document.write("La capitale du 27e pays du tableau est "+pays_ce[26][1]);  

qui affichera

    La capitale du 27e pays du tableau est Stockholm 

Le langage Javascript propose l'objet Array, comportant de nombreuses méthodes permettant de manipuler les tableaux, c'est-à-dire d'insérer, supprimer, ou extraire des éléments dans le tableau et également de trier les éléments du tableau.

 

III. Les tableaux associatifs

voir suite >>>

 

 

VIII. Exercices relatifs aux tableaux

voir suite > > >

 

 

IX. Test relatif aux tableaux

voir suite > > >

 

 


les tableaux (arrays) en JS (26.1) | | les tableaux associatifs (26.3)