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.
Este suele ser 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 especificada es verdaderado/while- también recorre un bloque de código mientras una condición especificada es verdadera
El bucle For
La declaración for crea un bucle con 3 expresiones opcionales:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
La expresión 1 se ejecuta (una vez) antes de la ejecución del bloque de código.
La expresión 2 define la condición para ejecutar el bloque de código.
La expresión 3 se ejecuta (cada vez) 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 expresión 1 establece una variable antes de que comience el ciclo (let i = 0).
La expresión 2 define la condición para que se ejecute el bucle (i debe ser menor que 5).
La expresión 3 aumenta un valor (i++) cada vez que se ejecuta el bloque de código en el bucle.
Expresión 1
Normalmente utilizará la expresión 1 para inicializar la variable utilizada en el bucle (let i = 0).
Este no es siempre el caso. A JavaScript no le importa. La expresión 1 es opcional.
Puedes iniciar muchos valores en la expresión 1 (separados por coma):
Ejemplo:
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Y puedes omitir la expresión 1 (como cuando los 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>";
}
Expresión 2
A menudo, la expresión 2 se utiliza para evaluar la condición de la variable inicial.
Este no es siempre el caso. A JavaScript no le importa. La expresión 2 también es opcional.
Si la expresión 2 devuelve verdadero, el ciclo comenzará de nuevo. Si devuelve falso, el ciclo finalizará.
Si omites la expresión 2, debes proporcionar la palabra clave
breakdentro del bucle. De lo contrario, el ciclo nunca terminará. Esto bloqueará su navegador. Lea sobrebreaken un capítulo posterior de este tutorial.
Expresión 3
A menudo, la expresión 3 incrementa el valor de la variable inicial.
Este no es siempre el caso. A JavaScript no le importa. La expresión 3 es opcional.
La expresión 3 puede hacer cualquier cosa, como un incremento negativo (i--), un incremento positivo (i = i + 15) o cualquier otra cosa.
La expresión 3 también se puede omitir (como cuando incrementas tus valores dentro del bucle):
Ejemplo:
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Alcance del bucle
Usando var en un bucle:
Ejemplo:
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
Usando let en 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 se usa let para declarar la variable i en un bucle, la variable i solo será visible dentro del bucle.
Bucles For/Of y For/In
Los bucles for/in y for/of se explican en el siguiente capítulo.
Bucle while
El bucle while y el do/while se explican en los siguientes capítulos.
Traducido con 💚 desde W3Schools.com