• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

Les tableaux

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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" :p ) 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 :D .

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

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.

Image utilisateur

Voici comment on peut "imaginer" un tableau

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é :D ), on va donc dire l'élément d'indice i.

Comment ça marche ?

Maintenant qu'on peut se comprendre (entre geeks :D ), 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").

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 :

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

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.

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 :p .
Pour ajouter un nouvel élément, on modifie simplement sa valeur, fait comme s'il existait déjà.

Exemple :

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 :

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 :

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

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.

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 :

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

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

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é :D .

Exploiter un tableau

Eh bien je crois qu'on a tout vu... sauf l'essentiel :p .
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 :

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

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 :

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

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

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

Image utilisateur

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.

// 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;

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 :p (avec ça, je suis tranquille, la boîte à MP a encore de beaux jours devant elle :D ).

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 :p ) : 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 ;) .

Exemple de certificat de réussite
Exemple de certificat de réussite