Declaración for de JavaScript

Definición y uso

La declaración for crea un bucle que se ejecutará mientras la condición sea verdadera.

El bucle continuará ejecutándose mientras la condición sea verdadera. Solo se detendrá cuando la condición se convierta en falsa.

JavaScript admite diferentes tipos de bucles:

  • for - Bucle de código que se ejecuta varias veces
  • for/in - Recorrer las propiedades del objeto
  • for/of - Recorra los valores de un objeto iterable
  • while - Repita el bucle de código cuando la condición especificada sea verdadera
  • do/while - Ejecute un bloque de código una vez y luego repita el bucle cuando la condición especificada sea verdadera

Consejo:Utilice la declaración break para salir del bucle, utilice la declaración continue para saltar algún valor dentro del bucle.

Ejemplo

Ejecute el bloque de código de bucle cinco veces:

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Intente hacerlo usted mismo

En la parte inferior de la página hay más ejemplos de TIY.

Sintaxis

for (statement 1; statement 2; statement 3) {
  bloque de código a ser ejecutado
}

Valores de parámetros

Parámetros Descripción
statement1

Opcional. Ejecutar antes de comenzar el bucle (bloque de código). Generalmente se utiliza esta declaración para inicializar la variable contadora. Si necesita inicializar múltiples valores, separe cada uno con una coma.

Comentarios:Este parámetro se puede omitir. Pero, no omita el punto y coma ";"
statement2

Opcional. Definir la condición de ejecución del bucle (bloque de código). Generalmente se utiliza esta declaración para evaluar la condición de la variable contadora. Si devuelve true, el bucle se reiniciará, si devuelve false, el bucle se terminará.

Comentarios:Este parámetro se puede omitir. Pero, no omita el punto y coma ";". Además, si se omite este parámetro, debe proporcionar break dentro del bucle. De lo contrario, el bucle nunca terminará, lo que podría hacer que su navegador se caiga.
statement3

Opcional. Ejecutar después de cada ejecución del bucle (bloque de código). Generalmente se utiliza esta declaración para incrementar o decrementar una variable contadora.

Comentarios:Este parámetro se puede omitir (por ejemplo, aumentar / disminuir el valor dentro del bucle).

Detalles técnicos

Versión de JavaScript: ECMAScript 1

Más ejemplos

Ejemplo

El bucle recorre los índices del array, recolectando nombres de automóviles del array cars:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Intente hacerlo usted mismo

Explicación del ejemplo:

  • Primero, establecemos una variable antes de comenzar el bucle (var i = 0;)
  • Luego, definimos la condición de ejecución del bucle. Mientras la variable sea menor que la longitud del array (es decir, 4), el bucle continuará
  • Cada vez que se ejecute el bucle, el variable aumenta en uno (i++)
  • Una vez que la variable ya no sea menor de 4 (la longitud del array), la condición es falsa, el bucle termina

Ejemplo

Inicialice múltiples valores en el primer parámetro:

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

Intente hacerlo usted mismo

Ejemplo

Omita el primer parámetro (establezca el valor antes de comenzar el bucle):

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

Intente hacerlo usted mismo

Ejemplo

Utilice la declaración continue - código de bloque de bucle, pero salte el valor "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "The number is " + i + "<br>";
}

Intente hacerlo usted mismo

Ejemplo

Usar la instrucción break - ejecutar un segmento de código, pero salir del bucle cuando el valor de i es "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "The number is " + i + "<br>";
}

Intente hacerlo usted mismo

Ejemplo

Omitir el segundo parámetro. En este ejemplo, también usamos la instrucción break para salir del bucle cuando i es igual a "3" (si se omite el segundo parámetro, debe proporcionarse un break dentro del bucle. De lo contrario, el bucle nunca terminará y su navegador se colapsará):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

Intente hacerlo usted mismo

Ejemplo

Recorrer índices del array en orden descendente (decremento negativo):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

Intente hacerlo usted mismo

Ejemplo

Omitir el último parámetro y aumentar el valor dentro del bucle:

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

Intente hacerlo usted mismo

Ejemplo

Recorrer nodos de NodeList y cambiar el color de fondo de todos los elementos <p> de la lista:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

Intente hacerlo usted mismo

Ejemplo

Ejemplo de bucles anidados (bucle dentro de bucle):

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

Intente hacerlo usted mismo

Compatibilidad del navegador

Instrucciones Chrome IE Firefox Safari Opera
para Soporte Soporte Soporte Soporte Soporte

Páginas relacionadas

Tutoriales de JavaScript:Bucle for de JavaScript

Manual de referencia de JavaScript:Sentencia for ... in de JavaScript

Manual de referencia de JavaScript:Sentencia break de JavaScript

Manual de referencia de JavaScript:Sentencia continue de JavaScript

Manual de referencia de JavaScript:Sentencia while de JavaScript