Javascript: Les tableaux

  • prérequis : Avoir fini l'introduction au Javascript, la logique booléene, les opérateurs de comparaison, les opérateurs logiques.

  • objectif : Stocker un nombre indéfini de données dans un tableau et savoir le manipuler.

A quoi servent-il ?

Imaginons que l'on veuille stocker tout vos livres préférés dans votre programme.
Avec nos connaissances actuelles, il serait possible de le faire comme ceci:

var livre1 = "harry potter et la chambre des secret"  
var livre2 = "harry potter à l'école des sorciers"  
var livre3 = "harry potter et le prisonnier d'Azkaban"  
...

On se retrouvera alors avec autant de variables que de livres a stocker, ce qui pourrait ne pas être pratique du tout, et chaque livre est nommer individuellement (nom de variable).

Il faudrait trouver une solution pour mémoriser ensemble plusieurs éléments sans devoir les nommer individuellement. Cette solution existe : ce sont les tableaux.

Un tableau est un type de donnée qui permet de stocker un ensemble d'éléments.

la création de tableau

Voici comment on crée un tableau basé sur l'exemple précedant:

var monTableau = ["harry potter et la chambre des secret", "harry potter à l'école des sorciers", "harry potter et le prisonnier d'Azkaban",...];

Attention: Ceci est la syntax courte, il se peut que vous rencontriez une syntax plus longue:

var monTableau = new Array(harry potter et la chambre des secret", "harry potter et la chambre des secret", "harry potter et le prisonnier d'Azkaban",...);  

Le mot clé new est un mot clé réservé au objets, un concept de programmation que nous verrons plus tard.

Syntax:

var nomDuTableau = [valeur1, valeur2, valeur3,...];  

Selectionner un éléments de tableau

Tous les élements d'un tableau sont identifié par un numéro, appelé indice, commençant par 0.
Dans notre tableau précedant, les indices seraient:

dessin sans titre 6

C'est grâce à ces indice que l'on va acceder au élementsdu tableau.
Ainsi on peut acceder aux élementsd'un tableau de cette façon:

// creation du tableau
var monTableau = ["harry potter et la chambre des secret", "harry potter à l'école des sorciers", "harry potter et le prisonnier d'Azkaban",...];  
//affiche les élements du tableau
console.log(monTableau[0]); // affiche "harry potter et la chambre des secret  
console.log(monTableau[1]); // affiche "harry potter à l'école des sorciers"  
console.log(monTableau[2]); // affiche "harry potter et le prisonnier d'Azkaban"  

Remplir et/ou le tableau

Grâce aux indices des tableaux on peut accéder, modifier ou même ajouter des élements au tableau.
Reprenons notre tableau de tout à l'heure.

var monTableau = ["harry potter et la chambre des secret", harry potter à l'ecole des sorciers, "harry potter et le prisonnier d'Azkaban",...];  

En faisant :

console.log(monTableau[1]); //affiche "harry potter à l'ecole des sorciers"

j'accède à l'element d'indice 1 (soit le deuxieme element), mais j'aurai trés bien pu le modifier en selectionant l'element et en lui attribuant une nouvelle valeur:

monTableau[1] = "harry potter 10: Le retour de Voldemort";  
console.log(monTableau[1]); // affiche "harry potter 10: Le retour de Voldemort"  

Ici, mon tableau a 3 elements (de 0 à 2) et je peux lui ajouter un quatrieme en notant:

monTableau[3] = "harry potter et la coupe de feu";  

Mon tableau contient maintenant 4 élements.

Attention: avec cette methode, si j'avais mis monTableau[6] = "harry potter 12"; (alors qu'il n'y a que 4 élements), on aurait eu un tableau avec mes valeur de base puis des emplacements vides pour combler le trous dans le tableau!

Note: Pour connaitre la taille d'un tableau (le nombre de ces élements), on peut utiliser l'attribut length:

console.log(monTableau.length) //affiche 4  

Avec methode push , pop, reverse ...:

Nous le verrons plus loin lors du cour sur les objets, mais il existe plusieurs fonctions dejà intégré à Javascript permettant de manipuler les tableaux:

  • push: monTableau.push('harry potter 7'); ajoute la valeur "harry potter 7" à la fin du tableau, plus besoin de se préocuper de l' indice de celui-ci.
  • pop: monTableau.pop(); Cette méthode supprime le dernier élément d'un tableau et retourne cet élément.
  • reverse monTableau.reverse();Cette méthode renverse l'ordre des éléments d'un tableau - le premier élément devient le dernier, et le dernier devient le premier. Le tableau est modifié par cette méthode.

Il existe un grand nombre de ces methode, autant pour les tableau que pour les nombres ou les chaines de caractère.

tableau multi-dimensionnelle

Dans les exemples précedants, nous travaillons avec des tableau simple, mais nous pouvons créer des tableaux de tableaux!

Pour ce faire c'est simple, chaque élements du tableau est un tableau:

var monTableau = [  ["un","deux","trois"], [1, 2, 3]  ];  
console.log(monTableau[1]); // affiche [1, 2, 3]  

Syntax:

var nomDuTableau = [ [val1,val2,..], [val1, val2,...], [val1, val2, val3]];  

Les régles pour selectionner et/ou modifier le tableau de change pas, il faut juste preciser un peu plus les élements:

//crée notre tableau
var tableau = [["un","deux,"trois"], [1,2,3]];

console.log(tableau[0][1]); // affiche "deux"  
console.log(tableau[1][2]); affiche 3  

Que se passe-t-il?

on va d'abord chercher le premier élements grâce à l'indice 0 des premier crochets.
Ensuite ce premier élement est aussi un tableau, on lui dit d'aller chercher le deuxieme élement grâce à l'indice 1.

Matthieu Dehondt

Read more posts by this author.

Lille - France

Subscribe to Skillcode

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!