Bucle

Bucla permite executarea unei acțiuni de mai multe ori, în funcție de anumite condiții. În JavaScript, există următoarele tipuri de bucle:

• for
• for..in
• for..of
• while
• do..while

Bucla for

Bucla for are următoarea definiție formală:

for ([inițializarea contorului]; [condiția]; [modificarea contorului]){

   // acțiuni
}

De exemplu, folosim bucla for pentru a itera prin numerele de la 0 la 4:

for(let i = 0; i<5; i++){
   
   console.log(i);
}
console.log("Sfârșitul execuției");

Prima parte a declarației buclei - let i = 0 - creează și inițializează un contor - variabila i. Înainte de executarea buclei, valoarea sa va fi 0. Practic, este echivalentă cu declararea unei variabile.

A doua parte - condiția sub care bucla va fi executată: i < 5. În acest caz, bucla va fi executată atât timp cât valoarea lui i nu atinge 5.

A treia parte - i++ - incrementarea contorului cu unu.

Prin urmare, la început, variabila i are valoarea 0. Această valoare satisface condiția i < 5, astfel că blocul buclei va fi executat, adică linia de cod.

console.log(i);

După executarea blocului buclei, se efectuează a treia parte a declarației buclei - incrementarea contorului. Cu alte cuvinte, variabila i devine egală cu 1. Această valoare, de asemenea, satisface condiția, astfel că blocul buclei va fi din nou executat. Astfel, blocul buclei va fi executat de 5 ori, până când valoarea lui i devine 5.

Această valoare NU satisface condiția, așa că bucla se încheie. Controlul programului va trece la instrucțiunile care urmează după blocul buclei. Iată output-ul la consolă al programului:

0 1 2 3 4 Sfârșitul execuției

Fiecare repetare individuală a buclei este numită o iterație. În acest caz, vor avea loc 5 iterații.

Nu este obligatoriu să incrementăm contorul cu 1; putem efectua și alte acțiuni cu el, de exemplu, să îl decrementăm cu 1:

for(let i = 10; i > 5; i--){
     
   console.log(i);
}

În acest caz, sunt afișate pe consolă numerele de la 10 la 6.

Sau putem crește contorul cu 2:

for (let i = 0; i < 10; i += 2){
   console.log(i);
}

Aici sunt afișate pe consolă toate numerele pare de la 0 la 8.

În același timp, este posibil să omitem diferite părți ale declarației buclei:

let i = 0;
for (; i < 60;){
   console.log(i);
   i = i + 10;
}

În acest caz, variabila i este definită în afara buclei. În declarația buclei, există doar condiția, celelalte două părți lipsesc. Modificarea variabilei are loc în blocul buclei: aceasta crește cu 10. În final, vor fi afișate pe consolă numerele 0, 10, 20, 30, 40, 50.

Contorul este convenabil de utilizat ca indice pentru elementele unui array și astfel să parcurgem array-ul:

const people = ["Tom", "Sam", "Bob"];
for (let i = 0; i < 3; i++){
   console.log(people[i]);
}

Afișarea în consolă a browser-ului va fi:

Tom Sam Bob

Pentru a utiliza mai mulți contori într-o buclă, putem face așa:

for (let i = 1, j = 1; i < 5 && j < 4; i++, j++){
   console.log(i + j);
}
// 1 iterație: i=1, j=1; i + j = 2
// 2 iterație: i=2, j=2; i + j = 4
// 3 iterație: i=3, j=3; i + j = 6

Aici sunt folosiți doi contori și două condiții. Să analizăm pas cu pas ce se întâmplă aici:

• Prima iterație. Valorile inițiale ale variabilelor i și j:

i=1, j=1;

Pentru fiecare variabilă, sunt stabilite condițiile ei. La început, valorile inițiale ale variabilelor corespund acestor condiții:

i < 5, j < 4;

În blocul buclei, este afișată suma acestor variabile. Ulterior, valorile ambelor variabile sunt incrementate cu unu. Ele devin:

i=2, j=2;

Aceste valori corespund, de asemenea, condițiilor, așa că se execută a doua iterație.

• A doua iterație. Valorile variabilelor i și j:

i=2, j=2;

După executarea blocului buclei, valorile ambelor variabile sunt incrementate cu unu. Ele devin:

i=3, j=3;

Aceste valori corespund, de asemenea, condițiilor, așa că se execută a treia iterație.

• A treia iterație.*Valorile variabilelor i și j:

i=3, j=3;

După executarea blocului buclei, valorile ambelor variabile sunt incrementate cu unu. Ele devin:

i=4, j=4;

Valoarea variabilei i se conformează condiției i < 5, dar valoarea variabilei j (4) NU se conformează condiției j < 4. Prin urmare, bucla se încheie. Execuția ei s-a încheiat.

Execuția acțiunilor în declarația buclei

Este demn de menționat că a treia parte a buclei, unde de obicei are loc modificarea contorului, de fapt, reprezintă o acțiune arbitrară care se execută după încheierea buclei. Astfel, putem scrie astfel:

for(let i = 0; i < 5; console.log(i++));
console.log("Sfârșitul execuției");

Aici nu este definit un bloc de buclă, iar acțiunile buclei sunt definite în a treia parte a antetului buclei - console.log(i++).

Similar, în prima parte a declarației buclei - inițializarea, putem efectua anumite acțiuni, nu doar să declarăm contorul:

let i = 0;
for(console.log("Inițializare"); i < 5; i++){
   console.log(i);
}

Aici, definirea contorului este scoasă în afara buclei, iar în partea de inițializare a buclei se afișează un șir pe consolă. Output-ul în consolă va fi:

Inițializare 0 1 2 3 4 Buclele înglobate.

Unele bucle pot să conțină altele în interiorul lor:

for(let i = 1; i <= 5; i++){
    for(let j = 1; j <= 5; j++){
       console.log(i * j);
    }
}

Aici, un ciclu este inclus în altul. În ciclul exterior, variabila i este definită. Inițial, aceasta este egală cu 1 și această valoare corespunde condiției ciclului (i <= 5), astfel că blocul ciclului va fi executat, iar acesta conține ciclul interior.

În ciclul interior, este definită variabila contor j, care inițial este egală cu 1, și apoi ciclul interior execută 5 iterații până când variabila j devine 5.

După ce blocul ciclului exterior se încheie, variabila i este incrementată cu 1 și devine 2, ceea ce din nou corespunde condiției. Și din nou, blocul ciclului exterior este executat. În acest bloc, din nou, sunt efectuate cinci iterații ale ciclului interior. Și așa mai departe. În final, ciclul interior va fi executat de 25 de ori.

Prin utilizarea buclelor înglobate și a mai multor contoare, se poate itera matricele multidimensionale:

const people = [["Tom", 39], ["Sam", 28],["Bob", 42]];
for(let i = 0; i < 3; i++){   // iterăm prin matricea bidimensională
   for(let j = 0; j < 2; j++){ // iterăm prin submatrice
       console.log(people[i][j]);
   }
   console.log("=================");   // pentru separarea elementelor
}

Aici, matricea people reprezintă o matrice bidimensională de 3 elemente, unde fiecare element reprezintă, la rândul său, o submatrice de 2 elemente - aproximativ numele și vârsta utilizatorului.

n ciclul exterior, definim contorul i pentru a parcurge toate submatricele din matricea bidimensională people, iar în ciclul interior definim contorul j pentru a parcurge toate elementele fiecărei submatrice. Afișarea în consolă:

Tom 39 ================= Sam 28 ================= Bob 42 =================

Buclele while

Ciclul while se execută până când o anumită condiție este adevărată. Definiția formală este:

while (condiție) {
   // acțiuni
}

Să afișăm, din nou, numerele de la 1 la 5:

let i = 1;
while (i <= 5) {
   console.log(i);
   i++;
}

Ciclul while va continua să se execute până când valoarea lui i devine 6.

do..while

În ciclul do, codul ciclului este executat în primul rând, iar apoi se verifică condiția în instrucția while. În timp ce această condiție este adevărată, ciclul se repetă. De exemplu:

let i = 1;
do {
   console.log(i);
   i++;
} while (i <= 5)

Aici, blocul ciclului va funcționa de 5 ori, până când i devine 5. Cu toate acestea, ciclul do garantează executarea acțiunilor cel puțin o dată, chiar dacă condiția din instrucțiunea while nu este adevărată.

Operatorii continue și break

Uneori este necesar să ieșim dintr-un ciclu înainte de a-l finaliza. În acest caz, putem folosi operatorul break:

for (let i = 1; i <= 6; i++) {
   if (i === 4) break;
   console.log(i);
}
console.log("Sfârșitul execuției");

Acest ciclu crește variabila i de la 1 la 6 inclusiv. Prin urmare, conform condiției ciclului, blocul ciclului ar trebui să fie executat de 6 ori, adică să efectueze 6 iterații. Cu toate acestea, deoarece în blocul ciclului se verifică if(i===4) break;, când valoarea variabilei i ajunge la 4, această condiție întrerupe execuția ciclului cu ajutorul operatorului break. Și ciclul se încheie.

for (let i = 1; i <= 6; i++) {
   if (i === 4) continue;
   console.log(i);
}
console.log("Sfârșitul execuției");

Output-ul va fi: 1 2 3 Sfârșitul execuției

Dacă dorim să trecem pur și simplu la următoarea iterație, fără a ieși din ciclu, putem utiliza operatorul continue. De exemplu, să modificăm exemplul anterior, înlocuind break cu continue:

for (let i = 1; i <= 6; i++) {
   if (i === 4) continue;
   console.log(i);
}
console.log("Sfârșitul execuției");

În acest caz, când valoarea variabilei i devine 4, expresia i===4 returnează true, astfel încât construcția if(i===4) continue; va întrerupe iterația curentă. Ulterior, instrucțiunile ciclului care urmează nu vor fi executate, iar controlul va trece la următoarea iterație.

1 2 3 5 6 Sfârșitul execuției

for..in

Ciclul for..in este folosit în primul rând pentru a parcurge obiecte. Definiția sa formală este:

for (proprietate in obiect) {
   // acțiuni
}

Acest ciclu parcurge toate proprietățile obiectului. De exemplu:

const persoana = { nume: "Tom", vârstă: 37 };
for (proprietate in persoana) {
   console.log(proprietate);
}

Aici, se parcurge obiectul persoana, care are două proprietăți - nume și vârstă. Prin urmare, în consolă vom vedea:

nume vârstă

Obținând proprietățile și folosind o sintaxă specială obiect[proprietate], putem obține valoarea fiecărei proprietăți:

const persoana = { nume: "Tom", vârstă: 37 };
for (proprietate in persoana) {
   console.log(proprietate, persoana[proprietate]);
}

Output-ul în consolă va fi:

nume Tom vârstă 37

for...of

Ciclul for...of este destinat pentru parcurgerea seturilor de date. De exemplu, un șir reprezintă, de fapt, un set de caractere. Prin intermediul acestui ciclu, putem parcurge șirul astfel:

const text = "Salut";
for (char of text) {
   console.log(char);
}

În consecință, ciclul parcurge toate caracterele șirului text, iar fiecare caracter curent este plasat în variabila char, a cărei valoare este apoi afișată pe consolă.

S a l u t

Un alt exemplu poate fi parcurgerea unui array:

const people = ["Tom", "Sam", "Bob"];
for (const person of people) {
   console.log(person);
}

În acest caz, ciclul parcurge elementele array-ului people. Fiecare element este plasat consecutiv în constanta person. Ulterior, putem afișa valoarea acesteia pe consolă:

Tom Sam Bob