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 incremental por loop 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 el ++ o -- operadores.

Así es como se ve su sintaxis general:

para (var i = valor inicial; i matriz [i]}

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

anArray = [1, 3, 5, 6];
para (sea i = 0; i console.log (anArray [i])
}
Producción:
1
3
5
6 

Ahora operaremos en cada elemento de la matriz anterior usando JavaScript por círculo:

anArray = [1, 3, 5, 6];
para (sea i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Producción:
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 negativo (--) operador, 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];
para (sea i = anArray.length-1; i> = 0; I--) {
console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Producción:
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. Así que llamando anArray [i] normalmente itera del índice cero al 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 luego obliga a que el recuento 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 JavaScript para cada, a menudo es menos detallado que el crudo por círculo. Funciona eligiendo un elemento tras otro sin memorizar el anterior.

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

array.forEach (elemento => {
acción
})

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

sea ​​anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Producción:
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:

sea ​​anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Producción:
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

los para... en bucle en JavaScript itera a través de una matriz y devuelve su índice.

Lo encontrará fácil de usar para... en si estás 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:

para (dejar elemento en matriz) {
acción 
}

Entonces el para... en El ciclo 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í:

sea ​​anArray = [1, 3, 5, 6];
para (deja que yo en unArray) {
console.log (i)
}
Producción:
0
1
2
3 

Para generar cada elemento en su lugar:

sea ​​anArray = [1, 3, 5, 6];
para (deja que yo en unArray) {
console.log (anArray [i])
}
Producción:
1
3
5
6 

Como hiciste cuando usaste el bucle decremental, también es fácil revertir la salida usando para... en:

sea ​​anArray = [1, 3, 5, 6];
// Elimina uno de la longitud de la matriz y asígnalo a una variable:
sea ​​v = anArray.length - 1; 
// Utilice la variable anterior como base de índice mientras recorre la matriz:
para (deja que yo en unArray) {
console.log (anArray [v])
v - = 1;
}
Producción:
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

los para... de bucle es similar al para... en círculo.

Sin embargo, a diferencia de para... en, no recorre el índice de la matriz, sino los elementos en sí.

Su sintaxis general se ve así:

para (sea i de matriz) {
acción 
}

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

sea ​​anArray = [1, 3, 5, 6];
para (sea yo de unArray) {
console.log (i)
}
Producción:
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:

sea ​​anArray = [1, 3, 5, 6];
sea ​​v = anArray.length - 1;
para (sea x de unArray) {
console.log (anArray [v])
v - = 1;
}
Producción:
6
5
3
1

Para operar dentro del bucle:

sea ​​anArray = [1, 3, 5, 6];
sea ​​v = anArray.length - 1;
para (sea x de unArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v - = 1;
}
Producción:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

El bucle while

los tiempo El bucle se ejecuta de forma continua siempre que una condición especificada permanezca verdadera. 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:

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

El código anterior registra "4" infinitamente.

Iteremos a través de una matriz usando el tiempo círculo:

sea ​​i = 0;
while (i console.log (anArray [i])
i + = 1
}
Producción:
1
3
5
6 

JavaScript hacer... while Loop

los hacer... mientras El bucle acepta y ejecuta un conjunto de acciones explícitamente dentro de un hacer sintaxis. Luego establece la condición para esta acción dentro del tiempo círculo.

Así es como se ve:

hacer{
comportamiento
}
tiempo (
consition
)

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

hacer{
console.log (anArray [i])
i + = 1
}
tiempo (
i )
Producción:
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.

Cómo utilizar la declaración if-else de JavaScript

La declaración if-else es su primer paso hacia la programación de la lógica en sus aplicaciones.

Leer siguiente

Sobre el Autor