{"id":5634,"date":"2024-08-29T00:52:14","date_gmt":"2024-08-29T00:52:14","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/boucles-foreach-en-javascript-guide-complet\/"},"modified":"2024-08-29T00:52:18","modified_gmt":"2024-08-29T00:52:18","slug":"boucles-foreach-en-javascript-guide-complet","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/boucles-foreach-en-javascript-guide-complet\/","title":{"rendered":"8.13 Boucles foreach en JavaScript : Guide Complet"},"content":{"rendered":"\n<p><strong>Les Boucles foreach en JavaScript<\/strong> sont des outils puissants qui permettent d&rsquo;it\u00e9rer sur des collections de donn\u00e9es de mani\u00e8re simple et efficace. Ma\u00eetriser leur utilisation peut rendre votre code plus lisible et accro\u00eetre votre productivit\u00e9 en tant que d\u00e9veloppeur. Apprenons comment elles fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Boucles foreach en JavaScript<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658886980?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les boucles <code>foreach<\/code> en JavaScript sont une mani\u00e8re de parcourir des arrays (tableaux) et des collections, ex\u00e9cutant une fonction sp\u00e9cifi\u00e9e pour chaque \u00e9l\u00e9ment. Elles simplifient le processus de manipulation des donn\u00e9es et sont particuli\u00e8rement utiles pour des op\u00e9rations fr\u00e9quentes comme le rendu de listes d&rsquo;\u00e9l\u00e9ments sur une page Web ou le traitement de donn\u00e9es en arri\u00e8re-plan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de Base des Boucles foreach<\/h3>\n\n\n\n<p>La syntaxe de la boucle foreach est assez simple. La m\u00e9thode <code>forEach<\/code> est appel\u00e9e sur un array, et elle prend une fonction callback en param\u00e8tre. Cette fonction est ex\u00e9cut\u00e9e une fois pour chaque \u00e9l\u00e9ment du tableau. Voici un exemple basique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, 2, 3, 4, 5];\n\nnumbers.forEach((number) => {\n  console.log(number);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser foreach avec des Fonctions Callback<\/h3>\n\n\n\n<p>La m\u00e9thode <code>forEach<\/code> accepte une fonction callback qui peut prendre jusqu&rsquo;\u00e0 trois arguments : la valeur actuelle, l&rsquo;index actuel, et le tableau d&rsquo;origine. Cela peut \u00eatre tr\u00e8s utile pour acc\u00e9der non seulement aux \u00e9l\u00e9ments mais aussi \u00e0 leurs index :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruits = ['apple', 'banana', 'cherry'];\n\nfruits.forEach((fruit, index, array) => {\n  console.log(`Fruit: ${fruit}, Index: ${index}, Array: ${array}`);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipulations Avanc\u00e9es avec foreach<\/h3>\n\n\n\n<p>Les boucles <code>foreach<\/code> peuvent aussi \u00eatre utilis\u00e9es pour manipuler les \u00e9l\u00e9ments d&rsquo;un array \u00e0 travers des op\u00e9rations plus complexes. Par exemple, vous pouvez ajuster les valeurs des \u00e9l\u00e9ments, effectuer des validations ou mettre \u00e0 jour des informations en temps r\u00e9el :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const prices = [29.99, 19.99, 49.99, 99.99];\nconst discountedPrices = [];\n\nprices.forEach((price) => {\n  const discount = 0.1; \/\/ 10% de r\u00e9duction\n  const discountedPrice = price - (price * discount);\n  discountedPrices.push(discountedPrice.toFixed(2));\n});\n\nconsole.log(discountedPrices);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">foreach et les Objets<\/h3>\n\n\n\n<p>Bien que <code>forEach<\/code> soit principalement utilis\u00e9 avec des arrays, il peut aussi \u00eatre utilis\u00e9 pour it\u00e9rer sur des objets si vous convertissez leurs propri\u00e9t\u00e9s en un array :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const user = {\n  name: 'John Doe',\n  age: 30,\n  email: 'john.doe@example.com'\n};\n\nObject.entries(user).forEach(([key, value]) => {\n  console.log(`${key}: ${value}`);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comparer foreach \u00e0 d&rsquo;autres Boucles<\/h3>\n\n\n\n<p>Il est crucial de comprendre quand utiliser la boucle <code>foreach<\/code> par rapport aux autres types de boucles disponibles en JavaScript, comme <code>for<\/code> et <code>for..of<\/code>. Voici un tableau comparatif rapide :<\/p>\n\n\n\n<table>\n  <tr>\n    <th>Type de Boucle<\/th>\n    <th>Utilisation<\/th>\n    <th>Exemple<\/th>\n  <\/tr>\n  <tr>\n    <td><code>foreach<\/code><\/td>\n    <td>Pour chaque \u00e9l\u00e9ment d&rsquo;un array, ex\u00e9cuter une fonction callback.<\/td>\n    <td><pre><code>array.forEach(callback);<\/code><\/pre><\/td>\n  <\/tr>\n  <tr>\n    <td><code>for<\/code><\/td>\n    <td>Boucle classique, plus de contr\u00f4le mais syntaxe plus verbeuse.<\/td>\n    <td><pre><code>for (let i = 0; i < array.length; i++) { \n  console.log(array[i]); \n}<\/code><\/pre><\/td>\n  <\/tr>\n  <tr>\n    <td><code>for..of<\/code><\/td>\n    <td>Iterer directement sur les valeurs d'un iterable.<\/td>\n    <td><pre><code>for (let value of array) { \n  console.log(value); \n}<\/code><\/pre><\/td>\n  <\/tr>\n<\/table>\n\n\n\n<h3 class=\"wp-block-heading\">Exercices Pratiques pour Ma\u00eetriser foreach<\/h3>\n\n\n\n<p>La pratique est essentielle pour bien comprendre comment utiliser les boucles <code>foreach<\/code> en JavaScript. Voici quelques exercices pour vous aider \u00e0 renforcer vos comp\u00e9tences :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>1. Cr\u00e9ez un array d'objets repr\u00e9sentant des \u00e9tudiants avec leurs noms et notes. Utilisez foreach pour afficher le nom de chaque \u00e9tudiant et sa note.\n\n2. Utilisez foreach pour calculer la moyenne des notes des \u00e9tudiants.\n\n3. Cr\u00e9ez un array de prix et utilisez foreach pour appliquer une taxe de 5% \u00e0 chaque prix.\n\n4. Convertissez un array de cha\u00eenes de caract\u00e8res en majuscules en utilisant foreach.\n\n5. Utilisez foreach pour incr\u00e9menter chaque valeur d'un tableau d'entiers de 1.<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Boucles foreach<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des boucles <code>foreach<\/code>, voici quelques exemples avanc\u00e9s qui illustrent comment ces boucles peuvent \u00eatre utilis\u00e9es dans diff\u00e9rents contextes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Acc\u00e8s asynchrone aux Donn\u00e9es<\/h4>\n\n\n\n<p>Imaginez une situation o\u00f9 vous devez envoyer plusieurs requ\u00eates asynchrones \u00e0 un serveur et traiter chaque r\u00e9ponse. Utiliser <code>foreach<\/code> pour g\u00e9rer ces requ\u00eates est une excellente option :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const urls = [\n  'https:\/\/api.example.com\/data1',\n  'https:\/\/api.example.com\/data2',\n  'https:\/\/api.example.com\/data3'\n];\n\nurls.forEach(async (url) => {\n  try {\n    let response = await fetch(url);\n    let data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Error fetching data:', error);\n  }\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Transformation de Donn\u00e9es<\/h4>\n\n\n\n<p>Utiliser <code>foreach<\/code> pour transformer un array d'objets est une pratique courante dans le traitement de donn\u00e9es. Par exemple, ajouter des propri\u00e9t\u00e9s aux objets d'un array :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const users = [\n  { name: 'Alice', age: 25 },\n  { name: 'Bob', age: 30 },\n];\n\nusers.forEach(user => {\n  user.isAdult = user.age >= 18;\n});\n\nconsole.log(users);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Filtrer et Traiter des Donn\u00e9es Simultan\u00e9ment<\/h4>\n\n\n\n<p>Vous pouvez utiliser <code>foreach<\/code> pour filtrer puis traiter des donn\u00e9es en une seule passe \u00e0 travers le tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, -1, 2, -2, 3];\n\nconst positiveNumbers = [];\nnumbers.forEach(number => {\n  if (number > 0) {\n    positiveNumbers.push(number * 2);\n  }\n});\n\nconsole.log(positiveNumbers);\n<\/code><\/pre>\n\n\n\n<p>En poursuivant votre exploration des boucles <code>foreach<\/code> en JavaScript, vous pouvez \u00e9galement consulter des ressources externes pour \u00e9largir votre compr\u00e9hension. Par exemple, le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/forEach\" target=\"_blank\" rel=\"noopener\">site MDN Web Docs<\/a> propose des articles d\u00e9taill\u00e9s sur <code>forEach<\/code>, et le <a href=\"https:\/\/javascript.info\" target=\"_blank\" rel=\"noopener\">site JavaScript.info<\/a> offre des tutoriels approfondis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>boucles foreach en JavaScript<\/strong> sont un outil puissant pour rendre votre code plus propre et plus facile \u00e0 comprendre. En les utilisant judicieusement, vous pouvez it\u00e9rer efficacement sur des collections, appliquer des transformations de donn\u00e9es et ex\u00e9cuter des op\u00e9rations asynchrones. Continuez \u00e0 explorer les diff\u00e9rentes fa\u00e7ons d'utiliser la m\u00e9thode <code>forEach<\/code> pour am\u00e9liorer vos comp\u00e9tences de d\u00e9veloppement JavaScript. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"{URL internal 1}\">les techniques avanc\u00e9es en JavaScript<\/a>. Pour apprendre \u00e0 ma\u00eetriser les fonctions en JavaScript, lisez notre <a href=\"{URL internal 2}\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Les Boucles foreach en JavaScript sont des outils puissants qui permettent d&rsquo;it\u00e9rer sur des collections de donn\u00e9es de mani\u00e8re simple et efficace. Ma\u00eetriser leur utilisation&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2849,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5634"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5634\/revisions"}],"predecessor-version":[{"id":5635,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5634\/revisions\/5635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2849"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}