JavaScript para bucle
Ejemplo
Repita (itere sobre) un bloque de código cinco veces:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Repita (itere sobre) una matriz para recopilar nombres de automóviles:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- El ciclo comienza en la posición 0 (
let i = 0). - El bucle se incrementa automáticamente
ipara cada ejecución. - El ciclo se ejecuta mientras
i < cars.length.
Más ejemplos a continuación.
Definición y uso
La forinstrucción define un bloque de código que se ejecuta siempre que una condición sea
true.
Nota
Si omite la declaración 2, debe proporcionar un descanso dentro del bucle.
De lo contrario, el ciclo nunca terminará. Esto bloqueará su navegador.Ver también:
Sintaxis
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Parámetros
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
Declaraciones de bucle de JavaScript
| Declaración | Descripción | |
| descanso | Sale de un bucle | |
| Seguir | Salta un valor en un bucle | |
| mientras | Recorre un bloque de código mientras una condición es verdadera | |
| hacer... mientras | Recorre un bloque de código una vez y luego mientras una condición es verdadera | |
| por | Recorre un bloque de código mientras una condición es verdadera | |
| para... de | Recorre los valores de cualquier iterable | |
| para... en | Recorre las propiedades de un objeto |
Más ejemplos
Inicie múltiples valores en el primer parámetro:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Omita los primeros parámetros (establezca los valores antes de que comience el ciclo):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Uso continue: recorra un bloque de código, pero omita el valor 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Uso break: haga un bucle en un bloque de código, pero salga del bucle cuando i == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Omita el segundo parámetro.
Use breakpara salir del ciclo, de lo contrario, el ciclo nunca terminará y su navegador se bloqueará:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Recorra una matriz en orden descendente (incremento negativo):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Omita el último parámetro e incremente los valores dentro del ciclo:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Haga un bucle en una lista de nodos y cambie el color de todos los elementos p en la lista:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Un bucle anidado (un bucle dentro de un bucle):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Compatibilidad con navegador
fores una característica de ECMAScript1 (ES1).
ES1 (JavaScript 1997) es totalmente compatible con todos los navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |