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>