Cum se utilizează bucle în JavaScript

Buclarea vă permite să parcurgeți fiecare articol dintr-o matrice, astfel încât să puteți personaliza și reda fiecare dintre ele după cum doriți. La fel ca în orice limbaj de programare, buclele sunt un instrument crucial pentru redarea matricelor și în JavaScript.

Cu ajutorul unor exemple practice, să ne adâncim în diferitele moduri în care puteți utiliza bucle în JavaScript.

Incremental și Decremental pentru Buclă în JavaScript

Incremental pentru bucla este baza iterației în JavaScript.

Presupune o valoare inițială atribuită unei variabile și execută o verificare simplă a lungimii condiționate. Apoi crește sau micșorează această valoare folosind ++ sau -- operatorii.

Iată cum arată sintaxa sa generală:

for (var i = valoarea inițială; i matrice [i]}

Acum să iterăm printr-o matrice folosind sintaxa de bază de mai sus:

anArray = [1, 3, 5, 6];
pentru (să i = 0; i console.log (anArray [i])
}
Ieșire:
1
3
5
6 

Acum vom opera pe fiecare element din matricea de mai sus folosind JavaScript pentru buclă:

anArray = [1, 3, 5, 6];
pentru (să i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Ieșire:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Bucla iterează prin matrice în mod incremental cu ++ operator, producând o ieșire comandată.

Dar folosind negativul (--) operator, puteți inversa ieșirea.

Sintaxele sunt aceleași, dar logica este puțin diferită de bucla de incrementare de mai sus.

Iată cum funcționează metoda descrescătoare:

anArray = [1, 3, 5, 6];
for (let i = anArray.length-1; i> = 0; i--) {
console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Ieșire:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Logica din spatele codului de mai sus nu este exagerată. Indexarea matricii începe de la zero. Deci sunând anArray [i] itera în mod normal de la zero la trei, deoarece matricea de mai sus conține patru elemente.

Astfel, eliminarea unuia din lungimea matricei și setarea condiției la zero mai mare sau egală așa cum am făcut-o este destul de utilă - mai ales atunci când folosim matricea ca bază a iterației dvs.

Păstrează indexul matricii la una mai mică decât lungimea sa. Conditia i> = 0 apoi forțează numărarea să se oprească pe ultimul element din matrice.

Legate de: Metode JavaScript Array pe care ar trebui să le stăpânești astăzi

JavaScript pentru fiecare

Deși nu puteți decrementa folosind JavaScript pentru fiecare, este adesea mai puțin detaliat decât brut pentru buclă. Funcționează alegând un articol după celălalt, fără a-l memora pe cel precedent.

Iată sintaxa generală a JavaScript pentru fiecare:

array.forEach (element => {
acțiune
})

Aruncați o privire la modul în care funcționează în practică:

let anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Ieșire:
1
3
5
6 

Acum utilizați acest lucru pentru a rula o operație matematică simplă pe fiecare element așa cum ați făcut în secțiunea anterioară:

let anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log ("5", "x", x, "=", x * 5)
});
Ieșire:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Cum se folosește pentru... în bucla de JavaScript

The pentru... în bucla în JavaScript iterează printr-o matrice și îi returnează indexul.

Veți fi ușor de utilizat pentru... în dacă ești familiarizat cu Python este pentru buclă deoarece sunt similare în ceea ce privește simplitatea și logica.

Aruncați o privire asupra sintaxei sale generale:

for (let element in array) {
acțiune 
}

Asa ca pentru... în bucla atribuie fiecare element dintr-o matrice variabilei (elementului) declarată în paranteză.

Astfel, înregistrarea elementului direct în buclă returnează un index de matrice și nu elementele în sine:

let anArray = [1, 3, 5, 6];
pentru (lăsați-mi un anArray) {
console.log (i)
}
Ieșire:
0
1
2
3 

Pentru a scoate în schimb fiecare articol:

let anArray = [1, 3, 5, 6];
pentru (lăsați-mi un anArray) {
console.log (anArray [i])
}
Ieșire:
1
3
5
6 

Așa cum ați făcut atunci când utilizați bucla decrementală, este de asemenea ușor să inversați ieșirea folosind pentru... în:

let anArray = [1, 3, 5, 6];
// Eliminați una din lungimea tabloului și atribuiți-o unei variabile:
să v = anArray.length - 1; 
// Utilizați variabila de mai sus ca bază index în timp ce iterați în jos matricea:
pentru (lăsați-mi un anArray) {
console.log (anArray [v])
v - = 1;
}
Ieșire:
6
5
3
1 

Codul de mai sus este logic similar cu ceea ce ați făcut în timp ce utilizați bucla decrementală. Este totuși mai lizibil și conturat în mod explicit.

JavaScript pentru... din Loop

The pentru... de bucla este similară cu pentru... în buclă.

Cu toate acestea, spre deosebire de pentru... în, nu iterează prin indexul matricei, ci elementele în sine.

Sintaxa sa generală arată astfel:

for (let i of array) {
acțiune 
}

Să folosim această metodă de looping pentru a itera printr-o matrice în mod incremental pentru a vedea cum funcționează:

let anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log (i)
}
Ieșire:
1
3
5
6 

De asemenea, puteți utiliza această metodă pentru a itera matricea și a inversa ieșirea. Este similar cu modul în care o faci folosind pentru... în:

let anArray = [1, 3, 5, 6];
să v = anArray.length - 1;
for (let x of anArray) {
console.log (anArray [v])
v - = 1;
}
Ieșire:
6
5
3
1

Pentru a opera în buclă:

let anArray = [1, 3, 5, 6];
să v = anArray.length - 1;
for (let x of anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v - = 1;
}
Ieșire:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Bucla While

The in timp ce bucla rulează continuu atâta timp cât o condiție specificată rămâne adevărată. Este adesea folosit ca o buclă infinită.

De exemplu, deoarece zero este întotdeauna mai mic de zece, codul de mai jos rulează continuu:

să i = 0;
while (i <10) {
console.log (4)
}

Codul de mai sus înregistrează „4” la infinit.

Să iterăm printr-o matrice folosind in timp ce buclă:

să i = 0;
while (i console.log (anArray [i])
i + = 1
}
Ieșire:
1
3
5
6 

JavaScript face... în timp ce Buclați

The face în timp ce loop acceptă și execută un set de acțiuni în mod explicit în interiorul unui do sintaxă. Apoi stabilește condiția acestei acțiuni în interiorul in timp ce buclă.

Iată cum arată:

do{
acțiuni
}
in timp ce (
consiție
)

Acum să repetăm ​​printr-o matrice folosind această metodă de buclare:

do{
console.log (anArray [i])
i + = 1
}
in timp ce (
i )
Ieșire:
1
3
5
6 

Familiarizați-vă cu buclele JavaScript

Deși am evidențiat aici diferitele metode de buclare JavaScript, stăpânirea elementelor de bază ale iterației în programare vă permite să le folosiți flexibil și sigur în programele dvs. Acestea fiind spuse, majoritatea acestor bucle JavaScript funcționează în același mod, cu doar câteva diferențe în conturul și sintaxele lor generale.

Totuși, buclele stau la baza majorității randării matricei pe partea clientului. Așadar, nu ezitați să modificați aceste metode de buclare după cum doriți. Utilizarea lor cu matrici mai complexe, de exemplu, vă oferă o mai bună înțelegere a buclelor JavaScript.

Cum se folosește declarația JavaScript if-else

Declarația if-else este primul tău pas către programarea logicii în aplicațiile tale.

Citiți în continuare

Despre autor