{"id":5658,"date":"2024-08-29T01:40:02","date_gmt":"2024-08-29T01:40:02","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-weakset-en-javascript-utilisation\/"},"modified":"2024-08-29T01:40:05","modified_gmt":"2024-08-29T01:40:05","slug":"objet-weakset-en-javascript-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-weakset-en-javascript-utilisation\/","title":{"rendered":"10.7 L&rsquo;Objet WeakSet en JavaScript : Utilisation"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Objet WeakSet JavaScript<\/strong> est une collection d&rsquo;objets uniquement, ce qui le diff\u00e9rencie des autres structures de donn\u00e9es comme Set qui peuvent contenir tout type de valeur. Utiliser des <strong>WeakSet en JavaScript<\/strong> permet de g\u00e9rer des r\u00e9f\u00e9rences d&rsquo;objets de mani\u00e8re efficace et s\u00e9curis\u00e9e en termes de m\u00e9moire, car les objets ajout\u00e9s \u00e0 un WeakSet peuvent \u00eatre r\u00e9cup\u00e9r\u00e9s par le garbage collector s&rsquo;il n&rsquo;existe pas d&rsquo;autres r\u00e9f\u00e9rences \u00e0 ces objets. Apprenons comment ils fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Objet <strong>WeakSet 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\/658888333?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 WeakSets sont utiles lorsque vous souhaitez suivre les objets sans emp\u00eacher leur collecte par l&rsquo;op\u00e9rateur garbage collector. Contrairement \u00e0 Set, les WeakSets ne retiennent que des objets et permettent une gestion plus efficace de la m\u00e9moire dans vos applications JavaScript. Voici comment les utiliser efficacement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation et Manipulation d&rsquo;un WeakSet<\/h3>\n\n\n\n<p>Pour cr\u00e9er un WeakSet, vous pouvez simplement utiliser le constructeur WeakSet avec une liste d&rsquo;objets. Notez que les WeakSets n\u2019acceptent que des objets comme \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let weakSet = new WeakSet();\n\nlet obj1 = {name: \"obj1\"};\nlet obj2 = {name: \"obj2\"};\n\nweakSet.add(obj1);\nweakSet.add(obj2);\n\nconsole.log(weakSet.has(obj1)); \/\/ true\nconsole.log(weakSet.has(obj2)); \/\/ true<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser WeakSet pour Prot\u00e9ger des Donn\u00e9es Sensibles<\/h3>\n\n\n\n<p>Une des utilisations pratiques des WeakSets est la protection des donn\u00e9es sensibles. Un WeakSet peut stocker des objets utilisateurs sans emp\u00eacher leur \u00e9limination de la m\u00e9moire lorsque ces objets ne sont plus n\u00e9cessaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let weakSet = new WeakSet();\n\nfunction handleSensitiveData(user) {\n    if (!weakSet.has(user)) {\n        weakSet.add(user);\n        \/\/ Traitez les donn\u00e9es sensibles ici\n        console.log(\"Traitement des donn\u00e9es sensibles pour\", user.name);\n    } else {\n        console.log(\"Les donn\u00e9es de cet utilisateur ont d\u00e9j\u00e0 \u00e9t\u00e9 trait\u00e9es.\");\n    }\n}\n\nlet user = {name: \"Alice\"};\nhandleSensitiveData(user);\nhandleSensitiveData(user); \/\/ Les donn\u00e9es de cet utilisateur ont d\u00e9j\u00e0 \u00e9t\u00e9 trait\u00e9es.\n\nuser = null; \/\/ L'objet sera collect\u00e9 par le garbage collector lorsque weakSet ne le r\u00e9f\u00e8re plus.<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Suivre des R\u00e9f\u00e9rences Temporaires<\/h3>\n\n\n\n<p>Les WeakSets sont particuli\u00e8rement utiles pour suivre des r\u00e9f\u00e9rences temporaires aux objets. Par exemple, dans des cas o\u00f9 vous devez savoir si un objet a \u00e9t\u00e9 marqu\u00e9 pour une op\u00e9ration mais sans garder dans la m\u00e9moire cet objet plus longtemps que n\u00e9cessaire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let weakSet = new WeakSet();\n\nfunction markForProcessing(task) {\n    weakSet.add(task);\n}\n\nfunction processTask(task) {\n    if (weakSet.has(task)) {\n        \/\/ Traitez la t\u00e2che\n        console.log(\"Traitement de la t\u00e2che: \", task.id);\n        weakSet.delete(task);\n    } else {\n        console.log(\"La t\u00e2che n'a pas \u00e9t\u00e9 marqu\u00e9e pour traitement.\");\n    }\n}\n\nlet task1 = {id: 1};\nlet task2 = {id: 2};\n\nmarkForProcessing(task1);\nprocessTask(task1); \/\/ Traitement de la t\u00e2che:  1\nprocessTask(task1); \/\/ La t\u00e2che n'a pas \u00e9t\u00e9 marqu\u00e9e pour traitement.\nprocessTask(task2); \/\/ La t\u00e2che n'a pas \u00e9t\u00e9 marqu\u00e9e pour traitement.\n\ntask1 = null; \/\/ L'objet sera collect\u00e9 par le garbage collector puisque weakSet ne garde pas des r\u00e9f\u00e9rence fortes.<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Avantages et Limites de l&rsquo;Utilisation de WeakSet<\/h2>\n\n\n\n<p>Comme toute structure de donn\u00e9es, les WeakSets ont des avantages et des inconv\u00e9nients sp\u00e9cifiques :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><strong>Avantages :<\/strong> Gestion automatique de la m\u00e9moire, r\u00e9duisant le risque de fuites de m\u00e9moire.<\/li>\n  <li><strong>Limites :<\/strong> Les WeakSets ne sont pas it\u00e9rables et ne peuvent pas \u00eatre convertis en Array directement. Vous ne pouvez pas obtenir des informations comme la taille de WeakSet directement.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;utilisation de <strong>WeakSet en JavaScript<\/strong> permet une manipulation et une gestion de r\u00e9f\u00e9rence des objets de mani\u00e8re efficace, tout en \u00e9tant avantageux pour la collecte des ordures. Que ce soit pour g\u00e9rer des r\u00e9f\u00e9rences temporaires ou prot\u00e9ger des donn\u00e9es sensibles, les WeakSets peuvent optimiser le comportement de votre application. Continuez \u00e0 exp\u00e9rimenter et \u00e0 explorer leurs utilisations avanc\u00e9es pour devenir un expert en JavaScript performant. Pour plus de tutoriels et des cours d\u00e9taill\u00e9s, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a>. D\u00e9couvrez \u00e9galement notre guide complet sur les structures de donn\u00e9es telles que l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/objet-map-en-javascript-tutoriel\">Objet Map en JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/objet-weakmap-en-javascript-guide-complet\">l&rsquo;Objet WeakMap en JavaScript<\/a>. Vous pouvez aussi apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-objet-en-javascript-tutoriel\">cr\u00e9er un objet en JavaScript<\/a> ou manier les m\u00e9thodes de manipulation des donn\u00e9es comme le \u00ab\u00a0<a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-spread-operator-en-javascript-guide\">spread operator<\/a>\u00ab\u00a0.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/144\" 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>\u00ab\u00a0`html Objet WeakSet JavaScript est une collection d&rsquo;objets uniquement, ce qui le diff\u00e9rencie des autres structures de donn\u00e9es comme Set qui peuvent contenir tout type&#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-5658","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\/5658","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=5658"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5658\/revisions"}],"predecessor-version":[{"id":5659,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5658\/revisions\/5659"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}