Loop Javascript for
Los bucles pueden ejecutar un bloque de código varias veces. 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.
Ejm
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>";
Podemos escribir
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Diferentes tipos de bucles
Javascript soporta diferentes tipos de bucles:
- for: recorre un bloque de código varias veces
- for / in: recorre las propiedades de un objeto
- for / of: recorre los valores de un objeto iterable
- while: recorre un bloque de código mientras una condición especificada es verdadera
- do / while: también recorre un bloque de código mientras una condición especificada es verdadera
El loop for
El bucle for tiene la siguiente sintaxis.
for (declaración 1; declaración 2; declaración 3) { // bloque de código que se va a ejecutar }
- 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 instrucción 3 se ejecuta (cada vez) después de que se haya ejecutado el bloque de código
Ejm
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
En el ejemplo anterior, puede leer:
- La declaración 1 establece una variable antes de que comience el ciclo (var i = 0).
- La declaración 2 define la condición para que se ejecute el ciclo (i 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 bucle.
Declaración 1
Normalmente usaremos la declaracion 1 para inicializar la variable usada en el loop (i=0). Este no es siempre el caso, a JavaScript no le importa. La declaración 1 es opcional. Puedes iniciar muchos valores en la declaración 1 (separados por coma).
Ejm
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Y puedes omitir la declaración 1 (como cuando sus valores se establecen antes de que comience el ciclo).
Ejm
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Declaración 2
A menudo, el enunciado 2 se utiliza 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 ciclo comenzará de nuevo, si devuelve falso, el ciclo terminará.
Declaración 3
A menudo, el enunciado 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 incremento negativo (i–), 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).
Ejm
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
var text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
El loop for/in
La instrucción JavaScript for / in recorre las propiedades de un objeto.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Bucle Javascript for/in</h2>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname: "John", lname: "Doe", age:25};
var x;
for(x in person)
{
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
El loop for/of
La sentencia JavaScript for / of recorre los valores de un objeto iterable
for / of te permite recorrer las estructuras de datos que son iterables, como Arrays, Strings, Maps, NodeLists y más.
El bucle for / of tiene la siguiente sintaxis.
for (variable of iterable) { // code block to be executed }
variable: para cada iteración, el valor de la siguiente propiedad se asigna a la variable. La variable se puede declarar con const, let o var.
iterable: un objeto que tiene propiedades iterables.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Loop for/of</title>
</head>
<body>
<h2>Bucle Javascript for/of</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Mini"];
var x;
for(x of cars)
{
document.write(x + "<br />");
}
</script>
</body>
</html>
Con un string podríamos utilizar el siguiente código.
Ejm
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For/Of Loop</h2>
<p>The for/of statement loops through the values of an iterable object.</p>
<script>
var txt = 'JavaScript';
var x;
for (x of txt) {
document.write(x + "<br >");
}
</script>
</body>
</html>