Outils pour utilisateurs

Outils du site


javascript:les_tableaux

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 />");
}


Quel est le résultat attendu après l’exécution de ce programme ? Vérifiez votre réponse à l'aide de Codepen


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 :
- de fusionner les notes des deux semestres dans un nouveau tableau nommé notes[] ;
- de demander de saisir une note supplémentaire pour l'assiduité. Elle sera insérée dans le tableau précédent ;
- d'afficher sur une même ligne les notes du tableau séparées d'un espace, un tiret et d'un deuxième espace (exemple : 12 - 18 - 9 - etc) ;
- Afficher le nombre de notes supérieures ou égales à 10 ;
- de calculer et d'afficher la moyenne des notes ;
- d'afficher la note la plus basse et la note la plus haute ;
- de compter le nombre d'apparitions de la note 12 dans le tableau.

Facultatif (pour les plus rapides)
- de compter le nombre d'apparitions de chaque note dans le tableau.

Modèle :
Notes des étudiants : 12 - 15 - 5 - 12 - 8 - 9 - 12 - 14 - 8 - 5 - 15 - 7 - 8 - 16 - 14 - 3 - 15 - 12 - 8 - 7 - 10 - 12 - 15 - 5 - 5
13 notes sont supérieures ou égales à 10.
La moyenne est de 10.1 / 20
La note la plus basse est 3 / 20
La note la plus haute est 16 / 20
La note 12 a été obtenu 5 fois.

Facultatif
La note 12 a été obtenu 5 fois.
La note 15 a été obtenu 4 fois.
La note 5 a été obtenu 4 fois.
La note 8 a été obtenu 4 fois.
La note 9 a été obtenu 1 fois.
La note 14 a été obtenu 2 fois.
La note 7 a été obtenu 2 fois.
La note 16 a été obtenu 1 fois.
La note 3 a été obtenu 1 fois.
La note 10 a été obtenu 1 fois.

javascript/les_tableaux.txt · Dernière modification: 10/07/2019 21:15 par Stéphane LAURENT