Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Los bucles ofrecen una manera rápida y sencilla de hacer algo repetidamente. Este capítulo de La Guia JavaScript presenta las diferentes sentencias de iteración disponibles en JavaScript.
Usted puede pensar en un bucle, como en una versión de ordenador del juego, en el que se le dice a alguien que dé X pasos en una dirección, y que dé Y pasos en otra; por ejemplo, la idea "Vaya cinco pasos al Este" podría ser expresada de esta forma como un bucle:
var paso; for (paso = 0; paso < 5; paso++) { // Se ejecuta 5 veces, con valores desde paso desde 0 hasta 4. console.log('Dando un paso al Este'); };
Hay muchas clases diferentes de bucles, pero todos ellos hacen en esencia lo mismo: repetir una acción un numero de veces (y actualmente es posible que este número sea cero). Los diferentes bucles ofrecen también diferentes formas de determinar sus puntos de inicio y final. Hay varias situaciones que son mas fácilmente resueltas por un tipo de bucle que por otros.
Las sentencias para bucles disponibles en JavaScript son:
- sentencia for
- sentencia do...while
- sentencia while
- sentencia label
- sentencia break
- sentencia continue
- sentencia for...in
- sentencia for...of
sentencia for
Un bucle for
se repite hasta que la condición especificada se evalúa como false. El bucle for en JavaScript es similar al de Java y C. Una sentencia for
se muestra como sigue:
for ([expresionInicial]; [condicion]; [expresionIncremento]) sentencia
Cuando un bucle for
se ejecuta, ocurre lo siguiente:
- La expresión de inicialización
expresionInicial
, se ejecuta si esta existe. Esta expresión habitualmente inicializa uno o mas contadores del bucle, pero la sintaxis permite una expresión con cualquier grado de complejidad. Esta expresión puede también declarar variables. - Se evalúa la expresión
condicion
. Si el valor decondicion
es true, se ejecuta la sentencia del bucle. Si el valor decondicion
es false, el buclefor
finaliza. Si la expresióncondicion
es omitida, la condición es asumida como verdadera. - Se ejecuta la
sentencia
. Para ejecutar múltiples sentencias, use un bloque de sentencias ({ ... }
) para agruparlas. - Se ejecuta la expresión
expresionIncremento
, si hay una, y el control vuelve al paso 2.
Ejemplo
La siguiente función contiene una sentencia for que cuenta el número de opciones seleccionadas en una lista (a <select>
elemento que permite selección múltiple). La sentencia for
declara la variable i
y la inicializa a cero. Comprueba que i
es menor que el número de opciones en el elemento <select>
, ejecuta la sentencia siguiente if
, e incrementa i
en uno tras cada paso por el bucle.
<form name="selectForm"> <p> <label for="musicTypes">Choose some music types, then click the button below:</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="How many are selected?" /></p> </form> <script> function howMany(selectObject) { var numberSelected = 0; for (var i = 0; i < selectObject.options.length; i++) { if (selectObject.options[i].selected) { numberSelected++; } } return numberSelected; } var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ alert('Number of options selected: ' + howMany(document.selectForm.musicTypes)) }); </script>
sentencia do...while
La sentencia do...while
se repite hasta que una condición especificada se evalúa a false. Una sentencia do...while
se mostrará como sigue:
do sentencia while (condicion);
sentencia
se ejecuta antes de que la condición sea evaluada. Para ejecutar múltiples sentencias, use un bloque de sentencias ({ ... }
) para agruparlas. Si condicion
es true, la sentencia se ejecuta de nuevo. Al final de cada ejecución, la condición es comprobada. Cuando la condición es falsa, la ejecución se detiene y el control pasa a la sentencia siguiente al do...while
.
Ejemplo
En el siguiente ejemplo, el bucle do
itera al menos una vez y vuelve a hacerlo mientras i sea menor que 5.
do { i += 1; console.log(i); } while (i < 5);
sentencia while
Una sentencia while
ejecuta sus sentencias mientras la condición sea evaluada como verdadera. Una sentencia while
tiene el siguiente aspecto:
while (condicion) sentencia
Si la condición llega a ser falsa, la sentencia
dentro del bucle se deja de ejecutarse y el control pasa a la sentencia inmediatamente después del bucle.
La condición se evalúa antes de que la sentencia
contenida en el bucle sea ejecutada. Si la condición devuelve verdadero, la sentencia
se ejecuta y la condición se comprueba de nuevo. Si la condición es evaluada como falsa, se detiene la ejecución y el control pasa a la sentencia siguiente al while
.
Para ejecutar múltiples sentencias, use un bloque de sentencias ({ ... }) para agruparlas.
Ejemplo 1
El siguiente bucle while
itera mientras n
sea menor que tres:
n = 0; x = 0; while (n < 3) { n++; x += n; }
Con cada iteración, el bucle incrementa n
y añade ese valor a x
. Por consiguiente, x
y n
toman los siguientes valores:
- Después del primer paso:
n
= 1 yx
= 1 - Después del segundo paso:
n
= 2 yx
= 3 - Después del tercer paso:
n
= 3 yx
= 6
Tras completar el tercer paso, la condición n < 3
ya no es verdadera, por tanto el bucle termina.
Ejemplo 2
Evitar los bucles infinitos. Asegúrese de que la condición en un bucle llegue finalmente a ser falsa; de otra forma, el bucle nunca terminará. Las sentencias en el siguiente bucle while
se ejecutan sin fin, porque la condición nunca llega a ser falsa:
while (true) { console.log("Hello, world"); }
sentencia label
Un label proporciona una sentencia con un identificador que le deja referirse a al desde cualquier lugar de su programa. Por ejemplo, usted puede usar un label para identificar un bucle, y usar las sentencias break
o continue
para indicar si el programa debe interrumpir un bucle o continuar su ejecución.
La sintaxis de la sentencia label es:
label : sentencia
El valor de label
puede ser cualquier identificador JavaScript que no sea una palabra reservada. La sentencia
que usted identifica con un label puede ser cualquier sentencia.
Ejemplo
En este ejemplo, el label markLoop
identifica a un bucle while
.
markLoop: while (theMark == true) { doSomething(); }
sentencia break
Use la sentencia break
para salir de un bucle, switch
, o en conjunto con una sentencia label.
- Cuando use
break
sin un label, finaliza inmediatamente el código encerrado enwhile
,do-while
,for
, oswitch
y transfiere el control a la siguiente sentencia. - Cuando usted use
break
con un label, termina la sentencia especificada por label.
La sintaxis de la sentencia break
es la siguiente:
break;
break label;
La primera forma de la sintaxis finaliza con lo encerrado por el bucle o switch
; la segunda finaliza lo especificado por la sentencia label.
Ejemplo 1
El siguiente ejemplo itera a través de los elementos en un array hasta que encuentra que un índice de un elemento cuyo valor es elValor
:
for (i = 0; i < a.longitud; i++) { if (a[i] == elValor) { break; } }
Ejemplo 2: Breaking a un label
var x = 0; var z = 0 labelCancelLoops: while (true) { console.log("Outer loops: " + x); x += 1; z = 1; while (true) { console.log("Inner loops: " + z); z += 1; if (z === 10 && x === 10) { break labelCancelLoops; } else if (z === 10) { break; } } }
sentencia continue
La sentencia continue
puede usarse para reiniciar una sentencia while
, do-while
, for
, o label
.
- Cuando use
continue
sin un label, estl termina la iteración en curso del código encerrado en una sentenciawhile
,do-while
, ofor
y continúa la ejecución del bucle con la siguiente iteración. A diferencia de la sentenciabreak
,continue
no termina completamente la ejecución del bucle. En un buclewhile
, salta atrás hasta la condición. En un buclefor
, salta a laexpresionIncremento
. - Cuando use
continue
con una etiqueta, esto se aplica a las sentencias anidadas identificadas con una etiqueta.
La sintaxis de la sentencia continue
es la siguiente:
continue;
continue
label;
Ejemplo 1
El siguiente ejemplo muestra un bucle while
con una sentencia continue
que se ejecuta cuando el valor de i
es tres. Así, n
toma los valores uno, tres, siete, y doce.
i = 0; n = 0; while (i < 5) { i++; if (i == 3) { continue; } n += i; }
Ejemplo 2
Una sentencia etiquetada checkiandj
contiene una sentencia etiquetada checkj
. Si se encuentra continue
, el programa termina la iteración en curso de checkj
y empieza la siguiente iteración. Cada vez que continue
es encontrado, checkj
reitera hasta que su condición devuelve false
. Y cuando devuelve false
, el resto de la sentencia checkiandj
es completada, y checkiandj
reitera hasa que su condición devuelve false
. Cuando esto ocurre el programa continua en la siguiente sentencia después de checkiandj
.
Si continue
tenía una etiqueta checkiandj
, el programa continuaría al principio de la sentencia checkiandj
.
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 + " is odd."); } console.log("i = " + i); console.log("j = " + j); }
sentencia for...in
La sentencia for...in
itera una variable especificada sobre todas las propiedades enumerables de un objeto. Para cada propiedad distinta, JavaScript ejecuta las sentencias especificadas. Una sentencia for...in
será como sigue:
for (variable en objeto) { sentencias }
Ejemplo
La siguiente función toma como su argumento un objeto y el nombre del objeto. Entonces itera sobre todas las propiedades del objeto y devuelve una cadena que lista los nombres de las propiedades y sus nombres.
function volcar_propiedades(obj, obj_nombre) { var resultado = ""; for (var i in obj) { resultado += obj_nombre + "." + i + " = " + obj[i] + "<br>"; } resultado += "<hr>"; return resultado; }
Para un objeto coche
con propiedades marca
y modelo
, resultado
sería:
coche.marca = Ford coche.modelo = Mustang
Arrays
Aunque puede ser tentador usar esto como una forma de iterar sobre elementos Array
, la sentencia for...in devolverá el nombre de sus propiedades definidas por el usuario en suma a los índices numéricos. Así es mejor usar un bucle for
tradicional con un índice numérico con iteración sobre arrays, porque la sentencia for...in itera sobre propiedades definidas por el usuario en definitiva a los elementos del array, Si usted modifica el objeto Array, por ejemplo añadiendo propiedades personalizadas o métodos.
sentencia for...of
This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.
La sentencia for...of
crea un bucle iterando sobre objetos iterables (incluyendo Array
, Map
, Set
, argumentos objetos etc), invocando una iteración personalizada conectando con sentencias para ser ejecutadas por le valor de cada propiedad distinta.
for (variable de objeto) { sentencia }
El siguiente ejemplo muestra la diferencia entre un bucle for...of
y un bucle for...in
. Mientras for...in
itera sobre nombres de propiedades, for...of
itera sobre valores de propiedades:
let arr = [3, 5, 7]; arr.foo = "hello"; 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" }