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>