JavaScript se encuentra entre los lenguajes de programación más utilizados. Los desarrolladores que tienen la intención de convertirse en ingenieros de JavaScript deben aprender los conceptos básicos de los bucles, sus tipos y cómo funcionan.
Un bucle JavaScript es una herramienta utilizada para realizar tareas repetitivas basadas en una determinada condición. Por otro lado, la «iteración» es un término general que significa repetición en el contexto de un bucle. Un bucle continuará ejecutándose hasta que se cumpla una condición de detención.
Para comprender mejor esto, puedes pensar en ello como un juego de computadora donde te piden que tomes X Steps hacia el norte y luego los pasos y los pasos.
Puedes pensar en 7 pasos al norte como;
para (dejar paso = 0; paso< 7; step++) < // Runs 7 times, with values of steps 0 through 6. console.log("Walking northwards one step"); >
Cuando se ejecute el bloque de código anterior, tendrá esto;
¿Por qué los bucles se usan comúnmente?
- Realización de tareas repetitivas: puede usar bucles para ejecutar instrucciones hasta que se cumplan ciertas condiciones.
- Bucle sobre objetos o matrices. Puede usar bucles para recorrer las propiedades de un objeto o elementos de matriz, lo que le permite realizar ciertas acciones para cada propiedad o elemento.
- Filtrado de datos: puede usar un bucle para filtrar datos en función de ciertas condiciones.
Los bucles de JavaScript vienen en diferentes formas; Porque, mientras, haz … mientras, para … de y para … en. Veamos los detalles y demostremos cómo funciona cada uno.
En bucle
El bucle for se repetirá hasta que la condición especificada sea verdadera. El bucle for tiene tres expresiones opcionales seguidas de un bloque de código.
para (inicialización; condición; finalxpresión)< // code >
- La expresión de inicialización aparece antes de ejecutar el primer bucle. Esta expresión generalmente inicializa uno o más contadores.
- La expresión de condición se verifica cada vez antes de ejecutar el bucle for para se ejecuta. El código en el bucle o la declaración se ejecuta cada vez que la expresión se evalúa a verdaderas. Por otro lado, el bucle se detiene cuando la expresión se evalúa en falso. Sin embargo, si se omite la expresión, se evaluará automáticamente como verdadero.
- La FinalExpression se ejecuta después de cada iteración del bucle. La expresión se usa principalmente para incrementar el contador.
Puedes usar la declaración de bloque<>para agrupar y ejecutar múltiples declaraciones. Si desea salir del bucle antes de que la expresión de la condición se vuelva falsa, use la instrucción Break.
Ejemplos de bucles con código
para (deja i = 0; yo
En este bloque de código;
- La variable I se inicializa con cero (Sea i = 0).
- La condición: debo tener menos de 7 (i = 7).
- El bucle iterará muchas veces si el valor de I es inferior a 7 (i.
- La iteración agregará 1 al valor de I después de cada iteración (++ 1).
Para (deja i = 1; yo< 11; i += 2) < if (i === 9) < break; >console.log('Total developers: ' + i); >
- El bloque de código se repite de 1 a 10 (i para … bucle
El para … de bucles de bucle a través de objetos iterados como mapa, matriz, argumentos y set. Este bucle llama a un gancho de iteración personalizado con instrucciones que se ejecutan para el valor de cada propiedad individual.
La estructura básica del bucle for … es la siguiente.
para la declaración (variable de objeto)
Ejemplos de para … de bucle en acción
const frontendLanguages = [«html», «css», «javaScript», «reaccionar»]; para (deja que yo de los lenguajes frontend)
- Definimos una matriz llamada frontendLanguages
- La matriz consta de tres elementos;»Html», «css», «javaScript» y «reaccionar».
- El para … de bucles de bucle a través de cada elemento en frontendLanguages.
- El i en el bloque de código toma el valor de cada elemento durante cada iteración y la salida de valores a la consola.
const s = nuevo set (); S. Add (2); S. Add («gris»); para (deje n de S)
En este bloque de código;
- Declaramos una variable S, que asignamos al nuevo conjunto usando el constructor set ().
- Se agregan dos elementos al código utilizando el método add ()
- para … de bucle a través del objeto Elements.
- El bucle asigna el valor n al elemento actual antes de ejecutar la instrucción Console. log (n).
const m = nuevo map (); M. Set (4, «Conejo»); m. set (6, «mono»); M. Set (8, «Elefante»); M. Set (10, «Lion»); M. Set (12, «Leopardo»); para (deja n de m)
En este bloque de código;
- Usamos el constructor MAP () para crear un nuevo objeto MAP.
- Se declara la variable M.
- Usando el método . set (), agregamos cinco pares de valor clave.
- El para … de bucles de bucle a través de los elementos del objeto mapa m.
El para … en bucle
El bucle for … in se usa para recorrer las propiedades de un objeto. La estructura básica del para … en bucle es:
para (propiedad en el objeto).< // code >
Puede usar el bucle for … en bucle para bucle a través de matrices y objetos similares a la matriz.
Const ShoppingList =< kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 >; para (const vegetales en la lista comercial)
En este bloque de código;
- Presentamos un objeto JavaScript y lo llamamos Lista Comercial.
- Utilizamos un bucle for para recorrer cada propiedad en la lista de compras utilizando el operador in.
- En cada iteración, el bucle asigna el nombre actual de la propiedad en la lista comercial.
Mientras
El bucle While evalúa la condición, y si se encuentra que la condición es verdadera, se ejecuta un bloque de código. Sin embargo, si la condición es falsa, el bucle while termina y el bloque de código no se ejecutará.
Esta es la estructura básica del bucle While;
Declaración (condición)
La condición de verificación debe cumplirse antes de ejecutar la instrucción en el bucle. Puede ejecutar múltiples declaraciones utilizando los operadores<>o bloque.
Un ejemplo de un bucle de tiempo en acción
Sea n = 0; mientras (n
- La variable N se inicializa con un valor nulo (Sea n = 0).
- El bucle se ejecutará siempre que el valor de n sea inferior a 9 (n do … mientras bucle
El do … mientras que el bucle se repite hasta que una determinada condición se vuelve falsa.
La estructura general de un do … mientras que la declaración es la siguiente;
hacer declaración mientras (condición);
La declaración se ejecuta una vez, pero antes de verificar la condición. La declaración se ejecutará si la condición es verdadera. Sin embargo, si la condición evaluada es falsa, la ejecución se detendrá y el control pasará a la declaración tras do … mientras. El código en el do … mientras que el bucle se garantiza que se ejecutará al menos una vez, incluso si la condición se evalúa como verdadera.
Ejemplo hacer … mientras
Sea n = 0; hacer< n += 1; console.log(n); >mientras (n< 7);
- Ingresamos la variable n y establecemos su valor inicial en 0 (Sea n = 0).
- Nuestra variable N ingresa al do ... mientras que el bucle donde su valor se incrementa en 1 después de cada iteración (n+= 1)
- El valor de n está registrado.
- El bucle continuará ejecutándose mientras el valor de n sea inferior a 7 (n bucle anidado
Un bucle anidado es cuando tenemos un bucle dentro de un bucle. Por ejemplo, podemos tener un bucle para bucle anidado dentro de otro para el bucle para el bucle.
para (deja externo = 0; exterior< 5; outer += 2) < for (let inner = 0; inner < 6; inner += 2) < console.log(`$-$`); > >
- Hay dos variables; externo e interno, y ambos se inicializan con un valor nulo.
- Ambas variables se incrementan por 2 después de cada iteración.
- Los bucles externos e internos se repiten tres veces cada uno.
Operadores de control de bucle
Las declaraciones de control de bucle, a veces llamadas "declaraciones de salto", interrumpen el flujo normal de un programa. Romper y continuar son ejemplos de operadores de control de bucle.
Operadores de ruptura
Las declaraciones de interrupción terminan inmediatamente un bucle, incluso si no se cumple la condición.
for (let n = 1; n console.log(n); >
El código visualizado aparecerá como;
Continuar las declaraciones
Las declaraciones continuas se utilizan para omitir un bloque específico de código e iterar para un nuevo bucle.
for (let n = 0; n console.log(n); >
El código visualizado aparecerá como;
Conclusión
Los anteriores son los bucles comunes que encontrará en Vanilla JavaScript y sus marcos/bibliotecas. Como se mencionó anteriormente, cada tipo de bucle tiene un caso de uso diferente y un comportamiento diferente. Si elige el tipo de bucle incorrecto, es probable que tenga errores y es probable que su código exhiba un comportamiento inesperado.
Si está tratando con un marco o biblioteca de JavaScript, siempre verifique su documentación y use bucles incorporados.
