Les tableaux

Créé le 04 Juillet 2008, par Anis Safine

Bonjour tout le monde, et bienvenue pour un nouveau palpitant chapitre sur le JavaScript !

Nous allons y découvrir les tableaux et leur utilisation, ce qui va nous permettre d'en finir avec les variables car oui ! Les tableaux sont des variables ! Je vous rassure, c'est un chapitre tranquille !

1. Définition

Commençons par une grande question métaphysique : qu'est-ce que c'est ?

C'est très simple ! Les variables simples que nous connaissons pour le moment ne peuvent stocker qu'une seule donnée et rien de plus ! On pourrait schématiser une variable simple par une boîte dans laquelle on mettrait une information :

Voir les variables comme des boîtes

Vous voyez bien que là, dans nos 5 variables, on stocke une et une seule information, que ce soit un nombre, une chaîne de caractère ou un booléen. C'est là que le tableau va nous servir, car il est capable de stocker plusieurs données séparément !

Si on devait schématiser un tableau, on pourrait le voir comme la "collection de plusieurs variables simples", c'est à dire un groupe de cases :

Le tableau : une collection de boîtes

Sur le schéma, on voit donc une variable simple "variable1" qui ne peut contenir qu'une chaîne de caractères, et un tableau "tableau1" qui contient 3 informations : un nombre entier, un nombre flottant et enfin une chaîne de caractère.

La première interrogation que peut susciter un tableau est la suivante : mais à quoi ça sert ? on peut très bien créer une variable par information !

En effet, dans l'absolu, on pourrait se passer des tableaux, mais on constate très vite avec la pratique que les tableaux sont véritablement utiles pour s'organiser, quand on manipule beaucoup d'informations !

Un exemple concret pour s'en convaincre ! Supposons que vous fassiez un script qui récupère le nom de tous vos membres, leur pseudo et leur date d'inscription à votre site web, et qui doit stocker toutes ces infos... vous stockez tout ça où ?

"Facile ! J'ai qu'à faire les variables nom1, pseudo1, date1 pour le premier membre, nom2, pseudo2, date2 pour le deuxième et ainsi de suite ! "

Bien vu, mais ce que je ne vous ai pas dit c'est que votre site web connaît un véritable succès, et vous n'avez pas moins de 100 000 membres ! Vous allez pas me faire 3 * 100 000 = 300 000 variables tout de même ?

Non, en fait, il serait préférable de faire trois tableaux, un qui contiendrait les noms, un autre qui contiendrait les pseudos et un dernier qui contiendrait les dates d'inscription. Vous ne pouvez pas vous imaginer à quel point cela vous facilite la vie !

Continuons notre étude des tableaux en reprenant l'idée de créer trois variables par membre. D'une certaine façon, cette idée est intéressante, car on remarque que pour différencier chaque membre, on donne un nombre à chaque variable.

Pour le premier membre, on donne le numéro 1 aux variables qui lui sont associées : nom1, pseudo1, date1. Pour le second membre, on donne le numéro 2 : nom2, pseudo2, date2, etc...

Sans ces nombres, on serait incapable de savoir quelle variable correspond à quel membre ! Et bien sachez que tous les tableaux sont basés sur le même principe ! Regardez un peu le schéma d'un tableau suivant :

Exemple de tableau

Dans cet exemple, on a un tableau contenant 5 informations, et chaque information est reliée à un nombre spécifique. Dans la pratique, donc, on dirait, je veux utiliser l'information contenue dans la case n°2, et ça donnerait le booléen true.

Ces "nombres" sont appelés des indices. Retenez-le bien, c'est le terme que j'utiliserai désormais ! On ne dit pas "la case n° 0" mais "la case d'indice 0".

Voilà pour ce qui est de la théorie et les explications sur l'utilité d'un tableau. Maintenant, il va falloir passer à un peu de pratique.

2. La pratique

De la même manière que les variables, les tableaux doivent être déclarés, puis on doit leur affecter une valeur. Voyons un peu comment s'y prendre.

Déclarer un tableau

Vous allez vous rendre compte que les tableaux sont vraiment très proches des variables que l'on connait. En effet, il faut les déclarer en leur choisissant un identifiant.

Voici un exemple :

Oui, c'est un peu particulier comme déclaration ! Il faut utiliser le mot-réservé var suivi de l'identifiant désiré (comme pour toutes les variables), puis les deux mots-réservés : new et Array, et enfin les deux parenthèses.

Nous verrons juste après à quoi servent les parenthèses.
Étape suivante, il faut assigner des valeurs à notre tableau, une par case...

Mais au fait, il en a combien de cases notre tableau ?

Très bonne question ! Pour l'instant, il en a... 0 ! En fait, notre tableau va grandir au fur et à mesure qu'on le remplit de valeur en sachant qu'il ne peut pas y avoir de cases vides entre deux cases pleines !

Concrètement, cela signifie que que si on prend un tableau vide, que l'on remplit sa case 4 avec un nombre (ou n'importe quoi d'autre...), cela va automatiquement remplir les cases d'indices 0, 1, 2 et 3 avec la valeur "undefined". Du coup, ce tableau serait constitué de 5 cases.

De même manière, si la première case que vous remplissez est la case 99, les cases de 0 à 98 seront remplies avec "undefined" et votre tableau sera constitué de 100 cases.

On pourrait également déclarer notre tableau en précisant le nombre de cases qu'il doit comporter :

Cette déclaration demande à créer un tableau nommé "tableau" et comportant 5 cases. Heureusement, vous avez quand même le droit d'utiliser plus de cases que vous n'en avez déclaré !

Le fait de déclarer la longueur d'un tableau peut vous paraître complètement inutile mais c'est une bonne habitude. Je ne m'avancerais pas plus sur ce sujet pour ne pas compliquer les choses.

Maintenant voyons comment assigner une valeur à une case. Dans l'exemple suivant, on remplit les cases d'indices 0, 1 et 2 avec le nom de quelques constructeurs de téléphones mobiles :

Pour assigner une valeur à une case d'un tableau, on utilise donc l'identifiant du tableau suivi de l'indice de la case à remplir entre crochets et vous connaissez la suite...

Pour afficher le contenu d'une case, c'est pareil :

Vous voyez, c'est vraiment pas compliqué !

Enfin, comme pour les variables, vous pouvez initialiser votre tableau. On peut donc réécrire le code d'au-dessus de la manière suivante :

Et là encore, "Sony-Ericsson" est rangé dans la case 0, "Samsung" dans la case 1 etc. Je porte tout particulièrement votre attention sur le fait que la numérotation des cases ne commence pas à 1 mais bien à 0 ! Mais vous l'aurez remarqué,attentifs que vous êtes !

Hey mais attends ! Tout à l'heure, on a déclaré un tableau en lui précisant une longueur de 5 cases... mais c'était la même syntaxe qu'une initialisation !

En effet, bien vu... si vous voulez initialiser un tableau en ne lui donnant qu'une seule valeur entière et bien... vous n'en avez pas le droit avec cette syntaxe ! Car ce que je ne vous ai pas dit, c'est qu'il existe une autre manière de déclarer et initialiser un tableau !

En fait, au lieu d'utiliser "new Array()", on va simplement utiliser les crochets :

Vous n'avez plus besoin d'explications pour ce code, vous êtes des grands maintenant.

Du coup, avec cette syntaxe, vous ne pouvez plus déclarer la longueur de votre tableau, mais vous pouvez l'initialiser avec une seule valeur entière, comme ceci :

Ce bout de code ne déclare pas un tableau de 5 cases, mais un tableau dont la première et unique case est remplie avec l'entier 5.

Pour terminer, nous allons parler de ce que l'on appelle les tableaux multi-dimensionnels !

Vous savez que les tableaux peuvent contenir des nombres, des chaînes de caractère, des booléens et bien sûr, ils peuvent contenir des tableaux !

Supposons que l'on ai le code suivant :

Vous voyez qu'à la première case de tableau, on a stocké un tableau... sans identifiant ! Mais comment faire pour accéder au contenu de ce tableau sans nom ?

Et bien, c'est tout ce qu'il y a de plus simple ! Vous êtes d'accord que "tableau[0]" fait appel au tableau sans nom ? Alors il suffit de faire "tableau[0][0]" pour accéder au contenu de la première case de ce tableau !

Essayez donc le code suivant :

Magie magie ! On a réussi !

Et pour un tableau contenant un tableau qui contient un tableau ? Pareil ! Regardez :

Enfin bref, vous avez compris ! Mais vous n'êtes pas obligés de déclarer vos tableaux multi-dimensionnels avec "new Array()" ! Le code suivant est parfaitement correct :

Et vous savez tout sur la déclaration et l'assignation des tableaux !

3. Plus de pratique

Vous allez encore m'en vouloir, mais je vous ai caché quelque chose... les tableaux sont... des objets !

Oui, je vous ai dit que les tableaux étaient des variables, mais c'était pour simplifier les choses... vous pouvez d'ailleurs admettre que l'utilisation des tableaux est extrêmement proche de celles des variables !

Mais bon c'est pas tout ça, on a des propriétés et méthodes à passer au peigne fin !

Les propriétés

En fait, les tableaux n'ont qu'une seule propriété et c'est la même que celle des chaînes de caractère : length (longueur en français).

Cette propriété retourne le nombre de cases dont est composé le tableau et, ô bonheur, vous avez le droit de la modifier !

Si vous augmentez sa valeur, cela crée des cases de valeur "undefined", si vous diminuez sa valeur, cela supprime les dernières cases du tableau qui sont en trop !

Un petit exemple pour la route :

Comme vous pouvez le constater, en réduisant la taille du tableau à 2 cases, on supprime la dernière valeur "Floriane". En effet, lorsque l'on essaie d'y accéder après le changement de longueur, un joli undefined se dresse devant nos yeux ébahis !

Les méthodes

Nous allons maintenant découvrir quelques méthodes des tableaux, parmi les plus utiles.


Inverser l'ordre des cases d'un tableau, la méthode reverse() :

Cette méthode permet tout simplement d'inverser les éléments d'un tableau. Mais un exemple vaut mieux qu'un long discours :

Et c'est tout !

Trier les valeurs d'un tableau, la méthode sort() :

Cette méthode est vraiment très pratique car elle permet de trier les valeurs d'un tableau par ordre alphabétique. Elle est aussi simple à utiliser que reverse(). Voyez par vous même :

Peut-être vous demandez vous s'il est possible de changer l'ordre de tri et la réponse est ... oui ! Mais il faut savoir créer ses propres fonctions !

Mais ne vous inquiétez pas, l'utilisation complète de toutes les méthodes des tableaux sont présentes dans cette annexe. Vous pourrez toujours revenir dessus quand vous aurez les connaissances nécessaires !

Conclusion

Et voilà ! Pour les tableaux comme les variables, c'est ter-mi-né !

Au chapitre suivant, nous nous ré-intéresserons aux types de données, dernier chapitre avant ... les fonctions !

Accrochez-vous, ça en vaut le coup !