Objectif pédagogique: Les exercices suivants ont pour but d'apprendre à utiliser les méthodes natives des tableaux en JS.
Vous avez probablement, dans l'exercice 1, utilisé une boucle for
pour itérer sur le tableau et un if
pour parvenir au résultat demandé. Et, afin de trier, copié les données dans un tableau intermédiaire.
Trouvez des informations sur les fonctions Array.filter
et Array.forEach
et refaire l'exercice en utilisant ces fonctions.
En cas de difficulté, commencez par afficher la liste non triée.
Array.filter sur MDN Array.forEach sur MDN
Note: Ce style de programmation s'appelle la programmation fonctionnelle. Nous n'allons qu'effleurer le sujet, mais cela nous permettra d'écrire du code beaucoup plus court et compréhensible et donc, au final, plus facile à maintenir.
Il est important, pour la clarté du code, de créer des petites fonctions autonomes qui ne font qu'une chose mais bien.
Nous allons donc commencer par extraire la partie qui parcourt la liste filtrée.
- Écrivez une fonction
getCitiesByDept
qui prend en paramètre un code de département et retourne un tableau avec uniquement les communes de ce département - Utilisez cette fonction pour afficher dans la console le nom des villes de Haute-Savoie
Maintenant nous allons extraire la partie qui formate les données pour l'affichage.
- Écrivez une fonction
displayCity
qui prend en paramètre les données d'une commune (city
), c'est à dire un élément du tableaucities
ougetCitiesByDept
, et retourne sous forme de chaîne de caractères"Code département - nom de la ville"
. (exemple :74 - Annecy
) - En utilisant les fonctions précédentes, affichez la liste de villes de Haute-Savoie dans la console.
Faire valider par le formateur.
Copiez-coller les fonctions getCitiesByDept
et displayCity
, vous en aurez besoin pour les exercices suivants.
Puis basculez sur la branche exo-3
.