{"id":5662,"date":"2024-08-29T01:48:34","date_gmt":"2024-08-29T01:48:34","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objets-set-map-weakset-weakmap-en-javascript\/"},"modified":"2024-08-29T01:48:37","modified_gmt":"2024-08-29T01:48:37","slug":"objets-set-map-weakset-weakmap-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objets-set-map-weakset-weakmap-en-javascript\/","title":{"rendered":"10.9 Objets Set, Map, WeakSet, WeakMap en JavaScript"},"content":{"rendered":"\n<p><strong>Les objets Set, Map, WeakSet, WeakMap en JavaScript<\/strong> sont des outils essentiels pour la manipulation de collections de donn\u00e9es et la gestion de mappages dans vos applications. Comprendre comment utiliser <strong>Set, Map, WeakSet, WeakMap en JavaScript<\/strong> vous permettra d&rsquo;am\u00e9liorer l&rsquo;efficacit\u00e9 et la performance de votre code. Apprenons leur fonctionnement \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Objets Set, Map, WeakSet, WeakMap 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\/658888502?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><code>Set<\/code> en JavaScript est une collection d&rsquo;\u00e9l\u00e9ments uniques qui permet de stocker des valeurs primitives ou des objets. Voici comment cr\u00e9er et manipuler un <code>Set<\/code> :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Utiliser un Set<\/h3>\n\n\n\n<p>Pour cr\u00e9er un Set, vous pouvez utiliser le constructeur <code>Set()<\/code>, et ajouter des \u00e9l\u00e9ments avec la m\u00e9thode <code>add()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un Set\nconst set = new Set();\n\n\/\/ Ajouter des \u00e9l\u00e9ments\nset.add(1);\nset.add(2);\nset.add(3);\nset.add(1); \/\/ Duplicate value\n\nconsole.log(set); \/\/ Output: Set(3) {1, 2, 3}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Valeurs dans un Set<\/h3>\n\n\n\n<p>Vous pouvez v\u00e9rifier la pr\u00e9sence d&rsquo;un \u00e9l\u00e9ment avec <code>has()<\/code>, supprimer un \u00e9l\u00e9ment avec <code>delete()<\/code>, ou it\u00e9rer sur les valeurs avec <code>forEach()<\/code> et <code>for...of<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const set = new Set([1, 2, 3]);\n\nconsole.log(set.has(2)); \/\/ Output: true\n\nset.delete(2);\n\nconsole.log(set.has(2)); \/\/ Output: false\n\n\/\/ It\u00e9rer sur les valeurs\nset.forEach(value => console.log(value));\n\nfor (const value of set) {\n  console.log(value);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Utiliser un Map<\/h3>\n\n\n\n<p>Un <code>Map<\/code> en JavaScript est une collection de paires cl\u00e9-valeur. Contrairement \u00e0 un object, un <code>Map<\/code> peut avoir des cl\u00e9s de tout type.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un Map\nconst map = new Map();\n\n\/\/ Ajouter des paires cl\u00e9-valeur\nmap.set('name', 'John');\nmap.set('age', 30);\n\nconsole.log(map); \/\/ Output: Map(2) {'name' => 'John', 'age' => 30}\n\n\/\/ Acc\u00e9der \u00e0 une valeur\nconsole.log(map.get('name')); \/\/ Output: John\n\n\/\/ V\u00e9rifier la pr\u00e9sence d'une cl\u00e9\nconsole.log(map.has('age')); \/\/ Output: true\n\n\/\/ Supprimer une paire cl\u00e9-valeur\nmap.delete('age');\nconsole.log(map.has('age')); \/\/ Output: false<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">It\u00e9rer sur un Map<\/h3>\n\n\n\n<p>Il est possible d&rsquo;it\u00e9rer sur un <code>Map<\/code> en utilisant des boucles <code>for...of<\/code>, ou en r\u00e9cup\u00e9rant les it\u00e9rateurs des cl\u00e9s, valeurs, ou entr\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const map = new Map([\n  ['name', 'John'],\n  ['age', 30]\n]);\n\n\/\/ It\u00e9rer sur les entr\u00e9es\nfor (const [key, value] of map) {\n  console.log(`${key}: ${value}`);\n}\n\n\/\/ R\u00e9cup\u00e9rer les cl\u00e9s\nfor (const key of map.keys()) {\n  console.log(key);\n}\n\n\/\/ R\u00e9cup\u00e9rer les valeurs\nfor (const value of map.values()) {\n  console.log(value);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Utiliser un WeakSet<\/h3>\n\n\n\n<p>Un <code>WeakSet<\/code> est similaire \u00e0 un <code>Set<\/code>, mais il ne peut contenir que des objets, et non des valeurs primitives. Les objets stock\u00e9s dans un <code>WeakSet<\/code> sont faiblement r\u00e9f\u00e9renc\u00e9s, ce qui signifie qu&rsquo;ils peuvent \u00eatre collect\u00e9s par le garbage collector s&rsquo;il n&rsquo;existe plus aucune r\u00e9f\u00e9rence \u00e0 eux.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un WeakSet\nconst weakSet = new WeakSet();\n\nconst obj1 = {name: 'John'};\nconst obj2 = {age: 30};\n\n\/\/ Ajouter des objets\nweakSet.add(obj1);\nweakSet.add(obj2);\n\nconsole.log(weakSet.has(obj1)); \/\/ Output: true\n\n\/\/ Supprimer un objet\nweakSet.delete(obj1);\nconsole.log(weakSet.has(obj1)); \/\/ Output: false<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Utiliser un WeakMap<\/h3>\n\n\n\n<p>Un <code>WeakMap<\/code> est une collection de paires cl\u00e9-valeur o\u00f9 les cl\u00e9s sont des objets et les valeurs peuvent \u00eatre de tout type. Comme pour <code>WeakSet<\/code>, les cl\u00e9s dans un <code>WeakMap<\/code> sont faiblement r\u00e9f\u00e9renc\u00e9es.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un WeakMap\nconst weakMap = new WeakMap();\n\nconst obj1 = {id: 1};\nconst obj2 = {id: 2};\n\n\/\/ Ajouter des paires cl\u00e9-valeur\nweakMap.set(obj1, 'Alice');\nweakMap.set(obj2, 'Bob');\n\nconsole.log(weakMap.get(obj1)); \/\/ Output: Alice\n\n\/\/ V\u00e9rifier la pr\u00e9sence d'une cl\u00e9\nconsole.log(weakMap.has(obj2)); \/\/ Output: true\n\n\/\/ Supprimer une paire cl\u00e9-valeur\nweakMap.delete(obj2);\nconsole.log(weakMap.has(obj2)); \/\/ Output: false<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Avanc\u00e9es des Collections en JavaScript<\/h3>\n\n\n\n<p>Pour vous aider \u00e0 ma\u00eetriser l&rsquo;utilisation de <code>Set<\/code>, <code>Map<\/code>, <code>WeakSet<\/code>, et <code>WeakMap<\/code>, voyons quelques exemples d\u00e9taill\u00e9s tir\u00e9s de projets r\u00e9els.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des Abonnements avec Set<\/h4>\n\n\n\n<p>Imaginons une application de chat o\u00f9 vous souhaitez maintenir une liste unique d&rsquo;abonn\u00e9s pour chaque canal. Avec un <code>Set<\/code>, vous pouvez facilement g\u00e9rer les abonnements :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class ChatChannel {\n  constructor(name) {\n    this.name = name;\n    this.subscribers = new Set();\n  }\n\n  subscribe(user) {\n    this.subscribers.add(user);\n    console.log(`${user} a rejoint le canal ${this.name}`);\n  }\n\n  unsubscribe(user) {\n    this.subscribers.delete(user);\n    console.log(`${user} a quitt\u00e9 le canal ${this.name}`);\n  }\n}\n\nconst channel = new ChatChannel('G\u00e9n\u00e9ral');\nchannel.subscribe('Alice');\nchannel.subscribe('Bob');\nchannel.subscribe('Alice'); \/\/ Aucun doublon\n\nconsole.log(channel.subscribers); \/\/ Output: Set(2) {'Alice', 'Bob'}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de Map pour G\u00e9rer les Param\u00e8tres Utilisateur<\/h4>\n\n\n\n<p>Un <code>Map<\/code> peut \u00eatre utilis\u00e9 pour g\u00e9rer les param\u00e8tres utilisateur dans une application. Contrairement \u00e0 un objet, un <code>Map<\/code> permet d&rsquo;utiliser des objets comme cl\u00e9s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const userSettings = new Map();\n\nconst user1 = { id: 1, name: 'Alice' };\nconst user2 = { id: 2, name: 'Bob' };\n\n\/\/ Ajouter des param\u00e8tres\nuserSettings.set(user1, { theme: 'dark', language: 'fr' });\nuserSettings.set(user2, { theme: 'light', language: 'en' });\n\nconsole.log(userSettings.get(user1)); \/\/ Output: { theme: 'dark', language: 'fr' }\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de WeakSet pour Destructurer des R\u00e9f\u00e9rences \u00e0 des Objets Complexes<\/h4>\n\n\n\n<p>Dans une application de suivi de ressources, un <code>WeakSet<\/code> peut \u00eatre utilis\u00e9 pour g\u00e9rer des r\u00e9f\u00e9rences \u00e0 des objets complexes. Une fois que les objets ne sont plus n\u00e9cessaires, ils peuvent \u00eatre automatiquement nettoy\u00e9s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const resources = new WeakSet();\n\nlet resource1 = { description: 'Database Connection' };\nlet resource2 = { description: 'File Handle' };\n\nresources.add(resource1);\nresources.add(resource2);\n\nconsole.log(resources.has(resource1)); \/\/ Output: true\n\nresource1 = null;  \/\/ Cleanup, resource1 will be garbage collected\n\nconsole.log(resources.has(resource1)); \/\/ Output: false<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisation de WeakMap pour Stocker des Donn\u00e9es Priv\u00e9es<\/h4>\n\n\n\n<p>Un <code>WeakMap<\/code> est id\u00e9al pour stocker des donn\u00e9es priv\u00e9es associ\u00e9es \u00e0 des objets. Cela permet de prot\u00e9ger les donn\u00e9es et de garantir qu&rsquo;elles sont automatiquement collect\u00e9es lorsque l&rsquo;objet n&rsquo;est plus accessible :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const privateData = new WeakMap();\n\nclass Person {\n  constructor(name, age) {\n    privateData.set(this, { name, age });\n  }\n\n  getName() {\n    return privateData.get(this).name;\n  }\n\n  getAge() {\n    return privateData.get(this).age;\n  }\n}\n\nconst person = new Person('Alice', 30);\n\nconsole.log(person.getName()); \/\/ Output: Alice\nconsole.log(person.getAge()); \/\/ Output: 30<\/code><\/pre>\n\n\n\n<p>Pour en savoir plus sur l&rsquo;utilisation des collections en JavaScript, visitez le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Objets_globaux\" target=\"_blank\" rel=\"noopener\">site de la documentation MDN<\/a>. Vous pouvez \u00e9galement suivre des cours en ligne sur <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour approfondir vos connaissances.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">","protected":false},"excerpt":{"rendered":"<p>Les objets Set, Map, WeakSet, WeakMap en JavaScript sont des outils essentiels pour la manipulation de collections de donn\u00e9es et la gestion de mappages dans&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5662","post","type-post","status-publish","format-standard","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\/5662","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=5662"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5662\/revisions"}],"predecessor-version":[{"id":5663,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5662\/revisions\/5663"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}