{"id":5584,"date":"2024-08-28T23:12:00","date_gmt":"2024-08-28T23:12:00","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/autres-boucles-en-javascript-explications\/"},"modified":"2024-08-28T23:12:04","modified_gmt":"2024-08-28T23:12:04","slug":"autres-boucles-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/autres-boucles-en-javascript-explications\/","title":{"rendered":"5.11 Autres Boucles en JavaScript : Explications"},"content":{"rendered":"\n<p><strong>Les Boucles en JavaScript<\/strong> sont des fondements essentiels de la programmation qui permettent de r\u00e9p\u00e9ter un bloc de code. Comprendre les diff\u00e9rentes boucles disponibles peut enrichir consid\u00e9rablement votre capacit\u00e9 \u00e0 \u00e9crire du code efficace et concis en JavaScript. Apprenons les diff\u00e9rentes boucles et leur utilisation \u00e0 travers des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Autres Boucles 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\/658882491?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>En JavaScript, vous avez \u00e0 votre disposition plusieurs types de boucles, chacune ayant son propre cas d&rsquo;utilisation. Outre les classiques boucles <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\">for<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-while-en-javascript-guide-pratique\">while<\/a>, il existe d&rsquo;autres boucles comme <code>for...in<\/code>, <code>for...of<\/code> et <code>do...while<\/code>. Voyons comment exploiter pleinement ces <a href=\"https:\/\/wikiform.fr\/codespace\/autres-boucles-en-javascript-explications\">autres boucles JavaScript<\/a> pour am\u00e9liorer vos programmes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Boucle <code>for...in<\/code> en JavaScript<\/h3>\n\n\n\n<p>La boucle <code>for...in<\/code> est utilis\u00e9e pour it\u00e9rer sur les propri\u00e9t\u00e9s \u00e9num\u00e9rables d&rsquo;un objet, y compris les propri\u00e9t\u00e9s h\u00e9rit\u00e9es. Cela peut \u00eatre tr\u00e8s utile lorsqu&rsquo;il s&rsquo;agit de parcourir les cl\u00e9s d&rsquo;un objet. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const person = {\n    name: 'John',\n    age: 30,\n    city: 'New York'\n};\n\nfor (let key in person) {\n    console.log(`${key}: ${person[key]}`);\n}\n<\/code><\/pre>\n\n\n\n<p>Dans l&rsquo;exemple ci-dessus, la boucle <code>for...in<\/code> parcourt chaque propri\u00e9t\u00e9 de l&rsquo;objet <code>person<\/code> et affiche la cl\u00e9 ainsi que sa valeur correspondante. Pour mieux comprendre le fonctionnement des objets en JavaScript, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-des-objets-en-javascript-guide\">ce guide sur les objets en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Boucle <code>for...of<\/code> en JavaScript<\/h3>\n\n\n\n<p>La boucle <code>for...of<\/code> est utilis\u00e9e pour it\u00e9rer sur des objets it\u00e9rables (comme des tableaux, des cha\u00eenes de caract\u00e8res, des maps, des sets, et plus encore). Contrairement \u00e0 <code>for...in<\/code>, elle ne parcourt pas les propri\u00e9t\u00e9s de l&rsquo;objet mais ses valeurs. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const array = ['apple', 'banana', 'cherry'];\n\nfor (let fruit of array) {\n    console.log(fruit);\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, la boucle <code>for...of<\/code> parcourt chaque \u00e9l\u00e9ment du tableau <code>array<\/code> et affiche chaque fruit. Pour une comparaison plus d\u00e9taill\u00e9e entre <code>for...in<\/code> et <code>for...of<\/code>, consultez ce <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-in-en-javascript-guide-pratique\">guide pratique<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Boucle <code>do...while<\/code> en JavaScript<\/h3>\n\n\n\n<p>La boucle <code>do...while<\/code> est une variante de la boucle <code>while<\/code>. La diff\u00e9rence principale est que la boucle <code>do...while<\/code> s&rsquo;ex\u00e9cute au moins une fois avant de v\u00e9rifier la condition. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let i = 0;\n\ndo {\n    console.log(i);\n    i++;\n} while (i < 5);\n<\/code><\/pre>\n\n\n\n<p>Ici, la boucle <code>do...while<\/code> affiche les valeurs de <code>i<\/code> de 0 \u00e0 4. Elle s'assure que le bloc de code est ex\u00e9cut\u00e9 au moins une fois, m\u00eame si la condition n'est pas remplie initialement. Pour plus de d\u00e9tails, consultez ce <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-do-while-en-javascript-tutoriel\">tutoriel sur les boucles do...while<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Boucle <code>forEach<\/code> en JavaScript<\/h3>\n\n\n\n<p>La m\u00e9thode <code>forEach<\/code> est utilis\u00e9e pour ex\u00e9cuter une fonction sur chaque \u00e9l\u00e9ment d'un tableau. Contrairement aux boucles traditionnelles, elle est plus d\u00e9clarative et souvent plus lisible. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruits = ['apple', 'banana', 'cherry'];\n\nfruits.forEach(fruit => {\n    console.log(fruit);\n});\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, la m\u00e9thode <code>forEach<\/code> parcourt le tableau <code>fruits<\/code> et ex\u00e9cute la fonction pour chaque \u00e9l\u00e9ment, affichant chaque fruit. Pour en savoir plus sur l'utilisation des fonctions en JavaScript, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/fonctions-flechees-en-javascript-guide\">notre guide sur les fonctions fl\u00e9ch\u00e9es en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Boucle <code>map<\/code> en JavaScript<\/h3>\n\n\n\n<p>La m\u00e9thode <code>map<\/code> cr\u00e9e un nouveau tableau avec les r\u00e9sultats de l'appel d'une fonction fournie sur chaque \u00e9l\u00e9ment du tableau appelant. C'est id\u00e9al pour transformer des donn\u00e9es. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const numbers = [1, 2, 3, 4, 5];\nconst squaredNumbers = numbers.map(number => number ** 2);\n\nconsole.log(squaredNumbers); \/\/ [1, 4, 9, 16, 25]\n<\/code><\/pre>\n\n\n\n<p>Dans l'exemple ci-dessus, la m\u00e9thode <code>map<\/code> parcourt le tableau <code>numbers<\/code> et retourne un nouveau tableau <code>squaredNumbers<\/code> contenant les carr\u00e9s de chaque nombre. Pour apprendre \u00e0 g\u00e9rer d'autres types de transformations, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/notes-sur-fonctions-flechees-en-javascript\">nos notes sur les fonctions fl\u00e9ch\u00e9es en JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les Autres Boucles JavaScript<\/h2>\n\n\n\n<p>Les diff\u00e9rentes <strong>autres boucles JavaScript<\/strong> \u2013 <code>for...in<\/code>, <code>for...of<\/code>, <code>do...while<\/code>, <code>forEach<\/code>, et <code>map<\/code> \u2013 offrent de nombreuses fa\u00e7ons d'it\u00e9rer et de manipuler des donn\u00e9es. En exploitant ces boucles, vous pouvez \u00e9crire du code plus propre, plus efficace et plus expressif. Continuez \u00e0 explorer JavaScript pour d\u00e9couvrir des techniques de programmation avanc\u00e9es et am\u00e9liorer vos comp\u00e9tences. Pour aller plus loin, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\">guide sur les objets en JavaScript<\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\">guide sur l'utilisation des fonctions existantes en JavaScript<\/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.\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 en JavaScript sont des fondements essentiels de la programmation qui permettent de r\u00e9p\u00e9ter un bloc de code. Comprendre les diff\u00e9rentes boucles disponibles peut&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2847,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5584","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\/5584","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=5584"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5584\/revisions"}],"predecessor-version":[{"id":5585,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5584\/revisions\/5585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2847"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}