Les tableaux en JavaScript

Définition

Un tableau est un type de variable qui peut contenir plusieurs valeurs.

Les différentes valeurs sont rangées dans les « cases » du tableau numérotées à partir de 0.

Dans le programme ci-dessous nous déclarons un tableau qui contient trois chaînes de caractères et nous les faisons afficher.

var monTableau=["toto","tata","titi"];

println(monTableau[0]);
println(monTableau[1]);
println(monTableau[2]);

Exécuter

Comment cela fonctionne-t-il ?

Pour définir un tableau nous mettons les différents éléments entre crochets et séparés par des virgules.

Pour accéder aux éléments du tableau nous écrivons le nom de la variable suivie de crochets avec le numéro de la case voulue.

Ainsi, monTableau[0], monTableau[1] et monTableau[2] sont trois variables qui correspondent aux 3 cases du tableau.

Modification d'une case d'un tableau

Pour modifier la valeur d'une case d'un tableau, on procède comme avec une variable classique, par exemple l'instruction ci-dessous modifie le contenu de la case numérotée 1 et remplace la chaîne de caractères "tata" par la chaîne de caractères "tutu".

monTableau[1]="tutu";

Ajout d'un élément à un tableau

Comme une chaîne de caractères, un tableau est un objet du langage JavaScript, c'est à dire qu'un tableau contient des propriétés et des méthodes qui sont accessibles par la notation pointée.

En particulier il existe une méthode pour ajouter un élément à la fin d'un tableau : la méthode push. Nous utilisons cette fonctionnalité dans le programme suivant :

var pairs=[];

for(var i=0;i<=20;i=i+2){
  pairs.push(i);
}

println(pairs);

Exécuter

Comment cela fonctionne-t-il ?

Au départ, la variable pairs reçoit un tableau vide représenté par [].

A chaque tour de boucle, la méthode push, utilisée en écrivant pairs.push(i);, permet d'ajouter la valeur de i à la fin du tableau.

Lorsque la boucle est terminée, le tableau contient tous les nombres pairs de 0 à 20.

Exercices

1. Ecrire un programme qui demande de saisir 5 prénoms, puis une fois la saisie terminée, les affiche dans l'ordre inverse où ils ont étés saisis.

2. Réaliser un programme :

On pourra compléter le « squelette de programme » :

var pairs=[];
var impairs=[];

...

print("Nombres pairs :");
println(pairs);
print("Nombres impairs :");
println(impairs);

JS Bin

Nombre d'éléments d'un tableau

Pour connaître le nombre d'éléments d'un tableau il faut utiliser la propriété length de l'objet tableau, exactement comme pour connaître le nombre de caractères d'une chaîne.

Dans le programme ci-dessous nous parcourrons le tableau de nombres pour doubler toutes les valeurs.

var nombres=[1,5,7,12,19,21];

for(var i=0;i<nombres.length;i++){
	nombres[i]=nombres[i]*2;
}

println(nombres);

Exécuter

Comment cela fonctionne-t-il ?

Les éléments du tableau nombres sont numérotées de 0 à nombres.length-1, nous parcourons tous les éléments du tableau grâce à la boucle dans laquelle i varie de 0 à nombres.length-1.

Pour chacun des éléments du tableau, nous remplaçons la valeur par son double.

Exercice

Modifier le programme précédent pour qu'il affiche la somme des nombres rangés dans le tableau.

JS Bin

Autres méthodes

Il existe plusieurs autres méthodes pour manipuler les tableaux, pour en savoir plus :

JavaScript Array object

Quiz

Question 1 - SCORE : 0

La numérotation des éléments d'un tableau commence à :

1

0

-1

Faux ! La bonne réponse est : 0.

On considère le tableau déclaré par l'instruction :

var unTableau=["un","deux","trois"]

L'instruction println(unTableau[1]); affiche :

un

deux

trois

Faux ! La bonne réponse est : "deux", il ne faut pas oublier que la numérotation des éléments d'un tableau commence à 0, donc l'élément d'index 1, correspond au deuxième élément du tableau.

En JavaScript, pour obtenir le nombre d'éléments du tableau unTableau, il faut écrire l'instruction :

unTableau.length

unTableau.length()

length(unTableau)

Faux ! La bonne réponse est : unTableau.length, c'est une propriété de l'objet.

Parmi les déclarations de tableaux suivantes, indiquez celle qui est correcte.

var tableau=(1,2,3)

var tableau={1,2,3}

var tableau=[1,2,3]

Faux ! La bonne réponse est : [1,2,3], en JavaScript un tableau est délimité par des crochets.

BRAVO ! C'est la bonne réponse.

Masquer

Tableaux à deux dimensions

Pour obtenir l'équivalent d'un tableau à deux dimensions il faut créer un tableau de tableaux comme dans l'exemple ci-dessous :

var unAutreTableau=[[2,4,6,8],
[1,3,5,7],
[2,3,5,7]];

Il s'agit d'un tableau qui contient 3 « sous-tableaux », chacun des « sous-tableaux » contenant lui-même 4 nombres entiers, ce qui correspond à un tableau de 3 lignes par 4 colonnes. Pour accéder à l'élément qui se trouve à la 2$^\text{ème}$ ligne et 3$^\text{ème}$ colonne on écrit : unAutreTableau[1][2] (on n'oublie pas que les éléments d'un tableau sont indexés à partir de 0 et il faut noter que l'index de ligne est indiqué en premier).

Enfin, il faut remarquer que unAutreTableau[1] correspond au « sous-tableau » [1,3,5,7] en entier.

Parcours d'un tableau

On peut facilement traiter tous les éléments d'un tableau en utilisant une boucle. Dans l'exemple ci-dessous on double tous les nombres du tableau :

Dans le cas d'un tableau à deux dimensions il faut deux boucles imbriquées pour parcourir le tableau :

var tableau2D=[[3,4,5],
[1,0,-1]];

for(var i=0;i<tableau2D.length;i++){
	for(var j=0;j<tableau2D[i].length;j++){
		tableau2D[i][j]=tableau2D[i][j]*2;
	}
}

Dans cet exemple la variable i de la première boucle permet de parcourir le tableau principal : à chaque itération, tableau2D[i] correspond à la ligne complète d'index i.

La deuxième boucle imbriquée permet de parcourir les éléments de la ligne d'index i : tableau2D[i][j] correspond à l'élément qui figure à la ligne d'index i et à la colonne d'index j.

Le tableau est ainsi parcouru ligne par ligne de gauche à droite et de haut en bas.