For, While og Do While LOOP ind JavaScript med eksempel
James Hartman
⚡ Smart opsummering
For, While og Do While løber ind JavaGentag en blok af sætninger i et script uden at duplikere kode. Denne artikel forklarer hver syntaks, viser eksempler, der kan køres, med forventet output, tilføjer for-in og for-of formerne og dækker forebyggelse af break, continue og uendelig løkke.
Hvad er en Loop-indgang JavaManuskript?
Sløjfer er nyttige, når du skal udføre de samme kodelinjer gentagne gange, et bestemt antal gange eller så længe en bestemt betingelse er sand. Antag, at du vil skrive en 'Hej'-besked 100 gange på din webside. Selvfølgelig skal du kopiere og indsætte den samme linje 100 gange. I stedet, hvis du bruger loops, kan du fuldføre denne opgave på kun 3 eller 4 linjer.
Hver løkke er bygget op af de samme tre dele, uanset syntaksen ser ud: en startværdi, en betingelse, der afgør, om et nyt gennemløb kører, og en opdatering, der bevæger løkken mod sin afslutning. Diagrammet nedenfor viser den gentagne cyklus.
Forskellige typer af løkker i JavaScript
Der er hovedsageligt fire typer sløjfer i JavaScript.
- til løkke
- for/i løkken
- mens løkke
- gør ... mens sløjfe
Moderne JavaScriptet tilføjer for…of-løkken til direkte iteration af værdier, så der er fem former tilgængelige i praksis. Tabellen nedenfor viser, hvilken man skal bruge i en given situation.
| Loop | Tilstand kontrolleret | Minimum antal henrettelser | Bedste brugt til |
|---|---|---|---|
| forum | Før hver gennemkørsel | 0 | Et kendt antal gentagelser |
| mens | Før hver gennemkørsel | 0 | Et ukendt antal drevet af en betingelse |
| gør ... mens | Efter hver gennemkørsel | 1 | Menuer og prompter, der skal køres én gang |
| for ... i | Før hver gennemkørsel | 0 | Aflæsning af nøglerne til et objekt |
| for… af | Før hver gennemkørsel | 0 | Læsning af værdierne i et array eller en streng |
til løkke
Syntaks:
for(statement1; statement2; statment3)
{
lines of code to be executed
}
- Sætningen1 udføres først, selv før loo udføresping kode. Så denne sætning bruges normalt til at tildele værdier til variabler, der skal bruges i løkken.
- Udsagnet2 er betingelsen for at udføre løkken.
- Sætningen3 udføres hver gang efter toilettetping kode udføres.
Prøv selv dette:
<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>
Output:
Using for loops John Ann Aaron Edwin Elizabeth
Tælleren starter ved 0, fordi det første indeks for en matrix er nul, og betingelsen bruger students.length, så løkken tilpasser sig automatisk, når navne tilføjes eller fjernes.
mens løkke
Syntaks:
while(condition)
{
lines of code to be executed
}
"While loop" udføres, så længe den angivne betingelse er sand. Inde i while-løkken bør du inkludere erklæringen, der vil afslutte løkken på et tidspunkt. Ellers vil din loop aldrig ende, og din browser kan gå ned.
Prøv selv dette:
<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>
Output:
Using while loops Fibonacci series less than 40 0 1 1 2 3 5 8 13 21 34
⚠️ Advarsel: En while-løkke, hvis betingelse aldrig bliver falsk, fryser browserfanen. Bekræft altid, at en variabel i kroppen flytter betingelsen mod falsk, og brug en sikkerhedstæller, når exit afhænger af eksterne data.
gør ... mens sløjfe
Syntaks:
do
{
block of code to be executed
} while (condition)
Do…while-løkken minder meget om while-løkken. Den eneste forskel er, at i do…while-løkken udføres kodeblokken én gang, selv før betingelsen kontrolleres.
Prøv selv dette:
<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>
Output:
Using do...while loops Even numbers less than 20 2 4 6 8 10 12 14 16 18
Forskellen bliver synlig, når betingelsen er falsk fra starten. En while-løkke udskriver ingenting, hvorimod en do…while-løkke stadig udskriver én linje før stop.ping.
for…i løkken
For…in-løkken gennemgår de optællelige egenskabsnavne for et objekt. Hver gennemgang tildeler den næste nøgle til løkkevariablen, og værdien læses med parentesnotation.
const student = { name: "Ann", age: 21, course: "JavaScript" }; for (const key in student) { console.log(key + " : " + student[key]); }
Output:
name : Ann age : 21 course : JavaScript
💡 Tip: Undgå for…in på arrays. Den returnerer indeksværdier som strenge og besøger også nedarvede egenskaber, hvilket kan give overraskende resultater. Brug i stedet for for…of eller en klassisk for-løkke til arrays.
for…af løkken og forEach
`for…of`-løkken læser værdierne af ethvert itererbart objekt, inklusive arrays, strenge, maps og sæt. `forEach`-metoden opnår det samme resultat med en callback-funktion og giver adgang til indekset.
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); }
Output:
John Ann Aaron 0 - John 1 - Ann 2 - Aaron A n n
Én praktisk forskel er vigtig: afbryd og fortsæt arbejdet inde i for…of, men de kan ikke bruges inde i forEach, fordi hvert callback er en separat funktion.
afbryd og fortsæt udsagn
To nøgleord ændrer det normale forløb i et hvilket som helst loop. break-sætningen forlader loopen helt, og continue-sætningen afbryder den aktuelle proces og hopper til den næste.
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; } }
Output:
even: 4 even: 10 even: 16 first value above 12: 13
Loops optræder i næsten alle manuskripter, du skriver. Fortsæt med praktisk JavaEksempler på scriptkode, genbesøg JavaScript array-metoder for iterationshjælperne bygget oven på disse løkker, og læs interne og eksterne JavaScript at beslutte, hvor det færdige manuskript skal ligge.
