Los bucles pueden ejecutar un bloque de código varias veces.
Los bucles de JavaScript
Los bucles son muy útiles, si se desea ejecutar el mismo código una y otra vez, cada vez con un valor diferente.
A menudo este es el caso cuando se trabaja con arrays:
En lugar de escribir:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
Puedes escribir:
for (i = 0; i < cars.length; i++) {
text += cars[i] +
"<br>";
} Inténtalo tú mismo " Diferentes tipos de bucles
JavaScript soporta diferentes tipos de bucles:
- for - bucles a través de un bloque de código un número de veces
- for/in - bucle a través de las propiedades de un objeto
- while - los bucles a través de un bloque de código mientras una condición especificada es verdadera
- do/while - también bucles a través de un bloque de código mientras una condición especificada es verdadera
El For Loop
El for bucle es a menudo la herramienta que va a utilizar cuando se quiere crear un bucle.
El for bucle tiene la siguiente sintaxis:
for (statement
1; statement 2; statement 3) {
code block to be executed
}
Declaración 1 se ejecuta antes del bucle (el bloque de código) se inicia.
Declaración 2 define la condición para ejecutar el bucle (el bloque de código).
Declaración 3 se ejecuta cada vez después de que el bucle (el bloque de código) se ha ejecutado.
En el ejemplo anterior, se puede leer:
Declaración 1 establece una variable antes de que comience el bucle (var i = 0) .
Declaración 2 define la condición para que el bucle se ejecute (i debe ser inferior a 5).
Declaración 3 aumenta un valor (i++) cada vez que el bloque de código en el bucle se haya ejecutado.
declaración 1
Normalmente, se utilizará la declaración 1 para iniciar la variable utilizada en el bucle (i = 0) .
Esto no es siempre el caso, JavaScript no le importa. Declaración 1 es opcional.
Puede iniciar muchos valores en el estado 1 (separados por comas):
Ejemplo
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
} Inténtalo tú mismo " Y se puede omitir la declaración 1 (como cuando se establecen los valores antes de que comience el bucle):
Ejemplo
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
} Inténtalo tú mismo " declaración 2
A menudo declaración 2 se utiliza para evaluar la condición de la variable inicial.
Esto no es siempre el caso, JavaScript no le importa. Declaración 2 también es opcional.
Si los estados 2 vuelve verdadera, el bucle volverá a empezar de nuevo, si se vuelve falsa, el bucle terminará.
Si se omite la declaración 2, debe proporcionar una break dentro del bucle. De lo contrario, el bucle nunca terminará. Esto se bloqueará su navegador. Lee sobre roturas en un capítulo posterior de este tutorial.
declaración 3
A menudo declaración 3 aumenta la variable inicial.
Esto no es siempre el caso, JavaScript no le importa, y la declaración 3 es opcional.
Declaración 3 puede hacer algo como incremento negativo (i--) , incremento positivo (i = i + 15) , o cualquier otra cosa.
Declaración 3 también se puede omitir (como cuando se incrementa sus valores dentro del bucle):
Ejemplo
var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
} Inténtalo tú mismo " El For/In Loop
La JavaScript for/in declaración de bucle a través de las propiedades de un objeto:
Ejemplo
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
} Inténtalo tú mismo " El While Loop
El while de bucle y el do/while bucle se explicará en el siguiente capítulo.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»