Kako koristiti petlje u JavaScriptu

Ponavljanje vam omogućuje ponavljanje svake stavke u nizu tako da svaku možete prilagoditi i ispisati kako želite. Kao i kod svakog programskog jezika, petlje su ključni alat za iscrtavanje niza u JavaScript -u.

Uz pomoć nekoliko praktičnih primjera, zaronimo dublje u različite načine na koje možete koristiti petlje u JavaScriptu.

Inkrementalno i dekrementalno za petlju u JavaScriptu

Inkrementalni za loop je osnova iteracije u JavaScript -u.

Pretpostavlja početnu vrijednost dodijeljenu varijabli i izvodi jednostavnu provjeru uvjetne duljine. Zatim povećava ili smanjuje tu vrijednost pomoću ++ ili -- operaterima.

Evo kako izgleda njegova opća sintaksa:

for (var i = početna vrijednost; i niz [i]}

Idemo sada ponoviti niz koristeći gornju osnovnu sintaksu:

anArray = [1, 3, 5, 6];
za (neka je i = 0; i console.log (anArray [i])
}
Izlaz:
1
3
5
6 

Sada ćemo raditi sa svakom stavkom u gornjem nizu koristeći JavaScript za petlja:

anArray = [1, 3, 5, 6];
za (neka je i = 0; i console.log ("5", "x", anArray [i], "=", anArray [i] * 5)
}
Izlaz:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Petlja se postepeno ponavlja kroz niz ++ operator, proizvodi uređen izlaz.

Ali koristeći negativno (--), možete obrnuti izlaz.

Sintakse su iste, ali logika je malo drugačija od gornje inkrementne petlje.

Evo kako funkcionira dekrementalna metoda:

anArray = [1, 3, 5, 6];
for (neka je i = anArray.length-1; i> = 0; ja--) {
console.log ("5", "x", anArray [i], "=", anArray [i]*5)
}
Izlaz:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Logika iza gornjeg koda nije pretjerana. Indeksiranje niza počinje od nule. Pa zove anArray [i] normalno ponavlja od indeksa nula do tri jer gornji niz sadrži četiri stavke.

Stoga je uklanjanje jednog iz duljine niza i postavljanje uvjeta na veću ili jednaku nulu prilično zgodno - osobito kada koristite niz kao osnovu vaše iteracije.

On održava indeks niza za jedan manji od njegove duljine. Stanje i> = 0 zatim prisiljava odbrojavanje da se zaustavi na posljednjoj stavci u nizu.

Povezano: JavaScript metode niza koje biste trebali savladati već danas

JavaScript za svaku

Iako se pomoću JavaScript -a ne može smanjiti za svakoga, često je manje detaljan od sirovog za petlja. Djeluje tako da bira jednu stavku za drugom, a da prethodnu ne zapamti.

Evo opće sintakse JavaScripta za svakoga:

array.forEach (element => {
akcijski
})

Pogledajte kako to funkcionira u praksi:

neka anArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log (x)
});
Izlaz:
1
3
5
6 

Sada upotrijebite ovo za pokretanje jednostavne matematičke operacije nad svakom stavkom kao što ste to učinili u prethodnom odjeljku:

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

Kako koristiti for... in Loop JavaScript

The za... u loop u JavaScript -u ponavlja kroz niz i vraća svoj indeks.

Lako ćete ga koristiti za... u ako ste upoznati Python -ova petlja for budući da su slični u pogledu jednostavnosti i logike.

Pogledajte njegovu opću sintaksu:

for (neka element u nizu) {
akcijski 
}

Dakle, za... u loop dodjeljuje svaku stavku u nizu varijabli (elementu) deklariranoj u zagradi.

Dakle, bilježenje elementa izravno unutar petlje vraća indeks niza, a ne same stavke:

neka anArray = [1, 3, 5, 6];
za (pusti me u nizu) {
console.log (i)
}
Izlaz:
0
1
2
3 

Umjesto toga, za ispis svake stavke:

neka anArray = [1, 3, 5, 6];
za (pusti me u nizu) {
console.log (anArray [i])
}
Izlaz:
1
3
5
6 

Kao što ste učinili kada ste koristili dekrementalnu petlju, također je lako preokrenuti izlaz pomoću za... u:

neka anArray = [1, 3, 5, 6];
// Uklonite jedan iz duljine niza i dodijelite ovo varijabli:
neka je v = anArray.length - 1; 
// Koristite gornju varijablu kao bazu indeksa dok ponavljate niz:
za (pusti me u nizu) {
console.log (anArray [v])
v -= 1;
}
Izlaz:
6
5
3
1 

Gornji kod logički je sličan onome što ste učinili dok ste koristili dekrementalnu petlju. Ipak, čitljiviji je i izričito opisan.

JavaScript za... of Loop

The za... od petlja je slična za... u petlja.

Međutim, za razliku od za... u, ne ponavlja kroz indeks niza već same stavke.

Njegova opća sintaksa izgleda ovako:

for (neka ja iz niza) {
akcijski 
}

Upotrijebimo ovu metodu petlje za postupno ponavljanje kroz niz kako bismo vidjeli kako to radi:

neka anArray = [1, 3, 5, 6];
for (neka ja iz anraraya) {
console.log (i)
}
Izlaz:
1
3
5
6 

Ovu metodu možete upotrijebiti i za ponavljanje niza i poništavanje izlaza. Slično je kako to radite koristeći za... u:

neka anArray = [1, 3, 5, 6];
neka je v = anArray.length - 1;
for (neka je x anArray) {
console.log (anArray [v])
v -= 1;
}
Izlaz:
6
5
3
1

Za rad unutar petlje:

neka anArray = [1, 3, 5, 6];
neka je v = anArray.length - 1;
for (neka je x anArray) {
console.log ("5", "x", anArray [v], "=", anArray [v] * 5)
v -= 1;
}
Izlaz:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Dok petlja

The dok petlja radi neprekidno sve dok navedeni uvjet ostane istinit. Često se koristi kao beskonačna petlja.

Na primjer, budući da je nula uvijek manja od deset, donji kôd radi neprekidno:

neka je i = 0;
dok (ja <10) {
console.log (4)
}

Gore navedeni kod bilježi "4" beskonačno.

Idemo ponoviti niz pomoću dok petlja:

neka je i = 0;
while (i console.log (anArray [i])
i += 1
}
Izlaz:
1
3
5
6 

JavaScript do... while Loop

The učiniti... dok loop prihvaća i izvršava skup radnji izričito unutar a čini sintaksa. Zatim navodi uvjet za ovu radnju unutar dok petlja.

Evo kako to izgleda:

čini{
radnje
}
dok (
savjest
)

Idemo sada ponoviti niz pomoću ove metode petlje:

čini{
console.log (anArray [i])
i += 1
}
dok (
i )
Izlaz:
1
3
5
6 

Upoznajte se s JavaScript petljama

Iako smo ovdje istaknuli različite metode ponavljanja JavaScript -a, svladavanje osnova iteracije u programiranju omogućuje vam da ih fleksibilno i pouzdano koristite u svojim programima. Ipak, većina ovih JavaScript petlji radi na isti način, s samo nekoliko razlika u općim crtama i sintaksama.

Petlje su, međutim, osnova većine iscrtavanja niza na strani klijenta. Stoga slobodno doradite ove metode petlje kako želite. Na primjer, njihova upotreba sa složenijim nizovima daje vam bolje razumijevanje JavaScript petlji.

Kako koristiti JavaScript if-else izjavu

Izjava if-else vaš je prvi korak prema programiranju logike u vašim aplikacijama.

Pročitajte Dalje

O autoru