[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > Javascript > Lecture du tutoriel

Les tableaux

	Auteur : JoSé2 Créé : le 09/04/2007 22:05:32 Modifié : le 13/06/2007 19:32:17 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Nous allons attaquer ici une notion très importante en programmation : les tableaux.

Un tableau, qu'est-ce que c'est ?

Pour expliquer de manière simple, disons qu'un tableau permet de stocker et d'avoir accès à beaucoup de données.

Utiliser un tableau, c'est un peu comme utiliser plein de variables, mais en beaucoup plus pratique ; en effet, on n'est pas obligés de s'occuper de ces variables une par une : on va utiliser une boucle à la place, ce qui va nous simplifier grandement la tâche.

Un petit exemple ?
Vous voulez réaliser un jeu (pourquoi pas le "Plus ou Moins"

) multi-joueurs : vous allez donc enregistrer le nom des joueurs.

Si votre jeu se joue à 2, pas de problème.
En revanche, s'il se joue à 4, ça commence à devenir lourd.
À 8, c'est un cauchemar .
... Et si on veut demander aux joueurs combien ils sont, c'est carrément impossible !

Là, on ne parle que d'enregistrer les noms des joueurs... :-°

Tout ça pour vous montrer que les variables, c'est bien beau, mais qu'on a parfois besoin de plus "gros" : eh bien les tableaux sont justement là pour ça.

Sommaire du chapitre :

Un tableau, c'est quoi ?
Plus de contrôles
Exploiter un tableau
Q.C.M.

Un tableau, c'est quoi ?

Des variables numérotées

Quel est l'intérêt ?!

Pour reprendre l'exemple du jeu multijoueur, il serait bien pratique de pouvoir "numéroter" des variables. Ensuite, ça sera facile d'accéder au nom du énième joueur grâce aux numéros.
C'est ce que nous permettent les tableaux : schématiquement, il contiennent des "cases" portant des numéros, et on peut facilement accéder à une case (autrement dit, lire ou modifier le contenu) à partir de son numéro.

Voici comment on peut "imaginer" un tableau

En JavaScript, comme dans de nombreux autres langages de programmation, on commence à compter à partir de 0 !
La première case portera donc le numéro 0, et la énième case le numéro n-1.

Le vocabulaire...

Plutôt que de parler de "cases" et de "numéros", employons dès maintenant les termes exacts.

Le "numéro" s'appelle un indice. On entend également parler de clé, ou key en anglais.
Comme nous le verrons par la suite, les indices peuvent aussi être des chaînes de caractères (un mot ou une expression) : on parle alors de tableau associatif (il associe une valeur, celle de la "case", à un mot).
Le contenu d'une "case" s'appelle un élément du tableau.

Au lieu de parler de la "case portant le numéro i" (ça fait un peu tiercé

), on va donc dire l'élément d'indice i.

Comment ça marche ?

Maintenant qu'on peut se comprendre (entre geeks

), allons-y.
Un tableau, on l'enregistre... dans une variable.
Mais comme on a appris à déclarer (créer), initialiser et modifier une variable, on va maintenant apprendre à créer, initialiser et modifier le tableau que contient notre variable (en plus de s'occuper de la variable elle-même).

Créer un tableau

Pour créer un tableau, on utilise new Array() (qui signifie en anglais "nouveau tableau").

Il y a toujours des parenthèses après Array, même si elles sont vides.
Nous allons voir, quelques lignes plus loin, ce qu'on peut y mettre.

C'est marrant ces parenthèses, c'est comme pour les fonctions... (on en reparle dans quelques chapitres, voulez-vous ?

)

Pour créer un tableau et l'enregistrer dans une variable (sinon ça ne sert pas à grand chose de l'avoir créé...), on fait comme on en a l'habitude :
Code : JavaScript

1	var table = new Array();

Étudions de plus près ce qui se passe :

l'ordinateur crée un tableau en mémoire (on lui en a donné l'ordre avec new).
Il va également créer une variable dans sa mémoire (on lui a demandé avec var).
Mais schématiquement, voilà ce qui va se passer : en fait, on ne va pas "mettre" le tableau dans la variable (ça ne rentrerait pas, une variable, c'est trop petit). On va dire à la variable où se situe notre tableau dans la mémoire de l'ordinateur (c'est beaucoup plus facile comme ça).

Je vous explique ceci pour que vous puissiez comprendre ce qui se passe lorsque vous "copiez" un tableau...

Code : JavaScript

1 2	var toto = new Array(); var t = toto;

Ces deux variables contiennent donc "l'emplacement" du tableau créé : elle désignent donc le même tableau !
Si on le modifie avec toto, les changements seront valables aussi pour t.

Initialiser un tableau

Revenons à la création de tableaux : on a appris à créer un tableau vide.
Mais il est également possible de créer un tableau contenant certaines valeurs. Pour cela, on utilise justement les parenthèses après Array, en précisant dans l'ordre, et en les séparant par des virgules, les valeurs de notre tableau.
Code : JavaScript

1 2	var noms = new Array("Pierre", "Paul", "Jacques"); var best_scores = new Array(2.5, 4.7, 3.14);

Lire ou modifier une valeur

Ce qui va vraiment nous servir par la suite, c'est pouvoir lire ou modifier les éléments d'un tableau.
Pour accéder à un élément, on utilise tableau[indice], où indice est... l'indice de l'élément

.
Pour ajouter un nouvel élément, on modifie simplement sa valeur, fait comme s'il existait déjà.

Exemple :
Code : JavaScript

var table = new Array("Pierre", "Paul", "Jacques");
alert("La seconde case vaut : " + table[1]);   // on lit l'element d'indice 1
table[1] = "Toto";   // on le modifie
table[3] = "Dupont";   // on cree un nouvel element

Au final, ce tableau contiendra donc "Pierre" (indice 0), "Toto" (1), "Jacques" (2) et "Dupont" (3).

Pour un tableau associatif, on crée un tableau vide, et on associe "manuellement" (une par une) toutes les valeurs, en utilisant une chaîne de caractères en tant qu'indice, comme ceci :
Code : JavaScript

1
2
3

var scores = new Array();
scores["Toto"] = 142;
scores["Pierre"] = 137;

Je ne parle pas de la lecture / modification des données, c'est exactement pareil qu'avec un tableau "numéroté".

Des tableaux sans queue ni tête...

En JavaScript, vous avez peut-être constaté qu'on a pas mal de "souplesse" (l'ordinateur ne vient pas vous embêter si vous oubliez un point-virgule, etc.).
Eh bien avec les tableaux, on peut faire à peu près ce qu'on veut :

ajouter autant d'éléments qu'on veut
faire un tableau numéroté ET associatif
faire un tableau contenant à la fois des nombres, des chaînes de caractères, etc.

Un exemple :
Code : JavaScript

var t = new Array(5, "Bonjour", 290, 1.414, "Toto", false, 9, true);
t["txt"] = "Bienvenue à toi !";
t["est_majeur"] = true;
t["pi"] = 3.14;

Bref, ça devient un peu n'importe quoi...

C'est à vous de faire en sorte d'avoir des tableaux organisés...
Le but est bien sûr de pouvoir réutiliser les données stockées : dans l'exemple précédent, cela me parait trèèès difficile.

Plus de contrôles

Maintenant que vous savez utiliser chaque élément de votre tableau, prenons un peu de recul pour s'occuper du tableau lui-même...
Je ne vais pas vous présenter toutes les fonctions qu'on peut appliquer à un tableau (nous y reviendrons plus tard si besoin est), mais simplement vous expliquer comment récupérer sa longueur (chose qui sera vraiment indispensable pour la suite), et vous présenter une fonction (déjà existante, rassurez-vous

) pour trier vos tableaux.

Longueur d'un tableau ?

Comme je l'ai dit, connaître la longueur d'un tableau (grosso modo le nombre d'éléments qu'il contient) est souvent fort utile (pour le parcourir notamment, comme nous le verrons dans la suite de ce chapitre).
Pour un tableau nommé monTableau, on accède à sa longueur grâce à monTableau.length.

Cela ne fonctionne que si les indices de monTableau sont des nombres.
Dans le cas de tableaux associatifs, les cases dont les indices sont des chaînes de caractères ne sont pas comptées.

L'écriture précédente est un peu nouvelle : length est en fait une variable qui "appartient" à monTableau (attention, je n'ai pas dit que c'était un élément du tableau), variable qui contient justement la longueur du tableau

.

Bref, retenez surtout que monTableau.length est la longueur de "monTableau".

Un exemple, pour mieux comprendre :
Code : JavaScript

var table = new Array("Pierre", "Paul", "Jacques");
alert(table.length);
table[5] = "Toto";
alert(table.length);

Si vous testez ce code, vous obtiendrez 3, puis 6.
Dans le premier cas, pas de problème.

Mais dans le cas suivant, il faut également compter les cases vides situées avant la dernière valeur.
Le tableau contient :
0. "Pierre"
1. "Paul"
2. "Jacques"
3. (rien)
4. (rien)
5. "Toto"
D'où une longueur de 6.

Vraiment facile, isn't it ?

Trier un tableau

En restant dans une difficulté aussi élevée ( :lol:

), voici... euh... pour l'instant, appelons ça une fonction... qui permet de trier un tableau (par ordre croissant) grâce à monTableau.sort() (to sort signifie trier en anglais).

Le tri est irréversible !
Une fois trié, il est impossible de récupérer votre tableau dans l'ordre initial.

Reprenons l'exemple précédent (avec des chaînes de caractères, le tri se fait... par ordre alphabétique) :
Code : JavaScript

1
2
3

var table = new Array("Pierre", "Paul", "Jacques");
table[5] = "Toto";
table.sort();

Le tableau contient désormais :
0. "Jacques"
1. "Paul"
2. "Pierre"
3. "Toto"

Pfiou, quelle difficulté

Exploiter un tableau

Eh bien je crois qu'on a tout vu... sauf l'essentiel

.
On sait accéder à un élément particulier, et on sait comment connaître la longueur de notre tableau...
Il ne nous reste plus qu'à accéder à tous les éléments de notre tableau, un par un !

Lire un tableau

Commençons par le plus simple : que peut-on faire en parcourant un tableau ? Tout d'abord, le lire !
On va donc créer une fonction, qui prend en argument un tableau, et qui va nous "lire" le tableau dans une chaîne de caractères.

On va devoir parcourir tout notre tableau...
Mais comment faire ?

On doit en fait répéter une action sur chacun des éléments du tableau. On va donc utiliser... une boucle.

Boucle "for" classique

Il est facile de parcourir un tableau numéroté à l'aide d'une boucle for : en effet, on veut accéder à tous les tableau[i], avec i allant de 0 à tableau.length -1 (ce qui nous fait bien nos tableau.length éléments).

Voici donc une fonction qui retourne, sous forme de chaîne de caractères, le contenu du tableau :
Code : JavaScript

function lire1(tab)
{
        var chaine = "Le tableau contient :"
        for(var i=0; i<tab.length; i++)
                chaine += "\n" + i + " -> " + tab[i];
        return chaine;
}

Dans la pratique, on utilise généralement des boucles comme celle-ci (au moins, on est sûrs de n'avoir aucun problème de compatibilité, et c'est (souvent) aussi bien que la boucle que je vais vous présenter).

Une boucle "for" spéciale...

La boucle précédente est parfaite pour des tableaux numérotés, mais si vous avez fait l'essai avec un tableau associatif, vous avez pu vous rendre compte que ça n'affiche rien :'(

.

Rassurez-vous, il existe une variante de la boucle for qui nous permet de parcourir un tel tableau

.

La syntaxe de la boucle est la suivante :
Code : JavaScript

1	for(var indice in tableau)

Cette boucle va parcourir un par un tous les indices du tableau. Et une fois qu'on a les indices, on a les valeurs qui vont avec

.
De plus, si on laisse des cases vides (dans le cas d'un tableau numéroté), elle ne seront pas parcourues par cette boucle.

Voici donc une nouvelle fonction pour lire un tableau :
Code : JavaScript

function lire2(tab)
{
        var chaine = "Le tableau contient :";
        for(var indice in tab)
                chaine += "\n" + indice + " -> " + tab[indice];
        return chaine;
}

Au risque de me répéter, on utilise le plus souvent des tableaux numérotés.
Il est donc inutile d'utiliser cette boucle dans ce cas-là.

Exploiter un tableau

Maintenant que vous savez lire un tableau, vous n'aurez pas de mal à le parcourir pour y effectuer les opérations que vous voulez (comme mettre toutes les cases à zéro).

Parcours d'un tableau classique

La structure est exactement la même : on utilise une boucle for (version 1 de préférence

) pour parcourir toute les cases du tableau, et on y fait ce que l'on veut.

Un petit exemple ?
On va créer une fonction qui calcule la moyenne d'un tableau contenant des nombres (et aucune case vide).

La moyenne de plusieurs nombres, c'est (la somme de ces nombres) divisée par (le nombre de nombres).
Avec deux nombres x et y, c'est donc (x+y) / 2.

Code : JavaScript

function moyenne(tableau)
{
        var n = tableau.length;   // nombre de valeurs
        var somme = 0;
        for(i=0; i<n; i++)
                somme += tableau[i];
        return somme/n;   // somme divisee par le nombre de valeurs
}

Tableau à plusieurs dimensions

Maintenant, attaquons-nous à un peu plus dur (rassurez-vous, c'est aussi moins courant d'y avoir affaire)...
Il est possible de créer des tableaux à plusieurs dimensions :diable:

.

Un tableau à 2 dimensions : ce n'est en fait rien d'autre... qu'un tableau de tableaux ! o_O

Avec 3 dimensions, on se retrouve avec un tableau de (tableaux de tableaux) :-°

.

Pour y voir plus clair : prenons l'exemple d'une grille de sudoku (une grille de 9 x 9 cases).
Ça illustre parfaitement un tableau à deux dimensions. Chaque ligne est un tableau de 9 cellules (en vert), et la grille elle-même est un tableau de lignes (en bleu).

Représentation sous forme de tableau d'une grille de sudoku.
En vert : tableau représentant une ligne.
En bleu : tableau contenant les lignes.

Pour accéder à la case (1,5) du schéma (ligne 1, colonne 5), c'est en fait très facile :

on accède au tableau qui contient la ligne 1 avec grille[1] (c'est le tableau vert, qui est dans la case n°1 du tableau bleu)
à l'intérieur de ce tableau (le vert, dont on vient de parler), on va accéder à la case n° 5 : grille[1][5].

La case (1,5) de notre grille est donc grille[1][5].

Pour créer un tel tableau, on commence par créer celui qui va contenir les lignes (en bleu sur le schéma).
Ensuite, pour chaque ligne (dans chaque case de ce tableau), on crée un nouveau tableau (en vert).
Pour terminer, dans chaque ligne, on parcourt toutes les cellules pour leur mettre la valeur 0.
Code : JavaScript

// on cree le tableau bleu, contenant les lignes
var grille = new Array();

// on cree les lignes (tableau vert) les unes après les autres
for(var i=0; i<9; i++)
   grille[i] = new Array();

// on parcourt les lignes...
for(var i=0; i<9; i++)
   // ... et dans chaque ligne, on parcourt les cellules
   for(var j=0; j<9; j++)
      grille[i][j] = 0;

On a un tableau à deux dimensions (autrement dit, un tableau de tableaux).
On utilise donc deux boucles imbriquées pour le parcourir (dans l'exemple ci-dessous, on affiche la valeur de chaque case):
Code : JavaScript

1
2
3

for(var i=0; i<9; i++)
   for(var j=0; j<9; j++)
      alert("Case "+ i + "-" + j +" : "+ grille[i][j]);

Finalement, vous voyez, ça peut parfois servir, un tableau à deux dimensions

.

Mais je ne détaillerai pas plus le cas de tableaux à 3 ou 4 dimensions : si jamais un jour vous avez besoin d'en utiliser, prévenez-nous

(avec ça, je suis tranquille, la boîte à MP a encore de beaux jours devant elle

Q.C.M.

Vrai ou faux ?
En JS, la taille d'un tableau est fixe.

Vrai, la taille d'un tableau est fixé lors de sa création
Faux, on peut ajouter autant d'éléments qu'on veut (en restant raisonnable...)

Dans le cas d'un tableau numéroté :

on peut en connaître la longueur
il est très judicieux d'utiliser une boucle du type "for(indice in tableau)"
Ces deux propositions sont vraies
Aucune des deux propositions n'est vraie

Les tableaux à deux dimensions (par exemple, une grille de morpion) :

c'est différent des tableaux présentés dans ce chapitre, mais ça existe en JS
ce sont en fait des tableaux, dont les cellules contiennent des tableaux "normaux"
c'est impossible à réaliser en JS

Si ce chapitre ne vous a pas semblé très clair, je vous invite à le relire (plutôt que de vous en prendre à ses auteurs

) : comme je vous l'ai dit lors de l'introduction, c'est une notion importante.

De plus, certaines notions concernant les tableaux seront reprises dans la seconde partie, qui traitera de la POO... Mais je n'en dis pas plus pour l'instant

Auteur : JoSé2
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Les tableaux

Un tableau, c'est quoi ?

Des variables numérotées

Quel est l'intérêt ?!

Le vocabulaire...

Comment ça marche ?

Créer un tableau

Initialiser un tableau

Lire ou modifier une valeur

Des tableaux sans queue ni tête...

Plus de contrôles

Longueur d'un tableau ?

Trier un tableau

Exploiter un tableau

Lire un tableau

Boucle "for" classique

Une boucle "for" spéciale...

Exploiter un tableau

Parcours d'un tableau classique

Tableau à plusieurs dimensions

Q.C.M.