Els bucles de JavaScript són essencials per gestionar de manera eficient les tasques repetitives. Executen un bloc de codi repetidament mentre una condició especificada sigui certa. Aquests bucles són eines potents per automatitzar tasques i racionalitzar el codi.
Per exemple, suposem que volem imprimir Hola món 5 vegades. Això es pot fer amb JS Loop fàcilment. En Loop, la instrucció només s'ha d'escriure una vegada i el bucle s'executarà 5 vegades com es mostra a continuació:
JavaScript for (let i = 0; i < 5; i++) { console.log('Hello World!'); }> Sortida
Hello World! Hello World! Hello World! Hello World! Hello World!>
Taula de contingut
- per Loop
- while Loop
- bucle do-while
- bucle for-in
- for-of Loop
- Declaració etiquetada
- Declaració de trencament
- Continua declaració
- Bucle infinit (error de bucle)
1. JavaScript for Loop
El JS per bucle proporciona una manera concisa d'escriure l'estructura del bucle. El bucle for conté inicialització, condició i increment/disminució en una línia, proporcionant així una estructura de bucle més curta i fàcil de depurar.
Sintaxi
for (initialization; testing condition; increment/decrement) { statement(s) }>Diagrama de flux
- Condició d'inicialització: Inicialitza la variable i marca l'inici d'un bucle for. Es pot utilitzar una variable ja declarada o es pot declarar una variable, només local per bucle.
- Condició de la prova: S'utilitza per provar la condició de sortida d'un bucle for. Ha de retornar un valor booleà. També és un Bucle de control d'entrada ja que la condició es verifica abans de l'execució de les instruccions de bucle.
- Execució de la declaració: Un cop s'avalua que la condició és certa, s'executen les declaracions del cos del bucle.
- Increment/Disminució: S'utilitza per actualitzar la variable per a la següent iteració.
- Terminació del bucle: Quan la condició esdevé falsa, el bucle s'acaba marcant el final del seu cicle de vida.
Exemple
Javascript // JavaScript program to illustrate for loop let x; // for loop begins when x = 2 // and runs till x <= 4 for (x = 2; x <= 4; x++) { console.log('Value of x: ' + x); }> Sortida
Value of x: 2 Value of x: 3 Value of x: 4>
2. JavaScript while Loop
El JS bucle while és una instrucció de flux de control que permet que el codi s'executi repetidament en funció d'una condició booleana determinada. El bucle while es pot pensar com una declaració if que es repeteix.
Sintaxi
while (boolean condition) { loop statements... }>Diagrama de flux
- El bucle while comença amb la comprovació de la condició. Si s'avalua que és cert, s'executen les declaracions del cos del bucle, en cas contrari s'executa la primera instrucció que segueix el bucle. Per aquest motiu, també s'anomena el Bucle de control d'entrada
- Un cop s'avalua que la condició és certa, s'executen les declaracions del cos del bucle. Normalment, les declaracions contenen un valor actualitzat per a la variable que s'està processant per a la següent iteració.
- Quan la condició esdevé falsa, el bucle s'acaba, cosa que marca el final del seu cicle de vida.
Exemple
Javascript // JavaScript code to use while loop let val = 1; while (val < 6) { console.log(val); val += 1; }> Sortida
1 2 3 4 5>
3. Bucle do-while de JavaScript
El JS bucle do-while és similar al bucle while amb l'única diferència que comprova la condició després d'executar les sentències i, per tant, és un exemple de Sortida del bucle de control. Executa el contingut del bucle almenys una vegada que la condició és falsa.
Sintaxi
do { Statements... } while (condition);> Diagrama de flux 
- El bucle do-while comença amb l'execució de les sentències. No es comprova cap condició per primera vegada.
- Després de l'execució de les declaracions i l'actualització del valor de la variable, la condició es comprova si hi ha un valor vertader o fals. Si s'avalua que és cert, s'inicia la següent iteració del bucle.
- Quan la condició esdevé falsa, el bucle s'acaba, cosa que marca el final del seu cicle de vida.
- És important tenir en compte que el bucle do-while executarà les seves declaracions almenys una vegada abans de comprovar qualsevol condició i, per tant, és un exemple del bucle de control de sortida.
Exemple
Javascript let test = 1; do { console.log(test); test++; } while(test <= 5)> Sortida
1 2 3 4 5>
4. Bucle for-in de JavaScript
JS bucle for-in s'utilitza per iterar sobre les propietats d'un objecte. El bucle for-in només itera sobre aquelles claus d'un objecte que tenen la seva propietat enumerable establerta en true.
Sintaxi
for(let variable_name in object_name) { // Statement }>Exemple: Aquest exemple mostra l'ús del bucle for-in.
Javascript let myObj = { x: 1, y: 2, z: 3 }; for (let key in myObj) { console.log(key, myObj[key]); }> Sortida
x 1 y 2 z 3>
5. JavaScript for-of Loop
JS bucle for-of s'utilitza per iterar els objectes iterables, per exemple: matriu, objecte, conjunt i mapa. Itera directament el valor de l'objecte iterable donat i té una sintaxi més concisa que el bucle for.
Sintaxi:
for(let variable_name of object_name) { // Statement }>Exemple: Aquest exemple mostra l'ús del bucle for-of.
Javascript let arr = [1, 2, 3, 4, 5]; for (let value of arr) { console.log(value); }> Sortida
1 2 3 4 5>
6. Declaració etiquetada de JavaScript
Paraula clau de l'etiqueta JS no inclou una paraula clau goto. Els usuaris poden utilitzar la paraula clau continue amb la declaració d'etiqueta. A més, els usuaris poden utilitzar la paraula clau break per finalitzar el bucle/bloc. També podeu utilitzar la paraula clau break sense definir l'etiqueta, però només finalitza el bucle/bloc principal. Per acabar el bucle exterior des del bucle intern mitjançant la paraula clau break, els usuaris han de definir l'etiqueta.
Sintaxi
Label: statement (loop or block of code)>
Exemple
Javascript let sum = 0, a = 1; // Label for outer loop outerloop: while (true) { a = 1; // Label for inner loop innerloop: while (a < 3) { sum += a; if (sum>12) { // Trenca el bucle exterior del bucle interior trenca el bucle exterior; } console.log('sum = ' + suma); a++; } }>>>
Sortida sum = 1 sum = 3 sum = 4 sum = 6 sum = 7 sum = 9 sum = 10 sum = 12>
7. Declaració de ruptura de JavaScript
Declaració de pausa JS s'utilitza per finalitzar l'execució de la instrucció de bucle o switch quan la condició és certa.
Sintaxi
for (let i = 1; i < 6; i++) { if (i == 4) break; console.log(i); }> Sortida
1 2 3>
8. Declaració de Continuació de JavaScript
JS continua declaració s'utilitza per trencar la iteració del bucle i seguir amb la següent iteració. La interrupció de la iteració només és possible quan es produeixi la condició especificada. La diferència principal entre la instrucció continue i break és que la sentència break surt del bucle completament, mentre que continue s'utilitza per trencar una sentència i iterar a la següent.
Sintaxi
continue;>
Exemple
Javascript for (let i = 0; i < 11; i++) { if (i % 2 == 0) continue; console.log(i); }> Sortida
1 3 5 7 9>
9. Bucle infinit de JavaScript (error de bucle)
Un dels errors més comuns en implementar qualsevol tipus de bucle és que és possible que no surti mai, és a dir, el bucle s'executa infinites vegades. Això passa quan la condició falla per algun motiu.
Exemple: Aquest exemple mostra un bucle infinit.
Javascript