{"id":778,"date":"2024-07-30T20:57:13","date_gmt":"2024-07-30T18:57:13","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=778"},"modified":"2024-07-30T20:57:14","modified_gmt":"2024-07-30T18:57:14","slug":"004-weaksets-weakmaps","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/09-nuevos-tipos-y-caracteristicas-en-javascript\/004-weaksets-weakmaps\/","title":{"rendered":"004. WeakSets & WeakMaps"},"content":{"rendered":"\n

En cap\u00edtulos anteriores hemos estado viendo los nuevos tipos de datos que nos trajo Javascript<\/strong> a partir de ES6<\/strong>. Vimos los Symbols<\/strong>, los Sets<\/strong> (parecidos a los Arrays<\/strong>) y los Maps<\/strong> (parecidos a los Objetos<\/strong>).<\/p>\n\n\n\n\n\n\n\n

Estos Sets<\/strong> y Maps<\/strong> tienen una especie de hermano peque\u00f1o el cual se llama WeakSet<\/strong> y WeakMap<\/strong>, los cuales s\u00f3lo pueden almacenar referencias d\u00e9biles<\/strong>, es decir, las llaves han de ser de tipo objeto, y al ser una referencia d\u00e9bil, \u00e9sto le permite al recolector de basura<\/strong> de Javascript<\/strong>, que en el momento de que alguna de las referencias d\u00e9biles ya se hayan nulificado o limpiado dentro de la l\u00f3gica de nuestra programaci\u00f3n, cuando el recolector de basura<\/strong> ejecute su proceso (esto lo hace cada navegador a su manera) todas estas referencias d\u00e9biles, al no existir, las va a limpiar, y \u00e9sto hace una mejora del rendimiento de nuestra aplicaci\u00f3n.<\/p>\n\n\n\n

Carencias<\/h2>\n\n\n\n

Estos nuevos tipos de datos tienen algunas carencias. No podemos iterar sobre las claves<\/strong> o valores<\/strong>, no son elementos iterables<\/strong>, por lo tanto, no podemos utilizar bucles forof<\/em><\/strong>, ni forin<\/em><\/strong>, ni forEach<\/em><\/strong>, como lo ve\u00edamos con los Maps<\/strong> y Sets<\/strong> normales.<\/p>\n\n\n\n

Tampoco podemos borrar todos los elementos a la vez, es decir, no podemos utilizar el m\u00e9todo clear()<\/em><\/strong>. Solamente podemos eliminarlos de uno en uno.<\/p>\n\n\n\n

Tampoco podemos verificar su tama\u00f1o, no tienen la propiedad size<\/em><\/strong>.<\/p>\n\n\n\n

S\u00ed que pueden hacer uso de los m\u00e9todos:<\/p>\n\n\n\n

M\u00e9todos para WeakSet<\/h2>\n\n\n\n

Se puede hacer uso de estos m\u00e9todos.<\/p>\n\n\n\n

    \n
  • has()<\/em><\/strong>: para comprobar si existe un elemento.<\/li>\n\n\n\n
  • add()<\/em><\/strong>: para agregar elementos.<\/li>\n\n\n\n
  • delete()<\/em><\/strong>: eliminar uno por uno.<\/li>\n<\/ul>\n\n\n\n

    M\u00e9todos para WeakMap<\/h2>\n\n\n\n

    Se puede hacer uso de estos elementos.<\/p>\n\n\n\n

      \n
    • get()<\/em><\/strong>: podemos obtener una llave.<\/li>\n\n\n\n
    • set()<\/em><\/strong>: podemos establecer valores.<\/li>\n\n\n\n
    • has()<\/em><\/strong>: comprobar si existe una llave.<\/li>\n\n\n\n
    • delete()<\/em><\/strong>: eliminar una llave.<\/li>\n<\/ul>\n\n\n\n

      Crear un WeakSet<\/h2>\n\n\n\n

      Mientras que en la funci\u00f3n constructora de los Sets<\/strong> pod\u00edamos pasar los datos, esto no ocurre para los WeakSets<\/strong>. Para almacenar los valores, tenemos que hacerlo uno por uno con el m\u00e9todo add()<\/em><\/strong>.<\/p>\n\n\n\n

      Ejm<\/strong><\/p>\n\n\n\n

      constws = newWeakSet()\n\nlet valor1 = {\"Valor 1\":1};\nlet valor2 = {\"Valor 2\":2};\nlet valor3 = {\"Valor 3\":3};\n\nws.add(valor1);\nws.add(valor2);\nws.add(valor3);\n\nconsole.log(ws);<\/pre>\n\n\n\n
      Crear un WeakMap<\/h2>\n\n\n\n
      Veamos un ejm para ver su sintaxis.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      const wm = new WeakMap();\n\nlet llave1 = {};\nlet llave2 = {};\nlet llave3 = {};\n\nwm.set(llave1, 1);\nwm.set(llave2, 2);\n\nconsole.log(wm);\n\n\/\/ Ver si existe un valor\nconsole.log(wm.has(llave1)); \/\/ Output true\n\n\/\/ Devuelve un valor\nconsole.log(wm.get(llave1)); \/\/ Output 1\n\n\/\/ Eliminar una llave en particular\nwm.delete(llave1);\nconsole.log(wm);<\/pre>\n\n\n\n
      \n
      Nota<\/strong>: los WeakSets<\/strong> funcionan como Arrays<\/strong> mientras que los WeakMaps<\/strong> funcionan como objetos<\/strong>.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
      En cap\u00edtulos anteriores hemos estado viendo los nuevos tipos de datos que nos trajo Javascript a partir de ES6. Vimos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":766,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-778","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En cap\u00edtulos anteriores hemos estado viendo los nuevos tipos de datos que nos trajo Javascript a partir de ES6. Vimos […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=778"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/778\/revisions"}],"predecessor-version":[{"id":779,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/778\/revisions\/779"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/766"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}