Cómo usar bucles en JavaScript

El bucle le permite iterar a través de cada elemento en una matriz para que pueda personalizar y generar cada uno de ellos como desee. Al igual que con todos los lenguajes de programación, los bucles también son una herramienta crucial para representar matrices en JavaScript.

Con la ayuda de algunos ejemplos prácticos, profundicemos en las diversas formas en que puede usar bucles en JavaScript.

El bucle incremental y decremental para en JavaScript

El bucle for incremental es la base de la iteración en JavaScript.

Asume un valor inicial asignado a una variable y ejecuta una simple verificación de longitud condicional. Luego incrementa o decrementa ese valor usando los operadores ++ o – .

Así es como se ve su sintaxis general:

 for(var i = initial value; i < array.length; i++) {
 array[i]}

Ahora iteremos a través de una matriz usando la sintaxis base anterior:

 anArray = [1, 3, 5, 6];
 for(let i = 0; i < anArray.length; i++) {
 console.log(anArray[i])
 }
 Output:
 1
 3
 5
 6

Ahora operaremos en cada elemento de la matriz anterior usando el bucle for de JavaScript:

 anArray = [1, 3, 5, 6];
 for(let i = 0; i < anArray.length; i++) {
 console.log("5", "x", anArray[i], "=", anArray[i] * 5)
 }
 Output:
 5 x 1 = 5
 5 x 3 = 15
 5 x 5 = 25
 5 x 6 = 30

El bucle está iterando a través de la matriz de forma incremental con el operador ++ , produciendo una salida ordenada.

Pero usando el operador negativo ( – ), puede invertir la salida.

Las sintaxis son las mismas, pero la lógica es un poco diferente del ciclo de incremento anterior.

Así es como funciona el método decremental:

 anArray = [1, 3, 5, 6];
 for(let i = anArray.length-1; i > = 0; i--) {
 console.log("5", "x", anArray[i], "=", anArray[i]*5)
 }
 Output:
 5 x 6 = 30
 5 x 5 = 25
 5 x 3 = 15
 5 x 1 = 5

La lógica detrás del código anterior no es descabellada. La indexación de matrices comienza desde cero. Entonces, llamar a anArray [i] normalmente itera desde el índice cero a tres, ya que la matriz anterior contiene cuatro elementos.

Por lo tanto, eliminar uno de la longitud de la matriz y establecer la condición en un valor mayor o igual a cero, como lo hicimos, es bastante útil, especialmente cuando se usa la matriz como base de su iteración.

Mantiene el índice de la matriz en uno menos que su longitud. La condición i> = 0 obliga a que el conteo se detenga en el último elemento de la matriz.

Relacionado: Métodos de matriz de JavaScript que debe dominar hoy

JavaScript para cada uno

Aunque no puede disminuir usando forEach de JavaScript, a menudo es menos detallado que el bucle for sin formato. Funciona eligiendo un elemento tras otro sin memorizar el anterior.

Aquí está la sintaxis general de JavaScript para cada uno :

 array.forEach(element => {
 action
 })

Eche un vistazo a cómo funciona en la práctica:

 let anArray = [1, 3, 5, 6];
 anArray.forEach(x => {
 console.log(x)
 });
 Output:
 1
 3
 5
 6

Ahora use esto para ejecutar una operación matemática simple en cada elemento como lo hizo en la sección anterior:

 let anArray = [1, 3, 5, 6];
 anArray.forEach(x => {
 console.log("5", "x", x, "=", x * 5)
 });
 Output:
 5 x 1 = 5
 5 x 3 = 15
 5 x 5 = 25
 5 x 6 = 30

Cómo usar el for … en el bucle de JavaScript

El bucle for … in en JavaScript itera a través de una matriz y devuelve su índice.

Le resultará fácil de usar para … si está familiarizado con el bucle for de Python, ya que son similares en lo que respecta a la simplicidad y la lógica.

Eche un vistazo a su sintaxis general:

 for (let element in array){
 action
 }

Entonces, el bucle for … in asigna cada elemento de una matriz a la variable (elemento) declarada entre paréntesis.

Por lo tanto, registrar el elemento directamente dentro del bucle devuelve un índice de matriz y no los elementos en sí:

 let anArray = [1, 3, 5, 6];
 for (let i in anArray){
 console.log(i)
 }
 Output:
 0
 1
 2
 3

Para generar cada elemento en su lugar:

 let anArray = [1, 3, 5, 6];
 for (let i in anArray){
 console.log(anArray[i])
 }
 Output:
 1
 3
 5
 6

Como hiciste cuando usaste el bucle decremental, también es fácil revertir la salida usando for … in :

 let anArray = [1, 3, 5, 6];
 // Remove one from the length of the array and assign this to a variable:
 let v = anArray.length - 1;
 // Use the above variable as an index basis while iterating down the array:
 for (let i in anArray){
 console.log(anArray[v])
 v -=1;
 }
 Output:
 6
 5
 3
 1

El código anterior es lógicamente similar a lo que hizo mientras usaba el bucle decremental. Sin embargo, es más legible y se describe explícitamente.

JavaScript para … de Loop

El bucle for … of es similar al bucle for … in .

Sin embargo, a diferencia de … in , no itera a través del índice de la matriz, sino de los elementos en sí.

Su sintaxis general se ve así:

 for (let i of array) {
 action
 }

Usemos este método de bucle para iterar a través de una matriz de forma incremental para ver cómo funciona:

 let anArray = [1, 3, 5, 6];
 for (let i of anArray) {
 console.log(i)
 }
 Output:
 1
 3
 5
 6

También puede utilizar este método para iterar hacia abajo en la matriz e invertir la salida. Es similar a cómo lo haces usando para … en :

 let anArray = [1, 3, 5, 6];
 let v = anArray.length - 1;
 for (let x of anArray) {
 console.log(anArray[v])
 v -=1;
 }
 Output:
 6
 5
 3
 1

Para operar dentro del bucle:

 let anArray = [1, 3, 5, 6];
 let v = anArray.length - 1;
 for (let x of anArray) {
 console.log("5", "x", anArray[v], "=", anArray[v] * 5)
 v -=1;
 }
 Output:
 5 x 6 = 30
 5 x 5 = 25
 5 x 3 = 15
 5 x 1 = 5

El bucle while

El bucle while se ejecuta continuamente mientras una condición especificada sigue siendo cierto. A menudo se usa como un bucle infinito.

Por ejemplo, dado que cero es siempre menor que diez, el siguiente código se ejecuta continuamente:

 let i = 0;
 while (i < 10) {
 console.log(4)
 }

El código anterior registra "4" infinitamente.

Vamos a iterar a través de una matriz mediante el bucle while:

 let i = 0;
 while (i < anArray.length) {
 console.log(anArray[i])
 i +=1
 }
 Output:
 1
 3
 5
 6

JavaScript hacer … while Loop

El bucle do … while acepta y ejecuta un conjunto de acciones explícitamente dentro de una sintaxis do . A continuación, precisa la condición para esta acción dentro del bucle while.

Así es como se ve:

 do{
 actions
 }
 while (
 consition
 )

Ahora iteremos a través de una matriz usando este método de bucle:

 do{
 console.log(anArray[i])
 i +=1
 }
 while (
 i < anArray.length
 )
 Output:
 1
 3
 5
 6

Familiarícese con los bucles de JavaScript

Aunque hemos destacado los diversos métodos de bucle de JavaScript aquí, dominar los conceptos básicos de la iteración en la programación le permite usarlos de manera flexible y segura en sus programas. Dicho esto, la mayoría de estos bucles de JavaScript funcionan de la misma manera, con solo algunas diferencias en su esquema general y sintaxis.

Los bucles, sin embargo, son la base de la mayoría de las representaciones de matrices del lado del cliente. Así que siéntete libre de modificar estos métodos de bucle como quieras. Usarlos con matrices más complejas, por ejemplo, le brinda una mejor comprensión de los bucles de JavaScript.