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)

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_262_tableaux_multi.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).