JavaScript mientras bucle

Tabla de contenido

    Mostrar tabla de contenidos

Los bucles pueden ejecutar un bloque de código. siempre que una condición especificada sea verdadera.

El bucle while

El bucle while recorre un bloque de código siempre que una condición especificada sea verdadera.

Sintaxis

while (condition) {
      // code block to be executed
 }

Ejemplo

En el siguiente ejemplo, el código del bucle se ejecutará una y otra vez, siempre que una variable (i) es menor que 10:

Ejemplo

while (i < 10) {
    text += "The number is " + i;
    i++;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript While Loop</h2>

<p id="demo"></p>

<script>
let text = "";
let i = 0;
while (i < 10) {
  text += "<br>The number is " + i;
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Si olvida aumentar la variable utilizada en la condición, el ciclo nunca terminará. Esto bloqueará su navegador.

El bucle do while

El bucle do while es una variante del bucle while. Este bucle ejecute el bloque de código una vez, antes de verificar si la condición es verdadera, entonces repita el ciclo mientras la condición sea verdadera.

Sintaxis

do {
      // code block to be executed
}
while (condition);

Ejemplo

El siguiente ejemplo utiliza un bucle do while. El bucle siempre será ejecutado al menos una vez, incluso si la condición es falsa, porque el bloque de código se ejecuta antes de probar la condición:

Ejemplo

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Do While Loop</h2>

<p id="demo"></p>

<script>
let text = ""
let i = 0;

do {
  text += "<br>The number is " + i;
  i++;
}
while (i < 10);  

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

No olvide aumentar la variable utilizada en la condición, de lo contrario ¡El bucle nunca terminará!

Comparando para y mientras

Si ha leído el capítulo anterior sobre el bucle for, descubrirá que un bucle while es muy parecido a un bucle for, con la declaración 1 y la declaración 3 omitidas.

El bucle de este ejemplo utiliza un bucle for para recoger el coche. nombres de la matriz de autos:

Ejemplo

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for (;cars[i];) {
    text += cars[i];
   
i++;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
for (;cars[i];) {
  text += cars[i] + "<br>";
  i++;
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

El bucle en este ejemplo utiliza un bucle while para recopilar el nombres de autos de la matriz de autos:

Ejemplo

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";
 
 while (cars[i]) {
    text += cars[i];
   
i++;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
while (cars[i]) {
  text += cars[i] + "<br>";
  i++;
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>