{"id":5654,"date":"2024-08-29T01:32:09","date_gmt":"2024-08-29T01:32:09","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-set-en-javascript-explications\/"},"modified":"2024-08-29T01:32:12","modified_gmt":"2024-08-29T01:32:12","slug":"objet-set-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-set-en-javascript-explications\/","title":{"rendered":"10.5 L&rsquo;Objet Set en JavaScript : Explications"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les ensembles en JavaScript<\/strong> sont une structure de donn\u00e9es moderne qui permet de stocker des valeurs uniques de tout type, qu&rsquo;il s&rsquo;agisse de primitives ou d&rsquo;objets. Comprendre comment utiliser et manipuler les <strong>objets Set en JavaScript<\/strong> peut consid\u00e9rablement am\u00e9liorer l&rsquo;efficacit\u00e9 de votre code. Apprenons comment ils fonctionnent et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Objets Set 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\/658888104?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>En JavaScript, un <code>Set<\/code> est une collection d&rsquo;\u00e9l\u00e9ments uniques, ce qui signifie qu&rsquo;un \u00e9l\u00e9ment ne peut appara\u00eetre qu&rsquo;une seule fois dans le Set. Contrairement aux objets, o\u00f9 les valeurs sont associ\u00e9es \u00e0 des cl\u00e9s, les valeurs dans un Set sont simplement stock\u00e9es sans paires cl\u00e9-valeur. Les <code>Set<\/code> sont particuli\u00e8rement utiles lorsque vous devez stocker des \u00e9l\u00e9ments uniques et v\u00e9rifier rapidement l&rsquo;existence d&rsquo;un \u00e9l\u00e9ment dans la collection.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Set<\/h3>\n\n\n\n<p>Pour cr\u00e9er un Set, vous utilisez le constructeur <code>Set<\/code>. Voici comment cr\u00e9er un Set vide et un Set initialis\u00e9 avec des valeurs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un Set vide\nconst mySet = new Set();\n\n\/\/ Cr\u00e9er un Set avec des valeurs initiales\nconst keySet = new Set([1, 2, 3, 4, 5]);\n\nconsole.log(mySet);  \/\/ Output: Set(0) {}\nconsole.log(keySet); \/\/ Output: Set(5) {1, 2, 3, 4, 5}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter et Supprimer des \u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Vous pouvez ajouter des \u00e9l\u00e9ments \u00e0 un Set en utilisant la m\u00e9thode <code>add<\/code> et supprimer des \u00e9l\u00e9ments avec la m\u00e9thode <code>delete<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const mySet = new Set();\n\n\/\/ Ajouter des \u00e9l\u00e9ments\nmySet.add(1);\nmySet.add(2);\nmySet.add(2); \/\/ Ignor\u00e9, car 2 est d\u00e9j\u00e0 dans le Set\n\nconsole.log(mySet); \/\/ Output: Set(2) {1, 2}\n\n\/\/ Supprimer un \u00e9l\u00e9ment\nmySet.delete(1);\n\nconsole.log(mySet); \/\/ Output: Set(1) {2}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">V\u00e9rifier l&rsquo;Existence d&rsquo;\u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Vous pouvez v\u00e9rifier si un \u00e9l\u00e9ment est pr\u00e9sent dans un Set en utilisant la m\u00e9thode <code>has<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const mySet = new Set([1, 2, 3]);\n\nconsole.log(mySet.has(2)); \/\/ Output: true\nconsole.log(mySet.has(4)); \/\/ Output: false\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Parcourir un Set<\/h3>\n\n\n\n<p>Vous pouvez parcourir les \u00e9l\u00e9ments d&rsquo;un Set \u00e0 l&rsquo;aide de boucles comme <code>for...of<\/code> ou la m\u00e9thode <code>forEach<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const mySet = new Set([1, 2, 3]);\n\n\/\/ Utiliser for...of\nfor (const item of mySet) {\n  console.log(item);\n}\n\n\/\/ Utiliser forEach\nmySet.forEach(item => {\n  console.log(item);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Propri\u00e9t\u00e9s et M\u00e9thodes Utiles<\/h3>\n\n\n\n<p>Voici quelques propri\u00e9t\u00e9s et m\u00e9thodes utiles pour travailler avec les Sets en JavaScript :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><code>size<\/code>: Renvoie le nombre d&rsquo;\u00e9l\u00e9ments dans le Set.<\/li>\n  <li><code>clear()<\/code>: Supprime tous les \u00e9l\u00e9ments du Set.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const mySet = new Set([1, 2, 3]);\n\nconsole.log(mySet.size); \/\/ Output: 3\n\nmySet.clear();\n\nconsole.log(mySet.size); \/\/ Output: 0\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s avec les Sets<\/h3>\n\n\n\n<p>Pour approfondir vos connaissances, explorons quelques exemples avanc\u00e9s :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Union de Sets<\/h4>\n\n\n\n<p>La fonction <strong>union<\/strong> permet de combiner deux sets en un seul contenant tous les \u00e9l\u00e9ments uniques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const setA = new Set([1, 2, 3]);\nconst setB = new Set([3, 4, 5]);\n\nconst union = new Set([...setA, ...setB]);\n\nconsole.log(union); \/\/ Output: Set(5) {1, 2, 3, 4, 5}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Intersection de Sets<\/h4>\n\n\n\n<p>La fonction <strong>intersection<\/strong> renvoie un Set contenant uniquement les \u00e9l\u00e9ments pr\u00e9sents dans les deux sets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const setA = new Set([1, 2, 3]);\nconst setB = new Set([3, 4, 5]);\n\nconst intersection = new Set([...setA].filter(item => setB.has(item)));\n\nconsole.log(intersection); \/\/ Output: Set(1) {3}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Diff\u00e9rence de Sets<\/h4>\n\n\n\n<p>La fonction <strong>diff\u00e9rence<\/strong> renvoie un Set contenant les \u00e9l\u00e9ments pr\u00e9sents dans le premier set mais pas dans le second :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const setA = new Set([1, 2, 3]);\nconst setB = new Set([3, 4, 5]);\n\nconst difference = new Set([...setA].filter(item => !setB.has(item)));\n\nconsole.log(difference); \/\/ Output: Set(2) {1, 2}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Cas d\u2019Utilisation Pratiques<\/h4>\n\n\n\n<p>Les ensembles sont utiles dans de nombreux sc\u00e9narios de la vie r\u00e9elle. Voici quelques exemples d\u2019utilisation pratique :<\/p>\n\n\n\n<p><strong>\u00c9limination des doublons dans un tableau<\/strong> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const duplicatesArray = [1, 2, 2, 3, 4, 4, 5];\nconst uniqueArray = [...new Set(duplicatesArray)];\n\nconsole.log(uniqueArray); \/\/ Output: [1, 2, 3, 4, 5]\n<\/code><\/pre>\n\n\n\n<p><strong>Syst\u00e8me de permissions utilisateur<\/strong> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const userPermissions = new Set(['read', 'write']);\nconst adminPermissions = new Set(['read', 'write', 'delete']);\n\n\/\/ V\u00e9rifier une permission sp\u00e9cifique\nif (adminPermissions.has('delete')) {\n  console.log('L\\'administrateur a la permission de supprimer.');\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>objets Set en JavaScript<\/strong> sont une structure de donn\u00e9es puissante pour g\u00e9rer des collections d\u2019\u00e9l\u00e9ments uniques. Leur utilisation permet de simplifier de nombreuses t\u00e2ches de programmation telles que l&rsquo;\u00e9limination des doublons, la v\u00e9rification de pr\u00e9sence et bien d&rsquo;autres. Continuez \u00e0 explorer les Sets et leurs diverses applications pour enrichir vos comp\u00e9tences en d\u00e9veloppement JavaScript. Pour en savoir plus, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre article sur les <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">fondamentaux de JavaScript<\/a> et suivre nos prochains tutoriels.<\/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-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Liens Internes Relatifs \u00e0 JavaScript<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">Qu&rsquo;est-ce que JavaScript<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\">Meilleurs outils pour JavaScript<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\">Guide complet sur les extensions JavaScript<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\">Guide pratique pour placer du code JavaScript<\/a><\/li>\n  <li><a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-vs-code-pour-javascript\">Fonctionnement de VS Code pour JavaScript<\/a><\/li>\n<\/ul>\n\n\n\n<p>En compl\u00e9ment, vous pouvez approfondir vos connaissances sur la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-une-variable-en-javascript\">d\u00e9finition des variables en JavaScript<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\">comment les d\u00e9clarer<\/a>. Les <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\">guides sur la concat\u00e9nation<\/a> et l\u2019<a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-du-debogueur-en-javascript\">utilisation du d\u00e9bogueur<\/a> sont \u00e9galement disponibles pour vous aider.<\/p>\n<!-- \/wp","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les ensembles en JavaScript sont une structure de donn\u00e9es moderne qui permet de stocker des valeurs uniques de tout type, qu&rsquo;il s&rsquo;agisse de primitives&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2897,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5654","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\/5654","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=5654"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5654\/revisions"}],"predecessor-version":[{"id":5655,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5654\/revisions\/5655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2897"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}