For, While och Do While LOOP in JavaSkript med exempel

Vad är en loop in JavaManus?

Slingor är användbara när du måste köra samma rader kod upprepade gånger, ett visst antal gånger eller så länge som ett specifikt villkor är sant. Anta att du vill skriva ett "Hej"-meddelande 100 gånger på din webbsida. Naturligtvis måste du kopiera och klistra in samma rad 100 gånger. Om du istället använder loopar kan du slutföra denna uppgift på bara 3 eller 4 rader.

Varje loop är uppbyggd av samma tre delar, oavsett syntaxen: ett startvärde, ett villkor som avgör om ytterligare ett pass körs och en uppdatering som flyttar loopen mot sin utgång. Diagrammet nedan visar den upprepade cykeln.

Olika typer av loopar i JavaScript

Det finns huvudsakligen fyra typer av slingor in JavaScript.

1. för slinga
2. för/i loop
3. medan slingan
4. gör ... medan loop

Modern Konst JavaSkriptet lägger till for…of-loopen för att iterera värden direkt, så fem former är tillgängliga i praktiken. Tabellen nedan visar vilken man ska använda i en given situation.

för slinga

Syntax:

for(statement1; statement2; statment3)
{
lines of code to be executed
}

1. Satsen1 exekveras först, även innan loo exekverasping kod. Så, den här satsen används normalt för att tilldela värden till variabler som ska användas inuti loopen.
2. Uttalandet2 är villkoret för att exekvera slingan.
3. Satsen3 körs varje gång efter toalettenping kod exekveras.

Prova detta själv:

<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>

Produktion:

Using for loops
John
Ann
Aaron
Edwin
Elizabeth

Räknaren börjar på 0 eftersom det första indexet för en array är noll, och villkoret använder students.length så att loopen anpassar sig automatiskt när namn läggs till eller tas bort.

medan slingan

Syntax:

while(condition)
{
lines of code to be executed
}

"While loop" exekveras så länge som det angivna villkoret är sant. Inuti while-loopen bör du inkludera uttalandet som kommer att avsluta loopen någon gång. Annars kommer din loop aldrig att ta slut och din webbläsare kan krascha.

Prova detta själv:

<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>

Produktion:

Using while loops
Fibonacci series less than 40
0
1
1
2
3
5
8
13
21
34

gör ... medan loop

Syntax:

do
{
block of code to be executed
} while (condition)

Do…while-loopen är väldigt lik while-loopen. Den enda skillnaden är att i do…while-loopen exekveras kodblocket en gång innan villkoret kontrolleras.

Prova detta själv:

<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>

Produktion:

Using do...while loops
Even numbers less than 20
2
4
6
8
10
12
14
16
18

Skillnaden blir synlig när villkoret är falskt från början. En while-slinga skriver ut ingenting, medan en do…while-slinga fortfarande skriver ut en rad före stopp.ping.

för…i loopen

Loopen for…in går igenom de uppräknbara egenskapsnamnen för ett objekt. Varje omgång tilldelar nästa nyckel till loopvariabeln, och värdet läses med hakparentesnotation.

const student = {
    name: "Ann",
    age: 21,
    course: "JavaScript"
};

for (const key in student) {
    console.log(key + " : " + student[key]);
}

Produktion:

name : Ann
age : 21
course : JavaScript

för…av loop och för varje

Loopen for…of läser värdena för alla itererbara objekt, inklusive arrayer, strängar, mappningar och set. Metoden forEach uppnår samma resultat med en callback-funktion och ger åtkomst till indexet.

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);
}

Produktion:

John
Ann
Aaron
0 - John
1 - Ann
2 - Aaron
A
n
n

En praktisk skillnad är viktig: bryt och fortsätt arbetet inuti for…of, men de kan inte användas inuti forEach, eftersom varje återanrop är en separat funktion.

bryt och fortsätt-satser

Två nyckelord ändrar det normala flödet i en loop. break-satsen lämnar loopen helt och continue-satsen avbryter det aktuella passet och hoppar till nästa.

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;
    }
}

Produktion:

even: 4
even: 10
even: 16
first value above 12: 13

Loopar förekommer i nästan alla manus du skriver. Fortsätt med praktisk JavaExempel på skriptkodåterbesök JavaSkriptmatrismetoder för iterationshjälparna som byggts ovanpå dessa loopar, och läs internt och externt JavaScript att bestämma var det färdiga manuset ska ligga.

Vanliga frågor