|
|
@@ -0,0 +1,28 @@
|
|
|
+On peut utiliser `map()` et `join()` pour construire une chaîne de façon
|
|
|
+plus élégante qu'au point n°9. On combine cela avec la création d'un élément
|
|
|
+vue au point n°5 :
|
|
|
+
|
|
|
+```html
|
|
|
+<script>
|
|
|
+// Crée une liste ul et l'ajoute au body
|
|
|
+var listeIngredients = document.createElement('ul');
|
|
|
+document.body.appendChild(listeIngredients);
|
|
|
+// Crée les futurs items de la liste et les assemble
|
|
|
+var ingredients = ['Farine', 'Oeufs', 'Beurre', 'Sucre'];
|
|
|
+var listeHtml = ingredients.map(
|
|
|
+ function(ingredient) {
|
|
|
+ return '<li>' + ingredient + '</li>';
|
|
|
+ }
|
|
|
+).join('');
|
|
|
+// Injecte le résultat dans la liste
|
|
|
+listeIngredients.innerHTML = listeHtml;
|
|
|
+</script>
|
|
|
+```
|
|
|
+
|
|
|
+Ici on a utilisé `Array.map()` pour créer, à partir de chaque ingrédient, un item de liste.
|
|
|
+Remarque qu'on a passé une fonction <em>directement</em> en paramètre,
|
|
|
+sans la déclarer auparavant, et sans la nommer : cette utilisation d'une **fonction anonyme**
|
|
|
+est très courante en JS.
|
|
|
+
|
|
|
+On a ensuite assemblé ces items séparés en utilisant `join()` avec une chaîne vide en argument,
|
|
|
+ce qui revient à "coller" tous les items les uns à la suite des autres dans une chaîne.
|