Array, Set et Map
Tableaux en JavaScript: Array
Pour plus d'information, vous pouvez vous référer à cette page: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array
Les arrays sont des tableaux. Il s'agit de listes avec des index.
Tableau à une dimension (ligne)
Un tableau en "une dimension" est une ligne:
[case 1, case2, case3, case4, case5, etc , dernièrecase]
Tableau à deux dimensions (table)
Un tableau en "deux dimensions" est une table:
[case1ligne1, case 2ligne1, case3igne1, case4igne1, case5igne1, etc , dernièrecaseigne1]
[case1igne2, case2igne2, case3igne2, case4igne2, case5igne2, etc , dernièrecaseigne2]
[case1igne3, case2igne3, case3igne3, case4igne3, case5igne3, etc , dernièrecaseigne3]
etc..
Créer un tableau Array en JavaScript
Tableau à une dimension (ligne)
Syntaxe
Pour qu'une variable maVariable devienne un tableau avec trois cases contenant les variables ou les valeurs case1, case2 et case3, la syntaxe est la suivante:
maVariable = [case1, case2, case3];
On utilise des crochets pour ouvrir et fermer le tableau, et des virgules pour séparer les cases
Exemples
Voici un exemple de tableau avec deux cases (des chaines de caractères) stocké dans la variable coursProg
let coursProg = ['Langage du web', 'Algorithmique'];
Voici un exemple de tableau avec cinq cases (des Numbers) stocké dans la variable mesNotes:
let mesNotes = [15 , 18, 16 , 12 , 13.5 ];
Voici un exemple de tableau avec quatre cases (des chaines de caractères) stocké dans la variable prenoms:
let prenom1 = "Lauren";
let prenom2 = "Morgan";
let prenom4 = "Camille";
let prenoms = [prenom1 , prenom2, "Martine" , prenom4 ];
Tableau à deux dimensions (table)
Principe
Un tableau à deux dimensions (une table) est un tableau dont les cases sont contiennent un tableau.
Etape 0: créér un tableau "vide"
monTableauADeuxDimensions = [ ] ;
Etape 1: mettre la structure des lignes
monTableauADeuxDimensions =
[
[ ligne 1 ],
[ ligne 2 ],
[ ligne 3 ],
[ ligne 4 ]
];
Etape 2: remplir les lignes
monTableauADeuxDimensions =
[
[case1, case2, case3] ,
[case1, case2, case3] ,
[case1, case2, case3] ,
[case1, case2, case3]
];
L'étape 2 équivaut à monTableauADeuxDimensions =[ [case1, case2, case3] , [case1, case2, case3] , [case1, case2, case3] , [case1, case2, case3] ];
Syntaxe
Pour qu'une variable maVariable devienne un tableau avec deux lignes de trois cases contenant les variables ou les valeurs case1ligne1, case2ligne1, case3ligne1, case1ligne2, case2ligne2, case3ligne2, la syntaxe est la suivante:
maVariable = [ [case1ligne1, case 2ligne1, case3igne1], [case1ligne2, case 2ligne2, case3igne2] ];
Exemples
Voici un exemple de tableau avec deux lignes de deux cases (des chaines de caractères) stocké dans la variable cours. La première ligne contient les cours de programmation, et la deuxième de communication:
let cours = [ ['Langage du web', 'Algorithmique'] , ['SIC', 'Sociologie'] ];
Voici un exemple de tableau avec quatre lignes deux case (des Numbers) stocké dans la variable mesNotes (une ligne par cours)
let mesNotes = [ [15 , 18], [ 16 , 12] , [13.5, 12] , [18,20] ];
Voici un exemple de tableau avec quatre cases et deux lignes (des chaines de caractères) stocké dans la variable prenoms et noms:
let prenom1 = "Lauren";
let prenom2 = "Morgan";
let prenom4 = "Camille";
let prenoms = [prenom1 , prenom2, "Martine" , prenom4 ];
let nom1 = "Thevin";
let nom2 = "Lee";
let nom3 = "Martin";
let noms = [nom1 , nom2, nom3 , "Smith" ];
let tableauNomPrenom= [noms, prenoms]
Exercice 1 : Création de tableau
Question 1: Créer en Javascript un tableau menu avec le nom de 5 plats, puis afficher-le dans un alert
let menu=["Raclette", "Soupe de potiron", "Pates bolognese", "Salade de tomates", "Crème brulée" ];
alert(menu);
Question 2: Créer en Javascript un tableau distance avec 3 kilométrages pour aller de chez vous au campus, de chez-vous au supermarché et de chez-vous à la mer, puis afficher-le dans un alert
let distance=[25, 0.3, 1.2 ];
alert(distance);
Question 3: Créer en Javascript un tableau etudiants avec en ligne les personnes et en colonne leurs noms et prénoms. Faites et tableau pour 3 étudiants imaginaires
let etudiants= [ ["Dupont", "Martine" ], ["Jane", "Doe" ], ["Smith", "Williams" ]]
Récupérer les éléments d'un tableau Array en JavaScript
Tableau à une dimension (ligne)
Syntaxe
Si une variable maVariable contient un tableau, il suffit d'utiliser des crochets avec l'index:
maVariable[0]; //la première case
maVariable[1]; //la deuxieme case
maVariable[maVariable.length-1]; //la dernière case
Exemples
Voici un exemple pour afficher le premier cours de coursProg:
let coursProg = ['Langage du web', 'Algorithmique'];
alert( "Premier cours: " + coursProg[0] );
Voici un exemple de tableau affcher la troisième notes de mesNotes:
let mesNotes = [15 , 18, 16 , 12 , 13.5 ];
alert( "Troisième note: " +mesNotes[2] );
Tableau à deux dimensions (table)
Syntaxe
Si une variable maVariable contient un tableau, il suffit d'utiliser des crochets avec l'index. Le premier crochet récupère la ligne, le deuxième la colonne.
maVariable = [ [case1ligne1, case 2ligne1, case3igne1], [case1ligne2, case 2ligne2, case3igne2] ];
maVariable[0]; //la première ligne [case1ligne1, case 2ligne1, case3igne1]
maVariable[1]; //la deuxième ligne [case1ligne2, case 2ligne2, case3igne2]
maVariable[0][0]; //la première ligne première case case1ligne1
maVariable[1][2]; //la deuxième ligne troisième case case3igne2
Exemples
Voici comment récupérer la note 15 dans le tableau suivant:
let mesNotes = [ [15 , 18], [ 16 , 12] , [13.5, 12] , [18,20] ];
alert ( mesNotes[0][0])
Voici comment récupérer les notes du deuxième cours dans le tableau suivant:
let mesNotes = [ [15 , 18], [ 16 , 12] , [13.5, 12] , [18,20] ];
alert ( mesNotes[1])
Exercice 2 : Récuperer les valeurs d'un tableau
Question 1: Afficher le deuxième plat d'un tableau menu avec le nom de 5 plats,
let menu=["Raclette", "Soupe de potiron", "Pates bolognese", "Salade de tomates", "Crème brulée" ];
alert(menu[1]);
Question 2: Afficher la dernière distance avec 3 kilométrages pour aller de chez vous au campus, de chez-vous au supermarché et de chez-vous à la mer
let distance=[25, 0.3, 1.2 ];
alert(distance[distance.length-1]);
Question 3: Afficher le prénom du premier étudiant et le nom et prénom du deuxième dans etudiants avec en ligne les personnes et en colonne leurs noms et prénoms.
let etudiants= [ ["Dupont", "Martine" ], ["Jane", "Doe" ], ["Smith", "Williams" ]]
alert(etudiants[0][1]);
alert(etudiants[1]);
Ajouter un élément ou supprimer un élément
Pour ajouter un élement à la fin d'un tableau monTableau, il suffit de faire:
monTableau.push(maNouvelleValeur);
Pour supprimer un élement à la fin d'un tableau monTableau, il suffit de faire:
monTableau.pop()
Exercice 3 : Ajouter les valeurs d'un tableau
Question 1: Ajouter un sixième plat d'un tableau menu avec le nom de 5 plats
let menu=["Raclette", "Soupe de potiron", "Pates bolognese", "Salade de tomates", "Crème brulée" ];
menu.push("Omelette");
Question 2: Ajouter un nouvel étudiant dans le tableau etudiants
let etudiants= [ ["Dupont", "Martine" ], ["Jane", "Doe" ], ["Smith", "Williams" ]]
nouvelEtudiant=["Thevin","Lauren"];
etudiants.push(nouvelEtudiant);
Question 3: Ajouter un prénom au deuxième étudiant dans le tableau etudiants
let etudiants= [ ["Dupont", "Martine" ], ["Doe", "Jane" ], ["Smith", "Williams" ]]
etudiants[1].push("Tarzan");
Modifier des valeurs
Pour modifier des valeurs, il suffit de récupérer la case du tableau que l'on veut changer et d'y affecter une nouvelle valeur:
Tableau à une dimension (ligne)
Syntaxe
Si une variable maVariable contient un tableau :
maVariable[0]=nouvelleValeur; //la première case prend une nouvelle valeur
maVariable[1]=nouvelleValeur; //la deuxième case prend une nouvelle valeur
maVariable[maVariable.length-1]=nouvelleValeur; //la dernière case prend une nouvelle valeur
Exemples
Voici un exemple pour modifier le premier cours de coursProg:
let coursProg = ['Langage du web', 'Algorithmique'];
coursProg[0]="Cours PhP";
alert( "Premier cours: " + coursProg[0] );
Voici un exemple de tableau pour modifier la troisième notes de mesNotes:
let mesNotes = [15 , 18, 16 , 12 , 13.5 ];
mesNotes[2]=10;
alert( "Troisième note: " +mesNotes[2] );
Tableau à deux dimensions (table)
Syntaxe
Si une variable maVariable contient un tableau:
maVariable[0][0]=nouvelleValeur; //la première ligne première case case1ligne1 prend la valeur nouvelleValeur
maVariable[1][2]=nouvelleValeur; //la deuxième ligne troisième case case3igne2 prend la valeur nouvelleValeur
Exemples
Voici comment modifier la note 15 dans le tableau suivant:
let mesNotes = [ [15 , 18], [ 16 , 12] , [13.5, 12] , [18,20] ];
mesNotes[0][0]=17;
alert ( mesNotes[0][0])
Voici comment modifier les notes du deuxième cours dans le tableau suivant:
let mesNotes = [ [15 , 18], [ 16 , 12] , [13.5, 12] , [18,20] ];
mesNotes[1]=[7,20];
alert ( mesNotes[1])
Exercice 4 : Modifier les valeurs des tableaux
Question 1: Modifier le deuxième plat d'un tableau menu avec le nom de 5 plats par la valeur "en rupture"
let menu=["Raclette", "Soupe de potiron", "Pates bolognese", "Salade de tomates", "Crème brulée" ];
menu[1]="en rupture";
Question 2: changer un nom d'un étudiant, un prénom d'un autre et l'ensemble nom prénom d'un autre.
let etudiants= [ ["Dupont", "Martine" ], ["Doe", "Jane" ], ["Smith", "Williams" ]]
etudiants[0][0]=["Nouveau Nom seulement"];
etudiants[2][1]=["Nouveau Prénom Nom seulement"];
etudiants[1]=["Nouveau Nom", "Nouveau prénom"];