JavaScript para bucle
Los bucles pueden ejecutar un bloque de código varias veces.
Bucles JavaScript
Los bucles son útiles si 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 matrices:
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 (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Diferentes tipos de bucles
JavaScript admite diferentes tipos de bucles:
for- recorre un bloque de código varias vecesfor/in- recorre las propiedades de un objetofor/of- recorre los valores de un objeto iterablewhile- recorre un bloque de código mientras una condición específica es verdaderado/while- también recorre un bloque de código mientras una condición específica es verdadera
El bucle For
El forbucle tiene la siguiente sintaxis:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
La declaración 1 se ejecuta (una vez) antes de la ejecución del bloque de código.
La declaración 2 define la condición para ejecutar el bloque de código.
La declaración 3 se ejecuta (todas las veces) después de que se haya ejecutado el bloque de código.
Ejemplo
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Del ejemplo anterior, puedes leer:
La declaración 1 establece una variable antes de que comience el bucle (sea i = 0).
La declaración 2 define la condición para que se ejecute el bucle (debe ser menor que 5).
La declaración 3 aumenta un valor (i++) cada vez que se ejecuta el bloque de código en el ciclo.
Declaración 1
Normalmente usará la instrucción 1 para inicializar la variable utilizada en el bucle (sea i = 0).
Este no es siempre el caso, a JavaScript no le importa. La declaración 1 es opcional.
Puede iniciar muchos valores en la declaración 1 (separados por comas):
Ejemplo
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Y puede omitir la declaración 1 (como cuando sus valores se establecen antes de que comience el ciclo):
Ejemplo
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Declaración 2
A menudo, la declaración 2 se usa para evaluar la condición de la variable inicial.
Este no es siempre el caso, a JavaScript no le importa. La declaración 2 también es opcional.
Si la declaración 2 devuelve verdadero, el bucle comenzará de nuevo, si devuelve falso, el bucle terminará.
Si omite la declaración 2, debe proporcionar un descanso dentro del ciclo. De lo contrario, el ciclo nunca terminará. Esto bloqueará su navegador. Lea acerca de los descansos en un capítulo posterior de este tutorial.
Declaración 3
A menudo, la declaración 3 incrementa el valor de la variable inicial.
Este no es siempre el caso, a JavaScript no le importa, y la declaración 3 es opcional.
La declaración 3 puede hacer cualquier cosa como un incremento negativo (i--), un incremento positivo (i = i + 15) o cualquier otra cosa.
La declaración 3 también se puede omitir (como cuando incrementa sus valores dentro del ciclo):
Ejemplo
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Alcance de bucle
Usando varen un bucle:
Ejemplo
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
Usando leten un bucle:
Ejemplo
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
En el primer ejemplo, usando var, la variable declarada en el bucle vuelve a declarar la variable fuera del bucle.
En el segundo ejemplo, usando let, la variable declarada en el bucle no vuelve a declarar la variable fuera del bucle.
Cuando letse usa para declarar la variable i en un ciclo, la variable i solo será visible dentro del ciclo.
Bucles for/of y for/in
El for/inbucle y el for/ofbucle se explican en el próximo capítulo.
Mientras bucles
El whilebucle y el do/whilese explican en los próximos capítulos.