diff options
Diffstat (limited to 'files/es/web/javascript/guide/loops_and_iteration/index.html')
| -rw-r--r-- | files/es/web/javascript/guide/loops_and_iteration/index.html | 334 |
1 files changed, 334 insertions, 0 deletions
diff --git a/files/es/web/javascript/guide/loops_and_iteration/index.html b/files/es/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..07b7c12e31 --- /dev/null +++ b/files/es/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,334 @@ +--- +title: Bucles e iteración +slug: Web/JavaScript/Guide/Bucles_e_iteración +tags: + - Bucle + - Guia(2) + - Guía + - Iteración + - JavaScript + - Sintaxis +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary">Los bucles ofrecen una forma rápida y sencilla de hacer algo repetidamente. Este capítulo de la {{JSxRef("../Guide", "Guía de JavaScript")}} presenta las diferentes declaraciones de iteración disponibles para JavaScript.</p> + +<p>Puedes pensar en un bucle como una versión computarizada del juego en la que le dices a alguien que dé <em>X</em> pasos en una dirección y luego <em>Y</em> pasos en otra. Por ejemplo, la idea "Ve cinco pasos hacia el este" se podría expresar de esta manera como un bucle:</p> + +<pre class="brush: js notranslate">for (let step = 0; step < 5; step++) { + // Se ejecuta 5 veces, con valores del paso 0 al 4. + console.log('Camina un paso hacia el este'); +} +</pre> + +<p>Hay muchos diferentes tipos de bucles, pero esencialmente, todos hacen lo mismo: repiten una acción varias veces. (¡Ten en cuenta que es posible que ese número sea cero!).</p> + +<p>Los diversos mecanismos de bucle ofrecen diferentes formas de determinar los puntos de inicio y terminación del bucle. Hay varias situaciones que son fácilmente atendidas por un tipo de bucle que por otros.</p> + +<p>Las declaraciones para bucles proporcionadas en JavaScript son:</p> + +<ul> + <li>{{anch("Declaracion_for", "Declaración for")}}</li> + <li>{{anch("Declaracion_do...while", "Declaración do...while")}}</li> + <li>{{anch("Declaracion_while", "Declaración while")}}</li> + <li>{{anch("Declaracion_labeled", "Declaración labeled")}}</li> + <li>{{anch("Declaracion_break", "Declaración break")}}</li> + <li>{{anch("Declaracion_continue", "Declaración continue")}}</li> + <li>{{anch("Declaracion_for...in", "Declaración for...in")}}</li> + <li>{{anch("Declaracion_for...of", "Declaración for...of")}}</li> +</ul> + +<h2 id="Declaración_for">Declaración <code>for</code></h2> + +<p>Un ciclo {{JSxRef("Sentencias/for", "for")}} se repite hasta que una condición especificada se evalúe como <code>false</code>. El bucle <code>for</code> de JavaScript es similar al bucle <code>for</code> de Java y C.</p> + +<p>Una declaración <code>for</code> tiene el siguiente aspecto:</p> + +<pre class="syntaxbox notranslate">for ([expresiónInicial]; [expresiónCondicional]; [expresiónDeActualización]) + instrucción +</pre> + +<p>Cuando se ejecuta un bucle <code>for</code>, ocurre lo siguiente:</p> + +<ol> + <li>Se ejecuta la expresión de iniciación <code>expresiónInicial</code>, si existe. Esta expresión normalmente inicia uno o más contadores de bucle, pero la sintaxis permite una expresión de cualquier grado de complejidad. Esta expresión también puede declarar variables.</li> + <li>Se evalúa la expresión <code>expresiónCondicional</code>. Si el valor de <code>expresiónCondicional</code> es verdadero, se ejecutan las instrucciones del bucle. Si el valor de <code>condición</code> es falso, el bucle <code>for</code> termina. (Si la expresión <code>condición</code> se omite por completo, se supone que la condición es verdadera).</li> + <li>Se ejecuta la <code>instrucción</code>. Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones.</li> + <li>Si está presente, se ejecuta la expresión de actualización <code>expresiónDeActualización</code>.</li> + <li>El control regresa al paso 2.</li> +</ol> + +<h3 id="Ejemplo"><strong>Ejemplo</strong></h3> + +<p>En el siguiente ejemplo, la función contiene una instrucción <code>for</code> que cuenta el número de opciones seleccionadas en una lista de desplazamiento (el elemento {{HTMLElement("select")}} de HTML representa un control que proporciona un menú de opciones que permite múltiples selecciones). La instrucción <code>for</code> declara la variable <code>i</code> y la inicia a <code>0</code>. Comprueba que <code>i</code> es menor que el número de opciones en el elemento <code><select></code>, realiza la siguiente instrucción <code>if</code> e incrementa <code>i</code> después de cada pasada por el bucle.</p> + +<pre class="brush: html notranslate"><form name="selectForm"> + <p> + <label for="musicTypes">Elija algunos tipos de música, luego haga clic en el botón de abajo:</label> + <select id="musicTypes" name="musicTypes" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classical</option> + <option>Opera</option> + </select> + </p> + <p><input id="btn" type="button" value="¿Cuántos están seleccionados?" /></p> +</form> + +<script> +function howMany(selectObject) { + let numberSelected = 0; + for (let i = 0; i < selectObject.options.length; i++) { + if (selectObject.options[i].selected) { + numberSelected++; + } + } + return numberSelected; +} + +let btn = document.getElementById('btn'); +btn.addEventListener('click', function() { + alert('Número de opciones seleccionadas: ' + howMany(document.selectForm.musicTypes)); +}); +</script> + +</pre> + +<h2 id="Declaración_do...while">Declaración <code>do...while</code></h2> + +<p>La instrucción {{JSxRef("Sentencias/do...while", "do...while")}} se repite hasta que una condición especificada se evalúe como falsa.</p> + +<p>Una declaración <code>do...while</code> tiene el siguiente aspecto:</p> + +<pre class="syntaxbox notranslate">do + <em>expresión</em> +while (condición); +</pre> + +<p><em><code>exposición</code></em> siempre se ejecuta una vez antes de que se verifique la condición. (Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones).</p> + +<p>Si <code>condición</code> es <code>true</code>, la declaración se ejecuta de nuevo. Al final de cada ejecución, se comprueba la condición. Cuando la condición es <code>false</code>, la ejecución se detiene y el control pasa a la declaración que sigue a <code>do...while</code>.</p> + +<h3 id="Ejemplo_2"><strong>Ejemplo</strong></h3> + +<p>En el siguiente ejemplo, el bucle <code>do</code> itera al menos una vez y se repite hasta que <code><em>i</em></code> ya no sea menor que <code>5</code>.</p> + +<p>let i = 0; do { i += 1; console.log(i); } while (i < 5);</p> + +<h2 id="Declaración_while">Declaración <code>while</code></h2> + +<p>Una declaración {{JSxRef("Sentencias/while", "while")}} ejecuta sus instrucciones siempre que una condición especificada se evalúe como <code>true</code>. Una instrucción <code>while</code> tiene el siguiente aspecto:</p> + +<pre class="syntaxbox notranslate">while (<em>condición</em>) + <em>expresión</em> +</pre> + +<p>Si la <em><code>condición</code></em> se vuelve <code>false</code>, la <code>instrucción</code> dentro del bucle se deja de ejecutar y el control pasa a la instrucción que sigue al bucle.</p> + +<p>La prueba de condición ocurre <em>antes</em> de que se ejecute la <code>expresión</code> en el bucle. Si la condición devuelve <code>true</code>, se ejecuta la <code>expresión</code> y la <em><code>condición</code></em> se prueba de nuevo. Si la condición devuelve <code>false</code>, la ejecución se detiene y el control se pasa a la instrucción que sigue a <code>while</code>.</p> + +<p>Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones.</p> + +<h3 id="Ejemplo_1"><strong>Ejemplo 1</strong></h3> + +<p>El siguiente ciclo del <code>while</code> se repite siempre que <em><code>n</code></em> sea menor que <code>3</code>:</p> + +<pre class="brush: js notranslate">let n = 0; +let x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p>Con cada iteración, el bucle incrementa <code>n</code> y agrega ese valor a <code>x</code>. Por lo tanto, <code>x</code> y <code>n</code> toman los siguientes valores:</p> + +<ul> + <li>Después de la primera pasada: <code>n</code> = <code>1</code> y <code>x</code> = <code>1</code></li> + <li>Después de la segunda pasada: <code>n</code> = <code>2</code> y <code>x</code> = <code>3</code></li> + <li>Después de la tercera pasada: <code>n</code> = <code>3</code> y <code>x</code> = <code>6</code></li> +</ul> + +<p>Después de completar la tercera pasada, la condición <code>n < 3</code> ya no es <code>true</code>, por lo que el bucle termina.<strong>Ejemplo 2</strong></p> + +<p>Evita los bucles infinitos. Asegúrate de que la condición en un bucle eventualmente se convierta en <code>false</code>; de lo contrario, el bucle nunca terminará. Las declaraciones en el siguiente bucle <code>while</code> se ejecutan indefinidamente porque la condición nunca se vuelve <code>false</code>:</p> + +<pre class="example-bad brush: js notranslate">// ¡Los bucles infinitos son malos! +while (true) { + console.log('¡Hola, mundo!'); +}</pre> + +<h2 id="Declaración_labeled">Declaración <code>labeled</code></h2> + +<p>Una {{JSxRef("Sentencias/label", "label")}} proporciona una instrucción con un identificador que te permite hacer referencia a ella en otra parte de tu programa. Por ejemplo, puedes usar una etiqueta para identificar un bucle y luego usar las declaraciones <code>break</code> o <code>continue</code> para indicar si un programa debe interrumpir el bucle o continuar su ejecución.La sintaxis de la instrucción etiquetada es similar a la siguiente:label : instrucción</p> + +<p>El valor de <code><em>label</em></code> puede ser cualquier identificador de JavaScript que no sea una palabra reservada. La <code><em>declaración</em></code> que identifica a una etiqueta puede ser cualquier enunciado.</p> + +<p><strong>Ejemplo</strong></p> + +<p>En este ejemplo, la etiqueta <code>markLoop</code> identifica un bucle <code>while</code>.</p> + +<p>markLoop: while (theMark === true) { doSomething(); }</p> + +<p>Declaración <code>break</code></p> + +<p>Usa la instrucción {{JSxRef("Sentencias/break", "break")}} para terminar un bucle, <code>switch</code> o junto con una declaración etiquetada.</p> + +<ul> + <li>Cuando usas <code>break</code> sin una etiqueta, inmediatamente termina el <code>while</code>, <code>do-while</code>, <code>for</code> o <code>switch</code> y transfiere el control a la siguiente declaración.</li> + <li>Cuando usas <code>break</code> con una etiqueta, termina la declaración etiquetada especificada.</li> +</ul> + +<p>La sintaxis de la instrucción <code>break</code> se ve así:</p> + +<pre class="syntaxbox notranslate">break; +break [<em>label</em>]; +</pre> + +<ol> + <li>La primera forma de la sintaxis termina el bucle envolvente más interno o el <code>switch.</code></li> + <li>La segunda forma de la sintaxis termina la instrucción etiquetada específica.</li> +</ol> + +<h3 id="Ejemplo_1_2"><strong>Ejemplo</strong> <strong>1</strong></h3> + +<p>El siguiente ejemplo recorre en iteración los elementos de un arreglo hasta que encuentra el índice de un elemento cuyo valor es <code>theValue</code>:</p> + +<pre class="brush: js notranslate">for (let i = 0; i < a.length; i++) { + if (a[i] === theValue) { + break; + } +}</pre> + +<h3 id="Ejemplo_2_romper_una_etiqueta"><strong>Ejemplo 2:</strong> romper una etiqueta</h3> + +<pre class="brush: js notranslate">let x = 0; +let z = 0; +labelCancelLoops: while (true) { + console.log('Bucles externos: ' + x); + x += 1; + z = 1; + while (true) { + console.log('Bucles internos: ' + z); + z += 1; + if (z === 10 && x === 10) { + break labelCancelLoops; + } else if (z === 10) { + break; + } + } +} +</pre> + +<h2 id="Declaración_continue">Declaración <code>continue</code></h2> + +<p>La instrucción {{JSxRef("Sentencias/continue", "continue")}} se puede usar para reiniciar un <code>while</code>, <code>do-while</code>, <code>for</code>, o declaración <code>label</code>.</p> + +<ul> + <li>Cuando utilizas <code>continue</code> sin una etiqueta, finaliza la iteración actual del <code>while</code>, <code>do-while</code> o <code>for</code> y continúa la ejecución del bucle con la siguiente iteración. A diferencia de la instrucción <code>break</code>, <code>continue</code> no termina la ejecución del bucle por completo. En un bucle <code>while</code>, vuelve a la condición. En un bucle <code>for</code>, salta a la <code>expresión-incremento</code>.</li> + <li>Cuando usas <code>continue</code> con una etiqueta, se aplica a la declaración de bucle identificada con esa etiqueta.</li> +</ul> + +<p>La sintaxis de la instrucción <code>continue</code> se parece a la siguiente:</p> + +<pre class="syntaxbox notranslate">continue [<em>label</em>]; +</pre> + +<h3 id="Ejemplo_1_3"><strong>Ejemplo 1</strong></h3> + +<p>El siguiente ejemplo muestra un bucle <code>while</code> con una instrucción <code>continue</code> que se ejecuta cuando el valor de <code>i</code> es <code>3</code>. Por lo tanto, <code>n</code> toma los valores <code>1</code>, <code>3</code>, <code>7</code> y <code>12</code>.</p> + +<pre class="brush: js notranslate">let i = 0; +let n = 0; +while (i < 5) { + i++; + if (i === 3) { + continue; + } + n += i; + console.log(n); +} +//1,3,7,12 + + +let i = 0; +let n = 0; +while (i < 5) { + i++; + if (i === 3) { + // continue; + } + n += i; + console.log(n); +} +// 1,3,6,10,15 +</pre> + +<h3 id="Ejemplo_2_2"><strong>Ejemplo 2</strong></h3> + +<p>Una declaración etiquetada <em><code>checkiandj</code></em> contiene una declaración etiquetada <em><code>checkj</code></em>. Si se encuentra <code>continue</code>, el programa termina la iteración actual de <em><code>checkj</code></em> y comienza la siguiente iteración. Cada vez que se encuentra <code>continue</code>, <em><code>checkj</code></em> reitera hasta que su condición devuelve <code>false</code>. Cuando se devuelve <code>false</code>, el resto de la instrucción <em><code>checkiandj</code></em> se completa y <em><code>checkiandj</code></em> reitera hasta que su condición devuelve <code>false</code>. Cuando se devuelve <code>false</code>, el programa continúa en la declaración que sigue a <em><code>checkiandj</code></em>.</p> + +<p>Si <code>continue</code> tuviera una etiqueta de <em><code>checkiandj</code></em>, el programa continuaría en la parte superior de la declaración <em><code>checkiandj</code></em>.</p> + +<p>let i = 0; let j = 10; checkiandj: while (i < 4) { console.log(i); i += 1; checkj: while (j > 4) { console.log(j); j -= 1; if ((j % 2) === 0) { continue checkj; } console.log(j + 'es impar.'); } console.log('i = ' + i); console.log('j = ' + j); }</p> + +<h2 id="Declaración_for...in">Declaración <code>for...in</code></h2> + +<p>La instrucción {{JSxRef("Sentencias/for...in", "for...in")}} itera una variable especificada sobre todas las propiedades enumerables de un objeto. Para cada propiedad distinta, JavaScript ejecuta las instrucciones especificadas. Una declaración <code>for...in</code> tiene el siguiente aspecto:</p> + +<pre class="syntaxbox notranslate">for (variable in objeto) + instrucción +</pre> + +<h3 id="Ejemplo_3"><strong>Ejemplo</strong></h3> + +<p>La siguiente función toma como argumento un objeto y el nombre del objeto. Luego itera sobre todas las propiedades del objeto y devuelve una cadena que enumera los nombres de las propiedades y sus valores.</p> + +<pre class="brush: js notranslate">function dump_props(obj, obj_name) { + let result = ''; + for (let i in obj) { + result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; + } + result += '<hr>'; + return result; +} +</pre> + +<p>Para un objeto <code>car</code> con propiedades <code>make</code> y <code>model</code>, <code>result</code> sería:</p> + +<pre class="brush: js notranslate">car.make = Ford +car.model = Mustang +</pre> + +<h3 id="Arrays"><strong>Arrays</strong></h3> + +<p>Aunque puede ser tentador usar esto como una forma de iterar sobre los elementos {{JSxRef("Array")}}, la instrucción <code>for...in</code> devolverá el nombre de sus propiedades definidas por el usuario además de los índices numéricos.</p> + +<p>Por lo tanto, es mejor usar un bucle {{JSxRef("Sentencias/for", "for")}} tradicional con un índice numérico cuando se itera sobre arreglos, porque la instrucción <code>for...in</code> itera sobre las propiedades definidas por el usuario además de los elementos del arreglo, si modificas el objeto <code>Array</code> (tal como agregar propiedades o métodos personalizados).</p> + +<h2 id="Declaración_for...of">Declaración <code>for...of</code></h2> + +<p>La declaración {{JSxRef("Sentencias/for...of", "for...of")}} crea un bucle que se repite sobre {{JSxRef("../Guide/iterable", "objetos iterables")}} (incluidos {{JSxRef("Array")}}, {{JSxRef("Map")}}, {{JSxRef("Set")}}, objetos {{JSxRef("Funciones/arguments", "arguments")}} y así sucesivamente), invocando un gancho de iteración personalizado con declaraciones que se ejecutarán para el valor de cada distinta propiedad.</p> + +<pre class="syntaxbox notranslate">para (<em>variable</em> of <em>objeto</em>) + <em>expresión</em> +</pre> + +<p>El siguiente ejemplo muestra la diferencia entre un bucle for<code>...in</code> y un bucle {{JSxRef("Sentencias/for...in", "for...in")}}. Mientras que <code>for...in</code> itera sobre los nombres de propiedad, <code>for...of</code> itera sobre los valores de propiedad:</p> + +<pre class="brush:js notranslate">const arr = [3, 5, 7]; +arr.foo = 'hola'; + +for (let i in arr) { + console.log(i); // logs "0", "1", "2", "foo" +} + +for (let i of arr) { + console.log(i); // logs 3, 5, 7 +} +</pre> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> |