{"id":780,"date":"2024-07-30T20:58:12","date_gmt":"2024-07-30T18:58:12","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=780"},"modified":"2024-07-30T20:58:12","modified_gmt":"2024-07-30T18:58:12","slug":"005-iterables-iterators","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/09-nuevos-tipos-y-caracteristicas-en-javascript\/005-iterables-iterators\/","title":{"rendered":"005. Iterables & Iterators"},"content":{"rendered":"\n

En este cap\u00edtulo vamos a ver una caracter\u00edstica que tienen algunos de los tipos de datos, tanto de los nuevos como de los que ya exist\u00edan en Javascript<\/strong>. Vamos a hablar de los iterables<\/strong> y de los iteradores<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Iterable<\/h2>\n\n\n\n

Cuando hablamos de que una variable<\/strong> es iterable<\/strong>, o que un tipo de dato<\/strong> es iterable<\/strong>, significa que es una estructura de datos lineal que hace que sus elementos sean p\u00fablicos y se puedan recorrer, por ejm, los Arrays<\/strong>, los String<\/strong>, los Maps<\/strong>, los Sets<\/strong>… e incluso los elementos del DOM<\/strong> como son los nodos del DOM<\/strong>. Al ser elementos iterables<\/strong> guardan algunas caracter\u00edsticas.<\/p>\n\n\n\n

Iterador<\/h2>\n\n\n\n

Lo que se conoce como iterador<\/strong> es la interfaz<\/strong>, una especie de apuntador<\/strong> que va recorriendo los elementos de la misma estructura de datos.<\/p>\n\n\n\n

Por lo tanto, iterable<\/strong> es el elemento el cual su contenido se puede recorrer, y el iterador<\/strong> es el apuntador que est\u00e1 recorriendo dichos elementos iterables<\/strong>, el mecanismo que los est\u00e1 recorriendo.<\/p>\n\n\n\n

En base a esto podemos tener diferentes mecanismos para recorrer o consumir un elemento iterable<\/strong>, como puede ser la destructuraci\u00f3n<\/strong>, los m\u00e9todos for<\/strong><\/em>, forof<\/em><\/strong>, forin<\/em><\/strong>, forEach<\/em><\/strong>, el m\u00e9todo array.from()<\/em><\/strong>, el spread operator<\/strong>, las promesas<\/strong>… Pero hay un elemento que es el iterador<\/strong>, y con un m\u00e9todo especial llamdo next()<\/em><\/strong> estar recorriendo cada uno de los elementos que tenga nuestra estructura iterable.<\/p>\n\n\n\n

Acceder a la interface del iterador<\/h2>\n\n\n\n

Veamos con un ejm como acceder a la interface del mismo iterador<\/strong>.<\/p>\n\n\n\n

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

const iterable = \"[1,2,3,4,5]\";\n\n\/\/ Accedemos al iterador de nuestro iterable\nconst iterador = iterable[Symbol.iterator]();\n\nconsole.log(iterable);\nconsole.log(iterador);<\/pre>\n\n\n\n
Recorrer cada uno de los elementos<\/h2>\n\n\n\n
Al tener el iterator<\/strong> guardado en la variable iterador<\/em>, podemos ejecutar un m\u00e9todo especial que tiene el iterador, denominado next()<\/em><\/strong>, de la siguiente manera.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.log(iterador.next())<\/pre>\n\n\n\n
El iterador siempre va a devolver un objeto<\/strong> con dos propiedades<\/strong>, el valor como tal y un segundo par\u00e1metro que indica si ya se acabaron los elementos, se trata por tanto de una  .<\/p>\n\n\n\n
Veamos un ejm para entender como funciona.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
const iterable = [1,2,3,4,5];\n\n\/\/ Accedemos al iterador de nuestro iterable\nconst iterador = iterable[Symbol.iterator]();\n\nconsole.log(iterable);\nconsole.log(iterador);\n\n\/\/ Hacer un ciclo que recorra todos los iterables\nlet next = iterador.next();\n\nwhile (!next.done) {\n   console.log(next.value);\n   next = iterador.next();\n}<\/pre>\n\n\n\n
Esto es lo que se conoce como el iterador, que es una interfaz especial mediante la cual podemos acceder a todo tipo de datos que sean iterables.<\/p>\n\n\n\n
En el siguiente cap\u00edtulo vamos a ver una nueva sintaxis con un nuevo tipo de funci\u00f3n que se denominan generadores<\/strong>, que es una manera m\u00e1s sencilla de trabajar con los iteradores de nuestros tipos de datos que sean iterables.<\/p>\n","protected":false},"excerpt":{"rendered":"
En este cap\u00edtulo vamos a ver una caracter\u00edstica que tienen algunos de los tipos de datos, tanto de los nuevos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":766,"menu_order":4,"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-780","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 este cap\u00edtulo vamos a ver una caracter\u00edstica que tienen algunos de los tipos de datos, tanto de los nuevos […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/780","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=780"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/780\/revisions"}],"predecessor-version":[{"id":781,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/780\/revisions\/781"}],"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=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}