Bucle For de JavaScript

Los bucles pueden ejecutar bloques de código múltiples veces.

Ciclos de JavaScript

Si necesita ejecutar el código varias veces y cada vez con diferentes valores, el bucle (loop) es muy conveniente.

Generalmente nos encontramos con ejemplos de uso de arrays:

No se debe escribir así:

text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

Puedes escribirlo así:

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

Pruebe usted mismo

Diferentes tipos de bucles

JavaScript admite diferentes tipos de bucles:

  • for - Bucle multiple en un bloque de código
  • for/in - Navega por las propiedades del objeto
  • while - Ejecuta un bloque de código mientras la condición especificada sea true
  • do/while - Ejecuta un bloque de código mientras la condición especificada sea true

Bucle for

El bucle for es una herramienta que se utiliza a menudo cuando deseas crear un bucle.

La sintaxis del bucle for es la siguiente:

for (La declaración 1; La declaración 2; La declaración 3) {
     El bloque de código a ejecutar
}

La declaración 1 se ejecuta antes de comenzar el bucle (bloque de código).

La declaración 2 define la condición para ejecutar el bucle (bloque de código).

La declaración 3 se ejecutará después de cada ejecución del bloque de código.

Ejemplo

for (i = 0; i < 5; i++) {
     text += "El número es " + i + "<br>";
}

Pruebe usted mismo

A partir del código anterior, puedes entender que:

La declaración 1 configura una variable antes de comenzar el bucle (var i = 0).

La declaración 2 define la condición para ejecutar el bucle (i debe ser menor que 5).

La declaración 3 aumentará el valor en cada ejecución del bloque de código.

La declaración 1

Generalmente, usarás la declaración 1 para inicializar las variables utilizadas en el bucle (i = 0).

Pero no siempre es así, JavaScript no se preocupa. La declaración 1 es opcional.

Puedes inicializar múltiples valores en la declaración 1 (separados por comas):

Ejemplo

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

Pruebe usted mismo

Y también puedes omitir la declaración 1 (por ejemplo, configurar el valor antes de comenzar el bucle):

Ejemplo

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

Pruebe usted mismo

La declaración 2

Generalmente, la declaración 2 se utiliza para calcular la condición de la variable inicial.

Pero no siempre es así, JavaScript no se preocupa. La declaración 2 también es opcional.

Si la declaración 2 devuelve true, el bucle se reiniciará, y si devuelve false, el bucle se detendrá.

Si se omite la declaración 2, debe proporcionar una en el bucle. break. De lo contrario, el bucle nunca terminará. Lee más sobre break en el siguiente capítulo.

La declaración 3

Generalmente, la declaración 3 aumentará el valor de la variable inicial.

Pero no siempre es así, JavaScript no se preocupa. La declaración 3 también es opcional.

La declaración 3 puede hacer cualquier cosa, como decremento negativo (i--), aumento positivo (i = i + 15), o cualquier otra cosa.

La expresión 3 también se puede omitir (por ejemplo, cuando incrementa el valor dentro del bucle):

Ejemplo

var i = 0;
var len = cars.length;
for (; i < len; ) { 
    text += cars[i] + "<br>";
      i++;
}

Pruebe usted mismo

Bucle For/In

JavaScript for/in La expresión se recorre por las propiedades del objeto:

Ejemplo

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

Pruebe usted mismo

Bucle while

Vamos a aprender bucles while y do/while en el próximo capítulo.

Libros de texto adicionales

Para obtener más información sobre Expresión for de JavaScriptPara obtener más información sobre el conocimiento, lea el contenido relevante en los tutoriales avanzados de JavaScript:

Expresiones iterativas de ECMAScript
Las expresiones iterativas también se conocen como bucles. Esta sección le presenta las cuatro expresiones iterativas proporcionadas por ECMAScript.