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" |
| Indices | 0 | 1 | 2 | 3 |
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 premier danger bis!
Si on utilise la syntaxe raccourcie c'est différent!!!
Démo
<h2>Avec la syntaxe raccourcie</h2>
<script>
var mtab=[5];
console.log(mtab);
console.log(mtab.length);
</script>
Lorsqu'un tableau déclaré avec la syntaxe raccourcie est initialisé avec une et une seule valeur de type number cette valeur représente bien la valeur de la première cellule du tableau.
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 36 cellules sont 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, on "empile".
- pop() pour enlever et renvoyer le dernier élément du tableau, on "dépile".
- shift() pour enlever et renvoyer le premier élément du tableau, avec glissement des indices vers la gauche.
- unshift() pour ajouter des éléments au début du tableau, , avec glissement des indices
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>
Quiz
Clique-moi pour générer un questionnaire !
