{"id":5632,"date":"2024-08-29T00:48:11","date_gmt":"2024-08-29T00:48:11","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/boucles-for-of-en-javascript-explications\/"},"modified":"2024-08-29T00:48:15","modified_gmt":"2024-08-29T00:48:15","slug":"boucles-for-of-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/boucles-for-of-en-javascript-explications\/","title":{"rendered":"8.12 Boucles for of en JavaScript : Explications"},"content":{"rendered":"\n<p><strong>Les boucles for-of en JavaScript<\/strong> sont un outil puissant pour it\u00e9rer sur des objets it\u00e9rables tels que les tableaux, les cha\u00eenes de caract\u00e8res, les objets Set, les objets Map et les \u00e9l\u00e9ments de NodeList. Apprendre \u00e0 utiliser correctement les <strong>boucles for-of en JavaScript<\/strong> peut consid\u00e9rablement simplifier la manipulation des collections de donn\u00e9es et rendre votre code plus lisible et maintenable. Plongeons dans les d\u00e9tails de leur fonctionnement et voyons comment les impl\u00e9menter avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Boucles for-of 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\/658886892?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 for-of en JavaScript sont con\u00e7ues sp\u00e9cifiquement pour it\u00e9rer sur des objets bas\u00e9s sur des collections comme les tableaux, les objets Set, les objets Map, les cha\u00eenes de caract\u00e8res, etc. \u00c0 chaque it\u00e9ration, une valeur de la collection est assign\u00e9e \u00e0 une variable sp\u00e9cifi\u00e9e, facilitant ainsi la manipulation de ces valeurs au sein de la boucle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de Base des Boucles for-of<\/h3>\n\n\n\n<p>La syntaxe des boucles for-of est simple et intuitive. Voici un exemple de base pour it\u00e9rer sur un tableau :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruits = ['pomme', 'banane', 'orange'];\n\nfor (const fruit of fruits) {\n  console.log(fruit);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">It\u00e9rer sur des Cha\u00eenes de Caract\u00e8res<\/h3>\n\n\n\n<p>Les boucles for-of peuvent \u00e9galement \u00eatre utilis\u00e9es pour it\u00e9rer sur chaque caract\u00e8re d&rsquo;une cha\u00eene de caract\u00e8res :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const message = 'Bonjour';\n\nfor (const char of message) {\n  console.log(char);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">It\u00e9rer sur les Objets Set<\/h3>\n\n\n\n<p>Les objets Set permettent de stocker des valeurs uniques. Voici un exemple d&rsquo;utilisation d&rsquo;une boucle for-of pour it\u00e9rer sur un objet Set :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruitsSet = new Set(['pomme', 'banane', 'orange']);\n\nfor (const fruit of fruitsSet) {\n  console.log(fruit);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">It\u00e9rer sur les Objets Map<\/h3>\n\n\n\n<p>Les objets Map contiennent des paires cl\u00e9-valeur. Vous pouvez utiliser une boucle for-of pour acc\u00e9der \u00e0 chaque paire cl\u00e9-valeur comme suit :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const fruitsMap = new Map([\n  ['pomme', 'rouge'],\n  ['banane', 'jaune'],\n  ['orange', 'orange']\n]);\n\nfor (const [fruit, color] of fruitsMap) {\n  console.log(fruit, color);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Boucles for-of<\/h3>\n\n\n\n<p>En plus des collections de donn\u00e9es simples, les boucles for-of peuvent \u00eatre utilis\u00e9es pour des vues plus complexes comme it\u00e9rer sur les NodeLists retouris\u00e9es par <code>document.querySelectorAll<\/code>. Par exemple, vous pouvez facilement manipuler des collections d&rsquo;\u00e9l\u00e9ments DOM :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const paragraphs = document.querySelectorAll('p');\n\nfor (const paragraph of paragraphs) {\n  paragraph.style.color = 'blue';\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Compatibilit\u00e9 et Fonctionnalit\u00e9s Suppl\u00e9mentaires<\/h3>\n\n\n\n<p>Les boucles for-of offrent aussi une compatibilit\u00e9 \u00e9tendue avec les objets personnalis\u00e9s. En impl\u00e9mentant l&rsquo;interface <code>[Symbol.iterator]()<\/code> dans vos objets, vous pouvez d\u00e9finir un comportement personnalis\u00e9 pour les boucles for-of.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const myObject = {\n  data: [1, 2, 3],\n  [Symbol.iterator]() {\n    let index = 0;\n    return {\n      next: () => ({\n        value: this.data[index++],\n        done: index > this.data.length\n      })\n    };\n  }\n};\n\nfor (const value of myObject) {\n  console.log(value);\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>boucles for-of en JavaScript<\/strong> sont un outil efficace et flexible pour parcourir toutes sortes de collections de donn\u00e9es de mani\u00e8re propre et lisible. Que vous manipuliez des tableaux, des objets Set, des objets Map, des cha\u00eenes de caract\u00e8res ou m\u00eame des collections d&rsquo;\u00e9l\u00e9ments DOM, les boucles for-of rendent le code plus simple et plus intuitif. Continuez \u00e0 explorer JavaScript pour ma\u00eetriser davantage ces fonctionnalit\u00e9s et bien d&rsquo;autres. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fonctionnalit\u00e9s-avancees\/143\">les fonctionnalit\u00e9s avanc\u00e9es de JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d\u00e9veloppeur-java\/148\" 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 for-of en JavaScript sont un outil puissant pour it\u00e9rer sur des objets it\u00e9rables tels que les tableaux, les cha\u00eenes de caract\u00e8res, les objets&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5632","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\/5632","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=5632"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5632\/revisions"}],"predecessor-version":[{"id":5633,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5632\/revisions\/5633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2852"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}