Table des matières
Les tableaux
Les variables de JavaScript ne permettent de stocker qu'une seule donnée à la fois. Or, il est souvent utile de manipuler de nombreuses données.
JavaScript propose une structure permettant de stocker l'ensemble de ces données dans une “variable commune” : le tableau.
Comment déclarer et initialiser un tableau ?
Déclaration d'un tableau vide :
var a = []; // le nom du tableau est 'a'
Déclaration d'un tableau avec des valeurs :
var a = [12,5,89]; var semaine = ['lundi','mardi','mercredi','jeudi','vendredi','samedi','dimanche'];
Comment accéder aux éléments d'un tableau ?
Les éléments d'un tableau sont accessibles par un index. Cet index est un nombre entier avec pour valeur initiale 0.
var a = [12,5,89]; document.write(a[1]); // affiche 5
Index | 0 | 1 | 2 |
---|---|---|---|
Données | 12 | 5 | 89 |
Comment modifier une valeur dans un tableau ?
Pour modifier la valeur située à l'index 2 : a[2] = 25
;
Exemple :
var a = [12,5,89]; document.write(a[2] + "<br />"); // Affiche la valeur du tableau à l'index 2, soit 89 a[2] = 25; // On donne une nouvelle valeur au contenu du tableau à l'index 2 document.write(a[2]); // Affiche la valeur du tableau à l'index 2, soit 25
A faire vous-même 1 | Codepen |
---|---|
Soit le programme suivant : var semaine=['lundi','mardi','mercredi','jeudi','vendredi','samedi','dimanche']; for (i=0;i<=4;i=i+1) { document.write (semaine[i] + "<br />"); }
|
A faire vous-même 2 | Codepen |
---|---|
Écrire un script qui demande à l'utilisateur un numéro de mois (de 1 à 12), puis affiche : «Vous avez sélectionné le mois de : xxxxxx» (avec xxxxxx janvier si l'utilisateur a choisi 1, août si l'utilisateur a choisi 8,…). |
Comment ajouter une valeur dans un tableau ?
La méthode push()
permet d’ajouter un ou plusieurs items à la fin d’un tableau :
Exemple :
var noms = ['Arthur','Juliette', 'Thomas']; noms.push('Alexandre'); document.write(noms);
La méthode unshift()
permet d’ajouter un ou plusieurs items au début du tableau :
Exemple :
var noms = ['Arthur','Juliette', 'Thomas']; noms.unshift('Alexandre'); document.write(noms);
La méthode splice()
permet d'ajouter ou de supprimer des éléments n'importe où dans un tableau.
Elle prend 2 arguments :
- la position à partir de laquelle les nouveaux éléments devront être ajoutés. Les nouveaux éléments vont se placer juste avant l'élément correspondant à l'indice donné ;
- le nombre d'éléments à supprimer. Ce nombre sera nul si on ne supprime aucun élément.
Exemple :
var noms = ['Arthur','Juliette', 'Thomas']; noms.splice(1,0,'Alexandre','Léa'); document.write(noms);
Comment supprimer une valeur dans un tableau ?
La méthode shift()
et pop()
retire respectivement le premier et le dernier élément du tableau :
Exemple :
var noms = ['Arthur','Juliette', 'Thomas']; noms.shift(); noms.pop(); document.write(noms);
La méthode splice()
permet aussi de supprimer des éléments d'un tableau.
Elle prend 2 arguments :
- la position à partir de laquelle les éléments devront être supprimés ;
- le nombre d'éléments à supprimer.
Exemple :
var noms = ['Arthur','Juliette', 'Thomas','Maxime','Camille']; noms.splice(2,2); document.write(noms);
Comment classer les éléments d'un tableau ?
La méthode sort()
permet de trier les éléments d'un tableau dans l'ordre alphabétique.
Exemple :
var noms = ['Arthur','Juliette', 'Thomas','Maxime','Camille']; noms.sort(); document.write(noms);
Comment trouver la position d'un élément dans un tableau ?
La méthode indexOf()
permet de connaître la position d'un élément dans un tableau. (Index of signifie “indice de”).
Cette méthode renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1.
Exemple :
var noms = ['Arthur','Maxime','Juliette', 'Thomas','Maxime','Camille']; var position = noms.indexOf('Maxime'); document.write('Maxime a été trouvé en position ' + position + ' dans le tableau.');
Par défaut la recherche commence à l'indice 0. Pour commencer la recherche à partir d'un autre indice, il faut l'indiquer dans la méthode avec un deuxième paramètre.
Exemple :
var noms = ['Arthur','Maxime','Juliette', 'Thomas','Maxime','Camille']; var position = noms.indexOf('Maxime',2); document.write('Maxime occupe la position ' + position + ' dans le tableau.');
Comment inverser l'ordre des éléments d'un tableau ?
La méthode reverse()
permet d'inverser l'ordre des éléments d'un tableau.
Utiliser conjointement avec la méthode sort()
, elle peut permettre de classer les éléments d'un tableau par ordre inverse de l'ordre alphabétique ou par ordre décroissant.
Exemple :
var noms = ['Arthur','Juliette', 'Thomas','Maxime','Camille']; noms.sort(); // On classe par ordre alphabétique noms.reverse(); // On inverse l'ordre document.write(noms);
Comment transformer un tableau en une de chaîne de caractères ?
La méthode join()
va retourner les différentes valeurs d'un tableau sous forme de chaîne de caractères. Elle prend comme argument le séparateur choisi.
Exemple :
var noms = ['Arthur','Juliette', 'Thomas','Maxime','Camille']; var chaine = noms.join(' - '); // On ajoute un tiret et deux espaces entre les prénoms document.write(chaine);
Comment créer un tableau à partir de plusieurs tableaux ?
La méthode concat()
permet de fusionner deux tableaux pour en créer un nouveau. Elle prend comme argument le tableau à fusionner à un tableau de départ.
Exemple :
var garçons = ['Arthur','Thomas','Maxime']; var filles = ['Juliette','Camille']; var garçonsFilles = garçons.concat(filles); var fillesGarçons = filles.concat(garçons); document.write(garçonsFilles + "<br />"); document.write(fillesGarçons);
Comment connaitre la taille d’un tableau ?
Il est possible de connaître la taille d’un tableau avec la propriété length
:
Exemple :
var noms = ['Arthur','Juliette', 'Thomas']; var taille = noms.length; document.write(taille);
Comment parcourir un tableau ?
Il faut utiliser une boucle for
et faire autant d’itérations qu’il y a d’items.
Exemple :
var noms = ["Arthur", "Juliette", "Thomas"]; var taille = noms.length; for(var i = 0; i< taille; i++){ document.write(noms[i] + "<br />"); }
Comment copier un tableau ?
En javascript, on ne peut pas copier un tableau à l’aide du signe d’égalité =
du style tableau1 = tableau2.
En utilisant le signe d’égalité, le tableau sera bien copié mais toute modification sur le tableau copié entrainera cette modification dans le tableau d’origine.
Pour dupliquer un tableau en javascript, il faut nécessairement copier les éléments un à un. Exemple :
var tableau1 = ["Arthur", "Juliette", "Thomas"]; var tableau2 = []; for (var i = 0; i < tableau1.length; i++){ tableau2[i] = tableau1[i]; } document.write(tableau2);
A faire vous-même 3 | tableau.js |
---|---|
Deux tableaux contiennent les notes obtenues au premier et au deuxième semestre par un étudiant : var notes1 = [12,15,5,12,8,9,12,14,8,5,15,7] // notes du premier semestre; var notes2 = [8,16,14,3,15,12,8,7,10,12,15,5] // notes du deuxième semestre
Écrire un script permettant : |