{"id":5630,"date":"2024-08-29T00:44:32","date_gmt":"2024-08-29T00:44:32","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/boucles-for-in-en-javascript-guide-pratique\/"},"modified":"2024-08-29T00:44:36","modified_gmt":"2024-08-29T00:44:36","slug":"boucles-for-in-en-javascript-guide-pratique","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/boucles-for-in-en-javascript-guide-pratique\/","title":{"rendered":"8.11 Boucles for in en JavaScript : Guide Pratique"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les Boucles for in en JavaScript<\/strong> sont un outil essentiel pour it\u00e9rer sur les propri\u00e9t\u00e9s d&rsquo;un objet ou les \u00e9l\u00e9ments de collections telles que les tableaux et les listes. Ma\u00eetriser les boucles <strong>for in<\/strong> peut grandement simplifier le traitement des donn\u00e9es et le code de gestion des objets dans vos applications JavaScript. Apprenez comment elles fonctionnent et comment les utiliser efficacement gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Boucles for in 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\/658886816?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\/javascript-les-fondamentaux\/142')\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>Une boucle <code>for in<\/code> en JavaScript permet d&rsquo;it\u00e9rer sur les propri\u00e9t\u00e9s \u00e9num\u00e9rables d&rsquo;un objet non forc\u00e9ment en ordre, afin d&rsquo;ex\u00e9cuter un certain bloc de code pour chaque propri\u00e9t\u00e9. Cette fonctionnalit\u00e9 est tr\u00e8s utile lorsque vous travaillez avec des objets dont les cl\u00e9s sont dynamiques ou inconnues \u00e0 l&rsquo;avance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de la Boucle for in<\/h3>\n\n\n\n<p>La syntaxe de la boucle <code>for in<\/code> est simple et proche de celle des autres boucles en JavaScript. Voici comment elle se pr\u00e9sente :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>for (variable in objet) {\n    \/\/ Code \u00e0 ex\u00e9cuter pour chaque propri\u00e9t\u00e9\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Pratique d&rsquo;utilisation de la Boucle for in<\/h3>\n\n\n\n<p>Voyons un exemple de boucle <code>for in<\/code> qui it\u00e8re sur les propri\u00e9t\u00e9s d&rsquo;un objet repr\u00e9sentant une personne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const personne = {\n    nom: 'Dupont',\n    prenom: 'Jean',\n    age: 30,\n};\n\nfor (const propriete in personne) {\n    console.log(propriete + \": \" + personne[propriete]);\n}\n<\/code><\/pre>\n\n\n\n<p>Ce code it\u00e9rera sur chaque propri\u00e9t\u00e9 de l&rsquo;objet <code>personne<\/code> et affichera le nom de la propri\u00e9t\u00e9 ainsi que sa valeur. Par exemple, il retournera :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>nom: Dupont\nprenom: Jean\nage: 30<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Boucles For In et Prototypes<\/h3>\n\n\n\n<p>Il est important de noter que la boucle <code>for in<\/code> parcourt \u00e9galement les propri\u00e9t\u00e9s h\u00e9rit\u00e9es dans la cha\u00eene de prototypes. Afin d&rsquo;\u00e9viter d&rsquo;it\u00e9rer sur ces propri\u00e9t\u00e9s, vous pouvez utiliser la m\u00e9thode <code>hasOwnProperty<\/code> pour v\u00e9rifier si la propri\u00e9t\u00e9 appartient directement \u00e0 l&rsquo;objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>for (const propriete in personne) {\n    if (personne.hasOwnProperty(propriete)) {\n        console.log(propriete + \": \" + personne[propriete]);\n    }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de la Boucle for in<\/h3>\n\n\n\n<p>Utilisons maintenant la boucle <code>for in<\/code> dans des contextes plus complexes, comme la transformation d&rsquo;un objet en tableau de paires cl\u00e9-valeur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const personne = {\n    nom: 'Dupont',\n    prenom: 'Jean',\n    age: 30,\n};\n\nconst entrees = [];\n\nfor (const propriete in personne) {\n    if (personne.hasOwnProperty(propriete)) {\n        entrees.push([propriete, personne[propriete]]);\n    }\n}\n\nconsole.log(entrees);  \/\/ [['nom', 'Dupont'], ['prenom', 'Jean'], ['age', 30]]\n<\/code><\/pre>\n\n\n\n<p>Ce code cr\u00e9e un tableau d&rsquo;entr\u00e9es o\u00f9 chaque \u00e9l\u00e9ment est une paire cl\u00e9-valeur, ce qui peut \u00eatre utile pour des applications telles que l&rsquo;exportation de donn\u00e9es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de Boucles for in avec des Objets Imbriqu\u00e9s<\/h3>\n\n\n\n<p>Pour des objets plus complexes contenant des objets imbriqu\u00e9s, vous pouvez utiliser des boucles <code>for in<\/code> imbriqu\u00e9es pour parcourir toutes les propri\u00e9t\u00e9s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const entreprise = {\n    nom: 'TechCorp',\n    localisation: {\n        pays: 'France',\n        ville: 'Paris',\n    },\n    employes: 150,\n};\n\nfor (const propriete in entreprise) {\n    if (entreprise.hasOwnProperty(propriete)) {\n        if (typeof entreprise[propriete] === 'object') {\n            for (const subProp in entreprise[propriete]) {\n                if (entreprise[propriete].hasOwnProperty(subProp)) {\n                    console.log(subProp + \": \" + entreprise[propriete][subProp]);\n                }\n            }\n        } else {\n            console.log(propriete + \": \" + entreprise[propriete]);\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Ce code g\u00e8re \u00e0 la fois les propri\u00e9t\u00e9s directes et les propri\u00e9t\u00e9s des objets imbriqu\u00e9s en les imprimant \u00e0 la console.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Avanc\u00e9es de Boucles for in et Astuces<\/h3>\n\n\n\n<p>En JavaScript, les boucles <strong>for in<\/strong> sont souvent associ\u00e9es \u00e0 des t\u00e2ches plus avanc\u00e9es et \u00e0 des astuces qui facilitent la programmation. Par exemple, lorsqu&rsquo;il s&rsquo;agit de v\u00e9rifier si une boucle <code>for in<\/code> doit ignorer les propri\u00e9t\u00e9s h\u00e9rit\u00e9es, la m\u00e9thode <code>Object.keys()<\/code> est souvent utilis\u00e9e pour obtenir uniquement les propri\u00e9t\u00e9s propres de l&rsquo;objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const propretes = Object.keys(personne);\npropretes.forEach(propriete => {\n    console.log(propriete + \": \" + personne[propriete]);\n});\n<\/code><\/pre>\n\n\n\n<p>Cette m\u00e9thode est souvent recommand\u00e9e dans les bonnes pratiques de JavaScript pour s&rsquo;assurer que seules les propri\u00e9t\u00e9s directes de l&rsquo;objet sont it\u00e9r\u00e9es, ce qui peut \u00eatre crucial dans certains sc\u00e9narios de d\u00e9veloppement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Boucles for in dans la Gestion des Collections<\/h3>\n\n\n\n<p>Les boucles <code>for in<\/code> sont \u00e9galement utiles pour g\u00e9rer des collections telles que les tableaux et les listes en JavaScript, bien que dans la plupart des cas, les boucles <a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation\" target=\"_blank\" rel=\"noopener\">for<\/a> classiques ou les m\u00e9thodes array comme <code>forEach<\/code> soient pr\u00e9f\u00e9r\u00e9es pour les tableaux en raison de leurs meilleures performances.<\/p>\n\n\n\n<p>C&rsquo;est cependant une autre histoire lorsque vous travaillez avec des objets ou des structures de donn\u00e9es plus complexes venant d&rsquo;API Web ou de bases de donn\u00e9es. Dans ces cas, utiliser <code>for in<\/code> peut \u00eatre plus pertinent, car vous ne savez peut-\u00eatre pas \u00e0 l&rsquo;avance quelles propri\u00e9t\u00e9s seront disponibles.<\/p>\n\n\n\n<p>Il est aussi important de noter que l&rsquo;utilisation des boucles <code>for in<\/code> peut \u00eatre combin\u00e9e avec d&rsquo;autres fonctionnalit\u00e9s de JavaScript. Par exemple, vous pouvez automation les t\u00e2ches de traitement des donn\u00e9es dans des frameworks comme <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">Node.js<\/a> ou lorsqu&rsquo;il s&rsquo;agit de manipuler le <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\" target=\"_blank\" rel=\"noopener\">DOM<\/a>.<\/p>\n\n\n\n<p>Pour ceux qui apprennent les bases de JavaScript, il peut \u00eatre int\u00e9ressant de l&rsquo;utiliser \u00e9galement en combinaison avec des concepts tels que les <a href=\"https:\/\/wikiform.fr\/codespace\/quel-tableau-simple-en-javascript-guide\" target=\"_blank\" rel=\"noopener\">tableaux simples<\/a> et les autres types de structures de donn\u00e9es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Boucles for in et S\u00e9curit\u00e9<\/h3>\n\n\n\n<p>Il est \u00e9galement crucial de tenir compte des consid\u00e9rations de s\u00e9curit\u00e9 lorsque vous utilisez des boucles <strong>for in<\/strong> pour it\u00e9rer sur des objets JavaScript. Par exemple, si vous effectuez des boucles sur des objets utilisateurs provenant de sources non s\u00e9curis\u00e9es, veillez \u00e0 valider et \u00e0 assainir chaque propri\u00e9t\u00e9 avant de proc\u00e9der au traitement. Utiliser des m\u00e9canismes tels que le filtrage bas\u00e9 sur des listes blanches peut grandement am\u00e9liorer la s\u00e9curit\u00e9 de vos applications JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion et Ressources Suppl\u00e9mentaires sur les Boucles for in en JavaScript<\/h3>\n\n\n\n<p>Les boucles <code>for in<\/code> sont un outil puissant pour parcourir les propri\u00e9t\u00e9s d&rsquo;un objet en JavaScript. Elles sont utilis\u00e9es de mani\u00e8re courante pour le traitement dynamique de donn\u00e9es, le parcours de propri\u00e9t\u00e9s d&rsquo;objets et la gestion des collections. Pour approfondir vos connaissances sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">JavaScript<\/a>, n&rsquo;h\u00e9sitez pas \u00e0 explorer des ressources suppl\u00e9mentaires comme le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\" rel=\"noopener\">guide JavaScript de Mozilla<\/a> ou des cours en ligne sur des plateformes de renom telles que <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/boucles-for-in-en-javascript-guide-pratique\" 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\u00ab\u00a0`\n\n1. ***Augmentation du nombre de mots :*** L&rsquo;article doit maintenant atteindre les 1200 mots. Si d&rsquo;autres sections sont n\u00e9cessaires, ajoutez des informations suppl\u00e9mentaires pertinentes comme des conseils avanc\u00e9s sur l&rsquo;utilisation des boucles en JavaScript, des exemples plus d\u00e9taill\u00e9s, des sc\u00e9narios d&rsquo;utilisation en entreprise, etc.\n\n2. ***Liens internse :*** Ajout de liens internes naturels \u00e0 diff\u00e9rents articles connexes pour am\u00e9liorer l\u2019interconnexion du contenu :\n   &#8211; `https:\/\/wikiform.fr\/codespace\/boucles-for-en-javascript-utilisation`\n   &#8211;","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les Boucles for in en JavaScript sont un outil essentiel pour it\u00e9rer sur les propri\u00e9t\u00e9s d&rsquo;un objet ou les \u00e9l\u00e9ments de collections telles que&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5630","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\/5630","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=5630"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5630\/revisions"}],"predecessor-version":[{"id":5631,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5630\/revisions\/5631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2851"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}