Objectifs : dans ce TP il s'agit d'expérimenter avec les différentes méthodes de la classe Array sort(), push() forEach() filter() splice() slice() includes() reduce() ....
La documentation de référence de la classe Array sur MDN (Mozilla Debeloppers Network) vous donnera une description détaillée du fonctionnement de cette classe et des méthodes qu'elle propose.
Vous pouvez vous référer au support de cours "Tableaux en JavaScript" ainsi qu'au tutorial de w3schools consacré à ce sujet JavaScript Arrays.
Avant toute chose, récupérez le fichier TP09_ArraysJS.zip et décompréssez le dans le dossier PLAI dans lequel vous avez rangé les différents travaux réalisés lors des séances de TP précédentes. Le contenu du dossier TP09_ArrayJS une fois décompressé est le suivant :
1. Trier un tableau
Le programme triMultiCriteres.js crée un tableau d'objets Personnes, l'affiche sur la console et permet à l'utilisateur de choisir parmi différents critères de tri (par Nom, par Age ou par Prénom).
L'image ci-dessous donne une trace d'exécution de ce programme :
Question 1 :
Complétez le code du programme triMultiCriteres.js que vous avez téléchargé afin d'implémenter les différents tris possibles.
pensez à utiliser la méthode sort() des tableaux.
Question 2 : Rajoutez un nouveau critère de tri qui permet de trier le tableau en effectuant le tri par age (critère principal) puis nom et prénom (critères secondaires) comme le montre la figure ci-dessous.
Question 3 : Modifiez le programme de manière à pouvoir à tout moment réafficher le tableau initial non trié comme montré sur la figure ci-dessous
2. Parcourir et traiter les élements d'un tableau
Le but de cet exercice est de vous faire expérimenter avec les différentes manières de parcourir un tableau en JavaScript (boucle for avec index, boucle for ... of, fonction forEach(), fonction reduce().
Question : 1 Complétez le programme ageMoyen.js afin qu'il calcule et affiche l'age moyen des Personnes contenues dans un tableau. Pour effectuer ce calcul écrivez une première fonction calculAgeMoyen1(tab) qui étant donné tab un tableau de personnes, calcule et retourne la moyenne des ages des personnes contenues dans ce tableau. Pour le parcours du tableau vous utiliserez une boucle for classique (itérant sur l'index du tableau).
Question : 2 Ecrivez et testez une deuxième fonction calculAgeMoyen2(tab) qui comme calculAgeMoyen1(tab) calcule l'age moyen des personnes contenue dans tab, mais qui utilise une boucle for ... of au lieu d'une boucle for classique.
Question : 3 Ecrivez et testez une troisième fonction calculAgeMoyen3(tab) qui utilise la méthode forEach() au lieu d'une boucle for pour parcourir et traiter les éléments du tableau.
la doc MDN de forEach()
Question : 4 Ecrivez et testez une quatrième fonction calculAgeMoyen4(tab) qui utilise la méthode reduce() pour parcourir et traiter les éléments du tableau.
la doc MDN de reduce()
3. Filtrer un tableau
Filtrer des valeurs numériques selon un seuil
Le programme filtrage.js permet de lire des données numériques séparées des virgules, de les ranger dans un tableau et d'afficher le contenu de celui-ci sur la console.
Question 1 : Complétez le programme filtrage.js en écrivant le corps de la fonction filtrerSeuil(tab, min, max) qui permet de filtrer le tableau en créant un nouveau tableau contenant que les valeurs situées dans un intervalle fixé par un seuil minimal et un seuil maximal. L'image suivante donne une trace d'exécution de l'exécution attendue du programme filtrage.js :
Question 2 : Sur le modèle du programme filtrage1.js, écrivez un second programme filtrage2.js dans lequel la fonction de filtrage filtrerSeuil(tab, min, max) ne renvoie pas un nouveau tableau avec les données filtrées sans modifier tab, mais retire du tableau tab les données situées en dehors de l'intervalle [min, max] et renvoie ce tableau modifié. Le résultat attendu est le suivant :
4. Intersection de deux ensembles
Ensemble de valeurs
On veut écrire un programme ensembleValeurs.js qui
-
lit au clavier une suite de nombres rangée dans un tableau tab1
-
produit un nouveau tableau de nombres correspondant à l'ensemble des valeurs distinctes contenues dans tab1, triées par ordre croissant : une valeur présente dans tab1 n'apparait qu'une seule fois dans ce nouveau tableau.
-
affiche le nouveau tableau sur la console.
L'exécution attendue d'un tel programme est la suivante.
λ node ensembleValeurs.js
entrez les valeurs séparées par des virgules:
1,6, 7,12,5, 6, 8, 9, 3, 9, 10, 14, 11, 7, 4, 8, 9, 12
Le tableau avec les valeurs lues
1,6,7,12,5,6,8,9,3,9,10,14,11,7,4,8,9,12
Le nouveau tableau trié avec les valeurs uniques
1,3,4,5,6,7,8,9,10,11,12,14
λQuestion 1 : créez le programme ensembleValeurs.js vérifiez qu'il a bien le comportement attendu.
Pour construire le nouveau tableau avec les valeurs uniques écrivez une fonction valeursUniques(tabNombres) qui prend en paramètre un tableau de nombres et retourne un nouveau tableau trié par ordre corissant et contenant de manière unique chacune des valeurs contenues dans tabNombres.
Question 2 :Modifiez le programme ensembleValeurs.js afin qu'il puisse lire deux tableaux (tab1 et tab2), afficher les valeurs uniques contenues dans chacune des deux tableaux, puis ensuite afficher les valeurs communes aux deux tableaux tab1 et tab2. Le comportement attendu de ce programme est le suivant.
λ node ensembleValeurs.js
Premier tableau (tab1)
entrez les valeurs séparées par des virgules:
1,6, 7,12,5, 6, 8, 9, 3, 9, 10, 14, 11, 7, 4, 8, 9, 12
Deuxième tableau (tab2)
entrez les valeurs séparées par des virgules:
6, 7, 4, 3, 8, 11, 24, 27, 24, 10, 10, 14
Les valeurs contenues dans tab1
1,3,4,5,6,7,8,9,10,11,12,14
Les valeurs contenues dans tab2
3,4,6,7,8,10,11,14,24,27
Les valeurs communes à tab1 et tab2
3,4,6,7,8,10,11,14
λPour réaliser ce programme, créez une nouvelle fonction intersection(tabNombres1, tabNombres2) retourne un tableau de nombres trié par ordre croissant qui est l'intersection des deux tableaux de nombres tabNombres1 et tabNombres2.