Fiecare tip de buclă JavaScript explicat: [With Codeblocks and Examples]

JavaScript este printre cele mai utilizate limbaje de programare. Dezvoltatorii care intenționează să devină ingineri JavaScript trebuie să învețe elementele de bază ale buclelor, tipurile lor și modul în care funcționează.

O buclă JavaScript este un instrument folosit pentru a efectua sarcini repetate pe baza unei anumite condiții. Pe de altă parte, „iterare” este un termen generic, adică repetare în contextul buclei. O buclă va continua să se repete până când este îndeplinită o condiție de oprire.

Pentru a-l înțelege mai bine, te poți gândi la el ca la un joc computerizat în care ești instruit să faci X pași spre nord și apoi Y pași spre stânga.

Puteti reprezenta faceti 7 pasi spre nord ca;

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

când blocul de cod de mai sus este executat, veți avea acesta;

Cuprins

De ce se folosesc de obicei buclele?

Efectuați sarcini repetitive: puteți utiliza bucle pentru a executa instrucțiuni până când sunt îndeplinite anumite condiții.
Iterați peste obiecte sau matrice: cu bucle, puteți itera peste proprietățile unui obiect sau elemente ale unei matrice, permițându-vă să efectuați anumite acțiuni pentru fiecare proprietate sau element.
Filtrați datele: puteți utiliza o buclă pentru a filtra datele în funcție de condiții specifice.

Buclele JavaScript vin în diferite forme; Pentru, În timp ce, Fă… În timp ce, Pentru… de și Pentru… în. Să le explorăm în detaliu și să demonstrăm cum funcționează fiecare.

Pentru buclă

O buclă for se va repeta până când o condiție specificată devine adevărată. O buclă for are trei expresii opționale, urmate de un bloc de cod.

for (initialization; condition; finalExpression) {

  // code

}

Expresia de inițializare vine înainte ca prima buclă să fie executată. Această expresie inițializează de obicei unul sau mai multe contoare.
O expresie de condiție este verificată de fiecare dată înainte de rularea buclei for. Codul din buclă sau instrucțiune se execută de fiecare dată când expresia este evaluată la adevărat. Pe de altă parte, bucla se oprește atunci când expresia este evaluată ca falsă. Cu toate acestea, dacă expresia este omisă, expresia va fi evaluată automat la adevărat.
FinalExpression se execută după fiecare iterație a buclei. Expresia este folosită mai ales pentru a incrementa un numărător.

Cum să forțați Apple Watch să se sincronizeze cu iPhone-ul dvs

Puteți folosi {}, instrucțiune de blocare, pentru a grupa și executa mai multe instrucțiuni. Dacă doriți să părăsiți bucla mai devreme înainte ca expresia condiției să fie evaluată ca falsă, utilizați instrucțiunea break.

Exemple de bucle for cu cod

Utilizați bucla for pentru a repeta;

for (let i = 0; i < 7; i++) {

  console.log(i);

}

În acest bloc de cod;

Variabila i este inițializată la zero (fie i=0).
Condiția este că i ar trebui să fie mai mic de 7 (i=7).
Bucla va repeta în mod repetat dacă valoarea lui i este mai mică de 7 (i<7>.
Iterația va adăuga 1 la valoarea lui i după fiecare iterație (++1).

Utilizați instrucțiunea break pentru a ieși din buclă înainte ca condiția să devină falsă;

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + i);

}

Blocul de cod iterează de la 1 la 10 (i<11).
Bucla inițializează o variabilă i cu valoarea 1 (fie i = 1).
Condiția de buclă va continua să se execute dacă valoarea lui i este mai mică de 11 (i < 11).
Valoarea lui i crește cu 2 după fiecare iterație (i += 2).

Declarația if evaluează dacă valoarea lui i=9. Dacă condiția este adevărată, instrucțiunea break se execută și bucla se termină.

(imagine)

Pentru… de buclă

Bucla for…of iterează peste obiecte iterabile, cum ar fi Hartă, Matrice, Argumente și Set. Această buclă invocă un cârlig de iterație personalizat cu instrucțiuni care se execută pentru valoarea fiecărei proprietăți distincte.

Structura de bază a unei bucle for… este;

for (variable of object)

  statement

Exemple de bucla for…of în acțiune

Pentru… de iterare în buclă peste o matrice

const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];

for (let i of frontendLanguages) {

  console.log(i);

}

În acest cod;

Definim o matrice numita frontendLanguages
Matricea are trei elemente; „HTML”, „CSS”, „JavaScript” și „React”.
Bucla for…of iterează peste fiecare element din frontendLanguages.
I din blocul de cod preia valoarea fiecărui element în timpul fiecărei iterații și valorile imprimate pe consolă.

Pentru… de iterarea buclei peste un set

const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

În acest bloc de cod;

Declarăm o variabilă s, pe care o atribuim unui set nou folosind constructorul Set().
Două elemente sunt adăugate la cod folosind metoda add().
For….of iterează peste obiectul elemente.
Bucla atribuie elementul curent la n înainte de a executa instrucțiunea console.log(n).

Pentru… de iterare în buclă peste o hartă

const m = new Map();

m.set(4, "rabbit");

m.set(6, "monkey");

m.set(8, "elephant");

m.set(10, "lion");

m.set(12, "leopard");

for (let n of m) {

  console.log(n);

}

În acest bloc de cod;

Folosim constructorul Map() pentru a crea un nou obiect Map.
Se declară o variabilă m.
Folosind metoda .set(), adăugăm cinci perechi cheie-valoare.
O buclă for…of iterează peste elementele obiectului Map m.

Pentru… în buclă

O buclă for…in este folosită pentru a itera asupra proprietăților unui obiect. Structura de bază a unei bucle for…in este;

for (property in object) {

  // code

}

Puteți utiliza for…in loop pentru a repeta peste matrice și obiecte asemănătoare matricei.

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };

for (const vegetable in shoppingList) {

  console.log(vegetable);

}

În acest bloc de cod;

Introducem un obiect JavaScript și îl denumim lista de cumpărături.
Folosim bucla for pentru a itera fiecare proprietate din lista de cumpărături folosind operatorul in.
În fiecare iterație, bucla atribuie numele proprietății curente în lista de cumpărături.

In timp ce

Bucla while evaluează o condiție, dacă descoperă că este adevărată, blocul de cod se execută. Totuși, dacă condiția este falsă, bucla se termină și blocul de cod nu va fi executat.

Aceasta este structura de bază a unei bucle while;

while (condition)

    Statement

Condiția de testare trebuie să apară înainte de execuția instrucțiunii în buclă. Puteți executa mai multe instrucțiuni folosind instrucțiuni {} sau bloc.

Exemplu de buclă while în acțiune

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

În acest cod;

O variabilă n este inițializată cu o valoare zero (fie n=0).
Bucla se va executa atâta timp cât valoarea lui n este mai mică de 9 (n<9)
Valoarea lui n este afișată pe consolă și crește cu 1 după fiecare iterație (n++)
Codul se va opri la 8.

Faceți… While Loop

O buclă do…while iterează până când o anumită condiție este evaluată ca falsă.

Structura generală a unei declarații do…while este;

do

  statement

while (condition);

Instrucțiunea este executată o dată, dar înainte de a verifica condiția. Instrucțiunea se va executa dacă condiția este adevărată. Totuși, dacă condiția evaluată este falsă, execuția se va opri, iar controlul trece la instrucțiunea după do..while. Codul într-o buclă do…while este garantat să ruleze cel puțin o dată, chiar dacă condiția este evaluată la adevărată.

Exemplu de a face… în timp ce

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

În acest cod;

Introducem o variabilă n și setăm valoarea ei inițială la 0 (fie n=0).
Variabila noastră n intră într-o buclă do…while unde valoarea sa este incrementată cu 1 după fiecare iterație (n+=1)
Valoarea lui n este înregistrată.
Bucla va continua să se execute atâta timp cât valoarea lui n este mai mică de 7 (n<7).

Când rulați acest cod, consola va afișa valori de n începând de la 1 la 7, deoarece bucla se execută de 7 ori.

Bucla imbricată

O buclă imbricată este o situație în care avem o buclă în interiorul unei bucle. De exemplu, putem avea o buclă for imbricată într-o altă buclă for.

for (let outer = 0; outer < 5; outer += 2) {

  for (let inner = 0; inner < 6; inner += 2) {

    console.log(`${outer}-${inner}`);

  }

}

Există două variabile; exterior și interior și ambele sunt inițializate cu valoarea zero.
Ambele variabile sunt incrementate cu 2 după fiecare iterație
Buclele exterioare și interioare repetă de trei ori fiecare.

Instrucțiuni de control al buclei

Instrucțiunile de control al buclei, uneori cunoscute sub numele de „instrucțiuni de salt” întrerup fluxul normal al unui program. Break and continue sunt exemple de instrucțiuni de control al buclei.

Declarații de pauză

Instrucțiunile Break termină imediat o buclă, chiar dacă condiția nu a fost îndeplinită.

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("Loop stops here. We have reached the break statement");

    break;

  }

  console.log(n);

}

Codul redat va apărea ca;

Continuați declarațiile

Instrucțiunile Continue sunt folosite pentru a sări peste un anumit bloc de cod și pentru a efectua iterația pentru noua buclă.

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

Codul redat va apărea ca;

Concluzie

Mai sus sunt buclele comune pe care le veți întâlni în JavaScript vanilla și cadrele/bibliotecile sale. După cum sa subliniat, fiecare tip de buclă are cazul său de utilizare și comportamente diferite. Dacă alegeți tipul de buclă greșit, probabil că veți avea erori, iar codul dvs. va afișa probabil un comportament neașteptat.

Dacă aveți de-a face cu un cadru sau o bibliotecă JavaScript, verificați întotdeauna documentația acestuia și utilizați buclele încorporate.