Informatique


Les tableaux à une dimension

Aller à

Wat is dat?

Le tableau est une variable indicée, à chaque indice on peut stocker une valeur, quelle que soit son type.
Le premier indice est 0.

En Javascript un tableau est un simple container destiné à stocker des valeurs.

Voici pour exemple le tableau montab à chaque cellule du tableau est affecté un prénom:

Valeurs"Charles""Roland""Urbain""Godefroid"
Indices0123


Déclarer un tableau

Syntaxe complète

Le tableau est une variable de type object, on utilise le constructeur Array() pour le créer.

Syntaxe
	var tab=new Array();
	
Syntaxe abrégée

On peut (c'est le cas le plus fréquent) se dispenser d'utiliser le constructeur, on le remplace par des crochets.

Syntaxe
	var tab=[];
	

Initialiser un tableau au moment de sa déclaration

Syntaxe complète
Démo
	<h2>Déclaration avec le constructeur</h2>
	<script>
	var montab1, montab2;
	//Un tableau de chaînes de caractères
	montab1=new Array("Charles", "Roland","Urbain", "Godefroid");
	console.log(montab1);
	//Un tableau où on mélange les types de valeurs
	montab2=new Array("Louis", 50,1.72, "Professeur",true);
	console.log(montab2);
	</script>
Syntaxe courte
Démo
	<h2>Déclaration sans le constructeur</h2>
	<script>
	var montab1, montab2;
	//Un tableau de chaînes de caractères
	montab1=["Charles", "Roland","Urbain", "Godefroid"];
	console.log(montab1);
	//Un tableau où on mélange les types de valeurs
	montab2=["Louis", 50,1.72, "Professeur",true];
	console.log(montab2);
	</script>

Initialisation d'un tableau avec une boucle

L'initialisation au moyen de la méthode Array() ou [] est pratique mais applicable dans peu de cas.

De manière plus générale on initialise un tableau avec une boucle.

Initialisation d'un tableau à 0

On utilise une boucle for.
On récupète le compteur de boucle pour cibler l'indice de chaque cellule du tableau.

Démo
	<h2>Initialisation d'un tableau à 0</h2>
	<script>
	var montab,i;
	montab=new Array();
	//On initialise chaque cellule à 0
	for(i=0;i<10;i++)	{
		montab[i]=0;
	}
	//On affiche le tableau initialisé
	for(i=0;i<10;i++)	{
		document.write("Cellule "+i+": "+montab[i]+" <br>");
	}
	</script>
Initialisation d'un tableau de 5 cellules par l'utilisateur

On utilise une boucle for.
On récupète le compteur de boucle pour cibler l'indice de chaque cellule du tableau.

Démo
	<h2>Initialisation d'un tableau de 5 cellules par l'utilisateur</h2>

	<script>
	var montab,i;
	montab=new Array();
	//On initialise 5 cellules au choix de l'utilisateur
	for(i=0;i<5;i++)	{
		montab[i]=parseInt(window.prompt("Entrer une valeur dans la cellule "+i));
	}
	//On affiche le tableau initialisé
	for(i=0;i<5;i++)	{
		document.write("Cellule "+i+": "+montab[i]+" <br>");
	}
	</script>
Initialisation d'un tableau de n cellules par l'utilisateur (cas1)

On utilise une boucle while.
Dans ce cas on ne sait pas la dimension du tableau, il faut donc prévoir une condition d'arrêt.
Lorsque l'utilisateur entre une valeur spécifique, qui ne doit pas entrer dans le tableau, on arrête la boucle.

Démo
	<h2>Initialisation d'un tableau de n cellules par l'utilisateur</h2>
	<script>
	var montab,i;
	montab=new Array();
	i=0;
	val=parseInt(window.prompt("Entrer une valeur"));
	//On initialise chaque cellule
	while(val!=999){
		montab[i]=val;
		i++;
		val=parseInt(window.prompt("Entrer une valeur"));
	}
	//On affiche le tableau initialisé
	for(i=0;i<montab.length;i++)	{
		document.write("Cellule "+i+": "+montab[i]+" <br>");
	}
	</script>
Initialisation d'un tableau de n cellules par l'utilisateur (cas2)

On utilise une boucle for.
Et on utilise Infinity, une propriété globale du JS, et qui représente l'infini. Et l'instruction break qui permet de casser la boucle.

Démo
<h2>Initialisation d'un tableau de n cellules par l'utilisateur (avec for!)</h2>
<script>
var montab,val;
montab=new Array();
//On initialise chaque cellule
for(let i=0;i<Infinity;i++){
	val=parseInt(window.prompt("Entrer une valeur"));
	if(val===999){
		break;
	}
	else{
		montab[i]=val;
	}
/*On aurait pu écrire
(val===999)?breaks:montab[i]=val*/
}
//On affiche le tableau initialisé
for(i=0;i<montab.length;i++)	{
	document.write("Cellule "+i+": "+montab[i]+" <br>");
}
</script>

Propriété des tableaux

Une propriété s'impose, length renvoie le nombre de cellules d'un tableau.

Démo
	<h2>Nombre de cellules d'un tableau</h2>
	<script>
	var montab,nb_cel;
	//Un tableau de chaînes de caractères
	montab=["Charles", "Roland","Urbain", "Godefroid"];
	nb_cel=montab.length;
	document.write("Nombre de cellules du tableau montab: ",nb_cel);
	</script>

Attention danger!

Un premier danger

On pourrait penser que le code suivant initialise la première cellule du tableau avec la valeur 5, et pourtant!

Démo
	<h2>Oups!</h2>
	<script>
	var tab=new Array(5);
	console.log(tab.length); //renvoie 5
	console.log(tab[0]); //renvoie undefined
	</script>

Lorsqu'un tableau est initialisé avec une et une seule valeur de type number cette valeur représente la taille du tableau!
Ce tableau a bien cinq cellules qui n'ont pas été initialisées ce qui explique le type undefined.

Dans l'exemple suivant, par contre, il y a 2 valeurs et donc celles-ci initialisent les 2 premières cellules du tableau.

Démo
	<h2>Oups!</h2>
	<script>
	var tab=new Array(5,136);
	console.log(tab.length); //renvoie 2
	console.log(tab[1]); // renvoie 136
	console.table(tab); // renvoie 5 et 136
	</script>
Un deuxième danger

On pourrait penser que le code suivant renvoie 3 dans la console, et pourtant!

Démo
	<h2>Oups!</h2>
	<script>
		var t1=[];
		t1[2]="a";
		t1[3]="b";
		t1[6]="c";
		console.log(t1.length); //renvoie 7!
		console.table(t1);
	</script>

Cela renvoie 7 dans la console! On peut donc omettre d'affecter des cellules, mais il n'en reste pas moins vrai que la longueur du tableau est comptée de 0 à l'indice de cellule le plus élevé!!!

Un troisième danger

Un tableau est une variable indicée, chaque indice étant de type number.

On peut donner aux cellules des noms mnémoniques de type string, c'est là que les soucis commencent...

Démo
	<h2>Oups!</h2>
	<script>
	var t1=[];
	t1[0]="a0";
	t1["brol"]="abrol";
	t1[1]="a1";
	t1["brol2"]="abrol2";
	console.log(t1.length); //renvoie 2!!
	console.log(t1["brol"]); //renvoie abrol
	console.table(t1);
	</script>

Les cellules ayant un nom mnémoniques ne sont pas prises en comptes par la proriété length, et pourtant elles existent!!!

Un quatrième danger

L'indice de type string fonctionne si c'est un chiffre alphanumérique!.

Démo
	<h2>Oups!</h2>
	<script>
	var t1=[];
	t1[0]="a0";
	t1["brol"]="abrol";
	t1[1]="a1";
	t1["brol2"]="abrol2";
	t1["38"]="a38";
	console.log(t1.length); //renvoie 39
	console.table(t1);

	</script>
Un cinquième danger

Passons notre tableau t1 dans un for.

Démo
	<h2>Oups!</h2>
	<script>
	var t1=[];
	t1[0]="a0";
	t1["brol"]="abrol";
	t1[1]="a1";
	t1["brol2"]="abrol2";
	t1["38"]="a38";
	console.log(t1.length);
	for(let i=0;i<t1.length;i++){
		console.log(t1[i]); //renvoie a0 a1 undefined a38
	}
	console.table(t1);
	</script>

Il ne prend que les cellules indicées avec un chiffre type number ou un chiffre type string ... et je ne m'explique pas le unfefined...

En JavaScript, n'utilisez jamais de type string pour indicer les tableaux!


Méthodes des tableaux

Ajouter et supprimer des éléments

  • push() pour ajouter des éléments à la fin du tableau (nombre de paramètres illimités)
  • unshift() pour ajouter des éléments au début du tableau (nombre de paramètres illimités)
  • shift() pour supprimer le dernier élément du tableau
  • pop() pour supprimer le premier élément du tableau

Démo
	<h2>Illustrons push(), unshift(), shift() et pop()</h2>
	<script>
	var montab1;
	//n tableau de chaînes de caractères
	montab1=new Array("Charles", "Roland","Urbain", "Godefroid");
	alert(montab1+" ---Nombre de cellules: "+montab1.length);
	//On ajoute en fin de tableau
	montab1.push("Pierre","Marie","Paul");
	alert(montab1+" ---Nombre de cellules: "+montab1.length);
	//On ajoute en début de tableau
	montab1.unshift("Jacques","Judas");
	alert(montab1+" ---Nombre de cellules: "+montab1.length);
	//On supprime en fin de tableau
	montab1.pop();
	alert(montab1+" ---Nombre de cellules: "+montab1.length);
	//On supprime en début de tableau
	montab1.shift();
	alert(montab1+" ---Nombre de cellules: "+montab1.length);
	</script>
Chaînes de caractères et tableaux

  • split() permet de les découper en un tableau en fonction d'un séparateur.
  • join() permet de créer une chaîne de caractères à partir d'un tableau

Démo
	<h2>Chaînes et tableaux</h2>
	<script>
	var machaine,montab;
	machaine="Chaîne de caractères en tableau en utilisant l'espace comme séparateur";
	//Je transforme cette chaîne en tableau
	montab=machaine.split(" ");
	alert(montab + " -----Nombre de cellule: "+montab.length);
	//Je retransforme en une chaîne
	machaine=montab.join(" ");
	alert(machaine);
	</script>