{"id":3556,"date":"2018-01-25T19:33:55","date_gmt":"2018-01-25T19:33:55","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/01\/25\/iterator-como-implementar-patron-diseno-iterador\/"},"modified":"2024-04-06T01:38:32","modified_gmt":"2024-04-06T07:38:32","slug":"iterator-como-implementar-patron-diseno-iterador","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/iterator-como-implementar-patron-diseno-iterador\/","title":{"rendered":"\u00bfC\u00f3mo implementar el patr\u00f3n de dise\u00f1o Iterator(Iterador) en Javascript?"},"content":{"rendered":"<blockquote>\n<p>El patr\u00f3n de dise\u00f1o <strong>iterador <\/strong>either <strong>iterator <\/strong>proporciona una manera de acceder a elementos de un objeto (que contiene alg\u00fan tipo de datos agregados como un arreglo o una lista) secuencialmente sin exponer su estructura interna.<\/p>\n<\/blockquote>\n<p>Cita original de <a href=\"https:\/\/www.amazon.com\/Design-Patterns-Elements-Reusable-Object-Oriented\/dp\/0201633612\" target=\"_blank\" rel=\"noopener noreferrer\">Design Patterns: Elements of Reusable Object-Oriented Software por GoF<\/a>:<\/p>\n<blockquote>\n<p>Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation.<\/p>\n<\/blockquote>\n<p>Este patr\u00f3n de dise\u00f1o tambi\u00e9n es conocido como <strong>cursor<\/strong>, si has usado cursores para recorrer los elementos obtenidos de una base de datos, \u00bfQue crees?, ah\u00ed estas utilizando el patr\u00f3n de dise\u00f1o iterador.<\/p>\n<p>El objetivo de este patr\u00f3n es poder recorrer y obtener elementos de un objeto sin necesidad de saber como estos datos est\u00e1n estructurados. Adem\u00e1s de que la responsabilidad de recorrer los elementos no est\u00e1 en el objeto sino en el iterador.<\/p>\n<p>Un iterador se compone normalmente de los siguientes m\u00e9todos:<\/p>\n<ul>\n<li><code>iterador.hasNext()<\/code> either <code>iterador.hayMas()<\/code><\/li>\n<li><code>iterador.next()<\/code> either <code>iterador.siguiente()<\/code><\/li>\n<li><code>iterador.current()<\/code> either <code>iterador.elementoActual()<\/code><\/li>\n<li><code>iterador.rewind()<\/code> either <code>iterador.rebobinar()<\/code>, que nos permite posicionar el &#8220;cursor&#8221; en el primer elemento.<\/li>\n<\/ul>\n<p>Aqu\u00ed te dejo como implementarlo en un navegador web:<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Patr\u00f3n de dise\u00f1o Iterator (Iterador)\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/wpXVgd\/?height=265&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2#full\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/wpXVgd\/\">Patr\u00f3n de dise\u00f1o Iterator (Iterador)<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>\n<p>Podemos notar que el siguiente elemento est\u00e1 determinado por la funci\u00f3n <code>iterador.next()<\/code> el cual suma <code>2<\/code> a la variable <code>index<\/code> y es por eso que obtenemos los valores <code>1,3,5,7,9<\/code> del arreglo <code>data<\/code>.<\/p>\n<p>Al final rebobinamos al inicio de <code>data<\/code> e imprimimos el elemento actual, es decir <code>1<\/code>, con el m\u00e9todo <code>iterador.current()<\/code>.<\/p>\n<p>MongoDB es una base de datos basada en documentos en formato BJSON que es la forma binaria de JSON, en MongoShell se puede ver el uso de este patr\u00f3n de dise\u00f1o:<\/p>\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const cursor = db.users.find( { type: 2 } );while (cursor.hasNext()) {  imprimirDocumento(cursor.next());}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> cursor <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> db<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">users<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">find<\/span><span style=\"color: #BABED8\">( <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">type<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">while<\/span><span style=\"color: #BABED8\"> (cursor<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">hasNext<\/span><span style=\"color: #BABED8\">()) <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #82AAFF\">imprimirDocumento<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">cursor<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">next<\/span><span style=\"color: #F07178\">())<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En este ejemplo se obtienen los documentos de la colecci\u00f3n <code>users<\/code> que tengan una propiedad <code>type<\/code> equal to <code>2<\/code>, luego se recorren uno por uno a trav\u00e9s de los m\u00e9todos <code>cursor.hasNext()<\/code>and <code>cursor.next()<\/code>.<\/p>","protected":false},"excerpt":{"rendered":"<p>        El patr\u00f3n de dise\u00f1o iterador o iterator proporciona una manera de acceder a elementos de un objeto secuencialmente sin exponer su estructura interna.<\/p>","protected":false},"author":2,"featured_media":3751,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28],"tags":[54,68],"class_list":["post-3556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-intermedio"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3556"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3556\/revisions"}],"predecessor-version":[{"id":3840,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3556\/revisions\/3840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3751"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}