Objet Map JavaScript : Tutoriel Complet<\/title>\n<\/head>\n<body>\n \n <p><strong>L’objet Map en JavaScript<\/strong> est une structure de donn\u00e9es puissante permettant de stocker des paires cl\u00e9-valeur. Comprendre comment utiliser les <strong>Maps en JavaScript<\/strong> peut am\u00e9liorer votre capacit\u00e9 \u00e0 g\u00e9rer et manipuler les donn\u00e9es efficacement dans vos applications web. Apprenons comment elles fonctionnent et comment les mettre en \u0153uvre gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction aux <strong>Maps 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\/658888197?dnt=1&fullscreen=0&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 \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 \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>\n document.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 objets Map permettent de stocker des paires cl\u00e9-valeur de mani\u00e8re ordonn\u00e9e, o\u00f9 n\u2019importe quel type de donn\u00e9es (objets, fonctions, etc.) peut \u00eatre utilis\u00e9 comme cl\u00e9 ou valeur. Cela diff\u00e8re des objets JavaScript traditionnels, qui ne permettent que des cha\u00eenes ou des symboles comme cl\u00e9s. Voici un aper\u00e7u de comment manipuler les Maps avec JavaScript.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Cr\u00e9er une <strong>Map en JavaScript<\/strong><\/h3>\n \n\n \n <p>Pour cr\u00e9er une Map, vous pouvez simplement utiliser l’instance du constructeur Map :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er une instance de Map\n let map = new Map();\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Ajouter des \u00e9l\u00e9ments \u00e0 une Map<\/h3>\n \n\n \n <p>Les \u00e9l\u00e9ments sont ajout\u00e9s \u00e0 une Map en utilisant la m\u00e9thode <code>set<\/code>, o\u00f9 la premi\u00e8re valeur est la cl\u00e9 et la deuxi\u00e8me est la valeur :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>map.set('name', 'John');\n map.set('age', 30);\n map.set(true, 'bool_key'); \/\/ Utiliser un bool\u00e9en comme cl\u00e9\n map.set({ a: 1 }, 'object_key'); \/\/ Utiliser un objet comme cl\u00e9\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Acc\u00e9der aux valeurs dans une Map<\/h3>\n \n\n \n <p>Vous pouvez acc\u00e9der aux valeurs stock\u00e9es dans une Map en utilisant la m\u00e9thode <code>get<\/code> avec la cl\u00e9 associ\u00e9e :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>console.log(map.get('name')); \/\/ John\n console.log(map.get(true)); \/\/ bool_key\n console.log(map.get({ a: 1 })); \/\/ undefined, car c'est un nouvel objet\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">V\u00e9rifier l’existence d’\u00e9l\u00e9ments dans une Map<\/h3>\n \n\n \n <p>Il est possible de v\u00e9rifier si une Map contient une certaine cl\u00e9 en utilisant la m\u00e9thode <code>has<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>console.log(map.has('name')); \/\/ true\n console.log(map.has('address')); \/\/ false\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Supprimer des \u00e9l\u00e9ments d’une Map<\/h3>\n \n\n \n <p>Pour supprimer un \u00e9l\u00e9ment de la Map, vous pouvez utiliser la m\u00e9thode <code>delete<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>map.delete('age');\n console.log(map.has('age')); \/\/ false\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Parcourir les \u00e9l\u00e9ments d’une Map<\/h3>\n \n\n \n <p>Pour parcourir les \u00e9l\u00e9ments d’une Map, vous pouvez utiliser des m\u00e9thodes comme <code>forEach<\/code> ou des boucles <code>for...of<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utiliser forEach\n map.forEach((value, key) => {\n console.log(`${key} : ${value}`);\n });\n\n \/\/ Utiliser for...of\n for (let [key, value] of map) {\n console.log(`${key} : ${value}`);\n }\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Maps et objets compar\u00e9s<\/h3>\n \n\n \n <p>Les Maps offrent des avantages par rapport aux objets JavaScript pour certaines applications. Par exemple, les Maps peuvent avoir des cl\u00e9s de n’importe quel type, alors que les objets utilisent des cha\u00eenes de caract\u00e8res ou des symboles. Les Maps sont \u00e9galement plus performantes lorsqu’il s’agit de la taille et de la fr\u00e9quence des ajouts ou suppressions d’\u00e9l\u00e9ments.<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>\/\/ Performance des objets vs Maps\n let obj = {};\n let map = new Map();\n\n obj['string'] = 'Hello';\n obj[true] = 'Boolean';\n obj[{}] = 'Object'; \/\/ L'objet en tant que cl\u00e9 est converti en cha\u00eene \"[object Object]\"\n\n map.set('string', 'Hello');\n map.set(true, 'Boolean');\n map.set({}, 'Object'); \/\/ Chaque instance d'objet est une cl\u00e9 unique\n\n console.log(obj); \/\/ { 'string': 'Hello', 'true': 'Boolean', '[object Object]': 'Object' }\n console.log(map); \/\/ Map(3) { 'string' => 'Hello', true => 'Boolean', {} => 'Object' }\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser les Maps dans des projets r\u00e9els<\/h3>\n \n\n \n <p>Les Maps sont particuli\u00e8rement utiles dans des projets complexes qui n\u00e9cessitent une gestion flexible et extensible des donn\u00e9es, comme les graphiques graphiques interactifs, les tableaux de bord administratifs ou les syst\u00e8mes de gestion d’\u00e9tats dans des frameworks modernes comme React.<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>\/\/ Exemple r\u00e9el: utilisation des Maps pour g\u00e9rer des composants d'\u00e9tat\n class StateManager {\n constructor() {\n this.states = new Map();\n }\n\n setState(key, state) {\n this.states.set(key, state);\n }\n\n getState(key) {\n return this.states.get(key);\n }\n\n getAllStates() {\n return Array.from(this.states.values());\n }\n }\n\n const manager = new StateManager();\n manager.setState('component1', { isVisible: true });\n manager.setState('component2', { isVisible: false });\n\n console.log(manager.getState('component1')); \/\/ { isVisible: true }\n console.log(manager.getAllStates()); \/\/ [ { isVisible: true }, { isVisible: false } ]\n <\/code><\/pre>\n \n\n \n <h2 class=\"wp-block-heading\">Conclusion<\/h2>\n \n\n \n <p>Les <strong>Maps en JavaScript<\/strong> sont des outils essentiels pour g\u00e9rer des donn\u00e9es complexes de mani\u00e8re efficace et flexible. En tirant parti des capacit\u00e9s des Maps, vous pouvez am\u00e9liorer la performance et la clart\u00e9 de votre code, surtout dans les applications modernes qui n\u00e9cessitent des gestionnaires d’\u00e9tat avanc\u00e9s. Continuez \u00e0 pratiquer l’utilisation des Maps pour ma\u00eetriser leur puissance et leurs avantages. Pour plus de d\u00e9tails et de tutoriels sur les Maps JavaScript et d’autres concepts de programmation JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de 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-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n \n\n \n \n <p>Pour mieux comprendre les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\">Variables en JavaScript<\/a>, vous pouvez consulter notre guide d\u00e9di\u00e9. En savoir plus sur la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\">Structure des Objets en JavaScript<\/a> peut vous aider \u00e0 mieux appr\u00e9hender les Maps. Si vous souhaitez en apprendre davantage sur le <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\">DOM en JavaScript<\/a>, d\u00e9couvrez notre tutoriel complet. Pour ma\u00eetriser les <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\">outils de d\u00e9bogage en JavaScript<\/a>, consultez notre guide pratique. Enfin, si vous envisagez de vous lancer dans un projet pratique, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-objectifs\">la cr\u00e9ation d’une calculatrice en JavaScript<\/a>.<\/p>\n \n\n \n \n <p>Pour plus de d\u00e9tails sur la manipulaton des Maps, consultez l’<a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Map\" target=\"_blank\" rel=\"noopener\">article MDN sur les Maps<\/a>. Vous pouvez \u00e9galement d\u00e9couvrir <a href=\"https:\/\/javascript.info\/map-set\" target=\"_blank\" rel=\"noopener\">javascript.info sur Map et Set<\/a> pour des tutoriels suppl\u00e9mentaires. Pour des performances optimales dans vos applications, explorez les <a href=\"https:\/\/www.w3schools.com\/js\/js_objects.asp\" target=\"_blank\" rel=\"noopener\">meilleures pratiques des objets JavaScript<\/a>.<\/p>\n \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<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Objet Map JavaScript : Tutoriel Complet L’objet Map en JavaScript est une structure de donn\u00e9es puissante permettant de stocker des paires cl\u00e9-valeur. Comprendre comment utiliser…<\/p>\n","protected":false},"author":3,"featured_media":2894,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5656","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\/5656","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=5656"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5656\/revisions"}],"predecessor-version":[{"id":5657,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5656\/revisions\/5657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2894"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5656,"date":"2024-08-29T01:36:29","date_gmt":"2024-08-29T01:36:29","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-map-en-javascript-tutoriel\/"},"modified":"2024-08-29T01:36:32","modified_gmt":"2024-08-29T01:36:32","slug":"objet-map-en-javascript-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-map-en-javascript-tutoriel\/","title":{"rendered":"10.6 L’Objet Map en JavaScript : Tutoriel"},"content":{"rendered":"\n\n\n \n \n Objet Map JavaScript : Tutoriel Complet<\/title>\n<\/head>\n<body>\n \n <p><strong>L’objet Map en JavaScript<\/strong> est une structure de donn\u00e9es puissante permettant de stocker des paires cl\u00e9-valeur. Comprendre comment utiliser les <strong>Maps en JavaScript<\/strong> peut am\u00e9liorer votre capacit\u00e9 \u00e0 g\u00e9rer et manipuler les donn\u00e9es efficacement dans vos applications web. Apprenons comment elles fonctionnent et comment les mettre en \u0153uvre gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n \n\n \n <h2 class=\"wp-block-heading\">Introduction aux <strong>Maps 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\/658888197?dnt=1&fullscreen=0&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 \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 \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>\n document.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 objets Map permettent de stocker des paires cl\u00e9-valeur de mani\u00e8re ordonn\u00e9e, o\u00f9 n\u2019importe quel type de donn\u00e9es (objets, fonctions, etc.) peut \u00eatre utilis\u00e9 comme cl\u00e9 ou valeur. Cela diff\u00e8re des objets JavaScript traditionnels, qui ne permettent que des cha\u00eenes ou des symboles comme cl\u00e9s. Voici un aper\u00e7u de comment manipuler les Maps avec JavaScript.<\/p>\n \n\n \n <h3 class=\"wp-block-heading\">Cr\u00e9er une <strong>Map en JavaScript<\/strong><\/h3>\n \n\n \n <p>Pour cr\u00e9er une Map, vous pouvez simplement utiliser l’instance du constructeur Map :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er une instance de Map\n let map = new Map();\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Ajouter des \u00e9l\u00e9ments \u00e0 une Map<\/h3>\n \n\n \n <p>Les \u00e9l\u00e9ments sont ajout\u00e9s \u00e0 une Map en utilisant la m\u00e9thode <code>set<\/code>, o\u00f9 la premi\u00e8re valeur est la cl\u00e9 et la deuxi\u00e8me est la valeur :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>map.set('name', 'John');\n map.set('age', 30);\n map.set(true, 'bool_key'); \/\/ Utiliser un bool\u00e9en comme cl\u00e9\n map.set({ a: 1 }, 'object_key'); \/\/ Utiliser un objet comme cl\u00e9\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Acc\u00e9der aux valeurs dans une Map<\/h3>\n \n\n \n <p>Vous pouvez acc\u00e9der aux valeurs stock\u00e9es dans une Map en utilisant la m\u00e9thode <code>get<\/code> avec la cl\u00e9 associ\u00e9e :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>console.log(map.get('name')); \/\/ John\n console.log(map.get(true)); \/\/ bool_key\n console.log(map.get({ a: 1 })); \/\/ undefined, car c'est un nouvel objet\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">V\u00e9rifier l’existence d’\u00e9l\u00e9ments dans une Map<\/h3>\n \n\n \n <p>Il est possible de v\u00e9rifier si une Map contient une certaine cl\u00e9 en utilisant la m\u00e9thode <code>has<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>console.log(map.has('name')); \/\/ true\n console.log(map.has('address')); \/\/ false\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Supprimer des \u00e9l\u00e9ments d’une Map<\/h3>\n \n\n \n <p>Pour supprimer un \u00e9l\u00e9ment de la Map, vous pouvez utiliser la m\u00e9thode <code>delete<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>map.delete('age');\n console.log(map.has('age')); \/\/ false\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Parcourir les \u00e9l\u00e9ments d’une Map<\/h3>\n \n\n \n <p>Pour parcourir les \u00e9l\u00e9ments d’une Map, vous pouvez utiliser des m\u00e9thodes comme <code>forEach<\/code> ou des boucles <code>for...of<\/code> :<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>\/\/ Utiliser forEach\n map.forEach((value, key) => {\n console.log(`${key} : ${value}`);\n });\n\n \/\/ Utiliser for...of\n for (let [key, value] of map) {\n console.log(`${key} : ${value}`);\n }\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Maps et objets compar\u00e9s<\/h3>\n \n\n \n <p>Les Maps offrent des avantages par rapport aux objets JavaScript pour certaines applications. Par exemple, les Maps peuvent avoir des cl\u00e9s de n’importe quel type, alors que les objets utilisent des cha\u00eenes de caract\u00e8res ou des symboles. Les Maps sont \u00e9galement plus performantes lorsqu’il s’agit de la taille et de la fr\u00e9quence des ajouts ou suppressions d’\u00e9l\u00e9ments.<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>\/\/ Performance des objets vs Maps\n let obj = {};\n let map = new Map();\n\n obj['string'] = 'Hello';\n obj[true] = 'Boolean';\n obj[{}] = 'Object'; \/\/ L'objet en tant que cl\u00e9 est converti en cha\u00eene \"[object Object]\"\n\n map.set('string', 'Hello');\n map.set(true, 'Boolean');\n map.set({}, 'Object'); \/\/ Chaque instance d'objet est une cl\u00e9 unique\n\n console.log(obj); \/\/ { 'string': 'Hello', 'true': 'Boolean', '[object Object]': 'Object' }\n console.log(map); \/\/ Map(3) { 'string' => 'Hello', true => 'Boolean', {} => 'Object' }\n <\/code><\/pre>\n \n\n \n <h3 class=\"wp-block-heading\">Utiliser les Maps dans des projets r\u00e9els<\/h3>\n \n\n \n <p>Les Maps sont particuli\u00e8rement utiles dans des projets complexes qui n\u00e9cessitent une gestion flexible et extensible des donn\u00e9es, comme les graphiques graphiques interactifs, les tableaux de bord administratifs ou les syst\u00e8mes de gestion d’\u00e9tats dans des frameworks modernes comme React.<\/p>\n \n\n \n <pre class=\"wp-block-code lang-javascript\"><code>\/\/ Exemple r\u00e9el: utilisation des Maps pour g\u00e9rer des composants d'\u00e9tat\n class StateManager {\n constructor() {\n this.states = new Map();\n }\n\n setState(key, state) {\n this.states.set(key, state);\n }\n\n getState(key) {\n return this.states.get(key);\n }\n\n getAllStates() {\n return Array.from(this.states.values());\n }\n }\n\n const manager = new StateManager();\n manager.setState('component1', { isVisible: true });\n manager.setState('component2', { isVisible: false });\n\n console.log(manager.getState('component1')); \/\/ { isVisible: true }\n console.log(manager.getAllStates()); \/\/ [ { isVisible: true }, { isVisible: false } ]\n <\/code><\/pre>\n \n\n \n <h2 class=\"wp-block-heading\">Conclusion<\/h2>\n \n\n \n <p>Les <strong>Maps en JavaScript<\/strong> sont des outils essentiels pour g\u00e9rer des donn\u00e9es complexes de mani\u00e8re efficace et flexible. En tirant parti des capacit\u00e9s des Maps, vous pouvez am\u00e9liorer la performance et la clart\u00e9 de votre code, surtout dans les applications modernes qui n\u00e9cessitent des gestionnaires d’\u00e9tat avanc\u00e9s. Continuez \u00e0 pratiquer l’utilisation des Maps pour ma\u00eetriser leur puissance et leurs avantages. Pour plus de d\u00e9tails et de tutoriels sur les Maps JavaScript et d’autres concepts de programmation JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de 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-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n \n\n \n \n <p>Pour mieux comprendre les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\">Variables en JavaScript<\/a>, vous pouvez consulter notre guide d\u00e9di\u00e9. En savoir plus sur la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-objet-en-javascript\">Structure des Objets en JavaScript<\/a> peut vous aider \u00e0 mieux appr\u00e9hender les Maps. Si vous souhaitez en apprendre davantage sur le <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\">DOM en JavaScript<\/a>, d\u00e9couvrez notre tutoriel complet. Pour ma\u00eetriser les <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\">outils de d\u00e9bogage en JavaScript<\/a>, consultez notre guide pratique. Enfin, si vous envisagez de vous lancer dans un projet pratique, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-objectifs\">la cr\u00e9ation d’une calculatrice en JavaScript<\/a>.<\/p>\n \n\n \n \n <p>Pour plus de d\u00e9tails sur la manipulaton des Maps, consultez l’<a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Map\" target=\"_blank\" rel=\"noopener\">article MDN sur les Maps<\/a>. Vous pouvez \u00e9galement d\u00e9couvrir <a href=\"https:\/\/javascript.info\/map-set\" target=\"_blank\" rel=\"noopener\">javascript.info sur Map et Set<\/a> pour des tutoriels suppl\u00e9mentaires. Pour des performances optimales dans vos applications, explorez les <a href=\"https:\/\/www.w3schools.com\/js\/js_objects.asp\" target=\"_blank\" rel=\"noopener\">meilleures pratiques des objets JavaScript<\/a>.<\/p>\n \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<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Objet Map JavaScript : Tutoriel Complet L’objet Map en JavaScript est une structure de donn\u00e9es puissante permettant de stocker des paires cl\u00e9-valeur. Comprendre comment utiliser…<\/p>\n","protected":false},"author":3,"featured_media":2894,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5656","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\/5656","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=5656"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5656\/revisions"}],"predecessor-version":[{"id":5657,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5656\/revisions\/5657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2894"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}