Referencia for

for

Una forma de repetir un bloque de código cuando se conoce el número de iteraciones.

Los bucles for son útiles para repetir declaraciones un cierto número de veces. Por ejemplo, un bucle for facilita expresar la idea "dibujar cinco líneas" de la siguiente manera:

for (let x = 10; x < 100; x += 20) { line(x, 25, x, 75); }

La cabecera del bucle comienza con la palabra clave for. Los bucles generalmente incrementan o disminuyen a medida que se repiten, o iteran. Las declaraciones entre paréntesis let x = 10; x < 100; x += 20 indican al bucle cómo debe repetirse:

  • let x = 10 indica al bucle que comience a contar desde 10 y llevando un seguimiento de las iteraciones usando la variable x.
  • x < 100 le indica al bucle que cuente hasta, pero sin incluir, 100.
  • x += 20 indica al bucle que incremente en 20 al final de cada iteración.

El código entre llaves {} es el cuerpo del bucle. Las declaraciones dentro del cuerpo del bucle se repiten durante cada iteración del bucle.

Es común crear bucles infinitos accidentalmente. Cuando esto sucede, los bocetos pueden volverse no responsivos y el navegador web puede mostrar una advertencia. Por ejemplo, el siguiente bucle nunca deja de iterar porque no se le ha indicado que incremente:

for (let x = 10; x < 100; x = 20) { line(x, 25, x, 75); }

La declaración x = 20 mantiene la variable x estancada en 20. El bucle continua infinitamente precisamente porque 20 siempre va a ser menor que 100.

Los bucles for también pueden contar hacia abajo (disminuir):

for (let d = 100; d > 0; d -= 10) { circle(50, 50, d); }

Los bucles for también pueden contener otros bucles. El siguiente bucle anidado dibuja una cuadrícula de puntos:

// Loop from left to right for (let x = 10; x < 100; x += 10) { // Loop from top to bottom for (let y = 10; y < 100; y += 10) { point(x, y); } }

Los bucles for también son útiles para iterar a través de los elementos de un arreglo. Por ejemplo, es común iterar a través de un arreglo que contiene información sobre dónde o qué dibujar:

// Create an array of x-coordinates.Let xCoordinates = [20, 40, 60]; for (let i = 0; i < xCoordinates.length; i += 1) { // Update the element. xCoordinates[i] += random(-1, 1); // Draw a circle. circle(xCoordinates[i], 50, 20); }

Si los valores del array no se modifican, la declaración for...of puede simplificar el código. Son similares a los bucles for en Python y los bucles for-each en C++ y Java. Los siguientes bucles tienen el mismo efecto:

// Draw circles with a for loop let xCoordinates = [20, 40, 60]; for (let i = 0; i < xCoordinates.length; i += 1) { circle(xCoordinates [i], 50, 20); } // Draw circles with a for...of statement. let xCoordinates = [20, 40, 60]; for (let x of xCoordinates) { circle(x, 50, 20); }

En estos fragmentos de código, las variables i y x tienen roles diferentes.

En el primer fragmento, i cuenta desde 0 hasta 2, que es uno menos que xCoordinates.length. i se utiliza para acceder al elemento en xCoordinates en el índice i.

En el segundo fragmento de código, x no realiza un seguimiento del progreso del bucle o de un índice. Durante cada iteración, x contiene el siguiente elemento de xCoordinates. x comienza desde el principio de xCoordinates (20) y actualiza su valor a 40 y luego a 60 durante las siguientes iteraciones.

Ejemplos

Notice any errors or typos? Please let us know. Please feel free to edit src/core/reference.js and open a pull request!

Referencias Relacionadas