For, While i Do While LOOP in JavaSkripta s primjerom
James Hartman
⚡ Pametni sažetak
Petlje For, While i Do While u JavaSkripta ponavlja blok naredbi bez dupliciranja koda. Ovaj članak objašnjava svaku sintaksu, prikazuje primjere koji se mogu izvesti s očekivanim rezultatom, dodaje oblike for-in i for-of te pokriva sprječavanje prekida, nastavka i beskonačne petlje.
Što je petlja u JavaSkripta?
Petlje su korisne kada morate više puta izvršavati iste retke koda, određeni broj puta ili sve dok je određeni uvjet istinit. Pretpostavimo da želite upisati poruku 'Zdravo' 100 puta na svojoj web stranici. Naravno, morat ćete kopirati i zalijepiti isti redak 100 puta. Umjesto toga, ako koristite petlje, ovaj zadatak možete dovršiti u samo 3 ili 4 retka.
Svaka petlja je izgrađena od ista tri dijela, bez obzira na sintaksu: početne vrijednosti, uvjeta koji odlučuje hoće li se izvršiti sljedeći prolaz i ažuriranja koje pomiče petlju prema njenom izlazu. Dijagram u nastavku prikazuje taj ponavljajući ciklus.
Različite vrste petlji u JavaScript
Uglavnom postoje četiri vrste petlji JavaScript.
- za petlju
- petlja for/in
- dok petlje
- do…while petlja
moderna JavaSkripta dodaje petlju for…of za izravno iteriranje vrijednosti, tako da je u praksi dostupno pet oblika. Tablica u nastavku pokazuje koji treba koristiti u određenoj situaciji.
| Petlja | Stanje provjereno | Minimalni broj izvršenja | Najbolje korišteno za |
|---|---|---|---|
| za | Prije svakog prolaza | 0 | Poznati broj ponavljanja |
| dok | Prije svakog prolaza | 0 | Nepoznati broj uzrokovan uvjetom |
| učiniti…dok | Nakon svakog prolaza | 1 | Izbornici i upiti koji se moraju pokrenuti jednom |
| za…u | Prije svakog prolaza | 0 | Čitanje ključeva objekta |
| za…od | Prije svakog prolaza | 0 | Čitanje vrijednosti niza ili niza znakova |
za petlju
Sintaksa:
for(statement1; statement2; statment3)
{
lines of code to be executed
}
- Naredba1 se izvršava prva, čak i prije izvršavanja naredbe loo.ping kod. Dakle, ova se naredba obično koristi za dodjeljivanje vrijednosti varijablama koje će se koristiti unutar petlje.
- Izjava2 je uvjet za izvršavanje petlje.
- Naredba3 se izvršava svaki put nakon loo-aping kod se izvršava.
Pokušajte ovo sami:
<html>
<head>
<script type="text/javascript">
var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
document.write("<b>Using for loops </b><br />");
for (i=0;i<students.length;i++)
{
document.write(students[i] + "<br />");
}
</script>
</head>
<body>
</body>
</html>
Izlaz:
Using for loops John Ann Aaron Edwin Elizabeth
Brojač počinje od 0 jer je prvi indeks od poredak je nula, a uvjet koristi students.length pa se petlja automatski prilagođava kada se imena dodaju ili uklanjaju.
dok petlje
Sintaksa:
while(condition)
{
lines of code to be executed
}
"While petlja" se izvršava sve dok je navedeni uvjet istinit. Unutar while petlje trebali biste uključiti naredbu koja će završiti petlju u nekom trenutku. U suprotnom, vaša petlja nikada neće završiti i vaš bi se preglednik mogao srušiti.
Pokušajte ovo sami:
<html>
<head>
<script type="text/javascript">
document.write("<b>Using while loops </b><br />");
var i = 0, j = 1, k;
document.write("Fibonacci series less than 40<br />");
while(i<40)
{
document.write(i + "<br />");
k = i+j;
i = j;
j = k;
}
</script>
</head>
<body>
</body>
</html>
Izlaz:
Using while loops Fibonacci series less than 40 0 1 1 2 3 5 8 13 21 34
⚠️ Upozorenje: Petlja while čiji uvjet nikada ne postaje false zamrzava karticu preglednika. Uvijek potvrdite da varijabla unutar tijela petlje pomiče uvjet prema false i koristite sigurnosni brojač kada izlaz ovisi o vanjskim podacima.
do…while petlja
Sintaksa:
do
{
block of code to be executed
} while (condition)
Petlja do…while je vrlo slična petlji while. Jedina je razlika što se u petlji do…while blok koda izvršava jednom čak i prije provjere uvjeta.
Pokušajte ovo sami:
<html>
<head>
<script type="text/javascript">
document.write("<b>Using do...while loops </b><br />");
var i = 2;
document.write("Even numbers less than 20<br />");
do
{
document.write(i + "<br />");
i = i + 2;
}while(i<20)
</script>
</head>
<body>
</body>
</html>
Izlaz:
Using do...while loops Even numbers less than 20 2 4 6 8 10 12 14 16 18
Razlika postaje vidljiva kada je uvjet od početka lažan. Petlja while ne ispisuje ništa, dok petlja do...while ipak ispisuje jedan redak prije zaustavljanja.ping.
za…u petlji
Petlja for…in prolazi kroz nabrojiva imena svojstava objekta. Svaki prolaz dodjeljuje sljedeći ključ varijabli petlje, a vrijednost se čita s notacijom uglatih zagrada.
const student = { name: "Ann", age: 21, course: "JavaScript" }; for (const key in student) { console.log(key + " : " + student[key]); }
Izlaz:
name : Ann age : 21 course : JavaScript
💡 Savjet: Izbjegavajte for…in na nizovima. Vraća indeksne vrijednosti kao nizove i posjećuje naslijeđena svojstva, što može dati iznenađujuće rezultate. Umjesto toga koristite for…of ili klasičnu for petlju za nizove.
for…of petlje i forEach
Petlja for…of čita vrijednosti bilo kojeg iterabilnog objekta, uključujući nizove, stringove, mape i skupove. Metoda forEach postiže isti rezultat s funkcijom povratnog poziva i daje pristup indeksu.
const students = ["John", "Ann", "Aaron"]; // for...of reads each value directly for (const name of students) { console.log(name); } // forEach supplies the value and the index students.forEach(function (name, index) { console.log(index + " - " + name); }); // strings are iterable too for (const letter of "Ann") { console.log(letter); }
Izlaz:
John Ann Aaron 0 - John 1 - Ann 2 - Aaron A n n
Jedna praktična razlika je važna: break i continue rade unutar for…of, ali se ne mogu koristiti unutar forEach, jer je svaki povratni poziv zasebna funkcija.
naredbe break i continue
Dvije ključne riječi mijenjaju normalan tok bilo koje petlje. Naredba break u potpunosti napušta petlju, a naredba continue napušta trenutni prolaz i skače na sljedeći.
const numbers = [4, 7, 10, 13, 16, 19]; // continue: skip odd numbers for (const n of numbers) { if (n % 2 !== 0) { continue; } console.log("even: " + n); } // break: stop at the first value above 12 for (const n of numbers) { if (n > 12) { console.log("first value above 12: " + n); break; } }
Izlaz:
even: 4 even: 10 even: 16 first value above 12: 13
Petlje se pojavljuju u gotovo svakom skriptu koji ćete napisati. Nastavite s praktičan JavaPrimjeri skriptnog koda, ponovno posjetiti JavaMetode niza skripti za iteracijske pomoćnike izgrađene na vrhu ovih petlji i pročitajte unutarnje i vanjsko JavaScript odlučiti gdje će se gotov scenarij nalaziti.
