For, While și Do While LOOP in JavaScript cu exemplu

Ce este o buclă de intrare JavaScenariul?

Buclele sunt utile atunci când trebuie să executați aceleași linii de cod în mod repetat, pentru un anumit număr de ori sau atâta timp cât o anumită condiție este adevărată. Să presupunem că doriți să introduceți un mesaj „Bună ziua” de 100 de ori pe pagina dvs. web. Desigur, va trebui să copiați și să lipiți aceeași linie de 100 de ori. În schimb, dacă utilizați bucle, puteți finaliza această sarcină în doar 3 sau 4 rânduri.

Fiecare buclă este construită din aceleași trei părți, indiferent de sintaxa acesteia: o valoare inițială, o condiție care decide dacă se execută o altă trecere și o actualizare care deplasează bucla spre ieșire. Diagrama de mai jos arată acest ciclu repetitiv.

Diferite tipuri de bucle în JavaScenariu

Există în principal patru tipuri de bucle JavaScenariu.

1. pentru bucla
2. buclă for/in
3. în timp ce bucla
4. face... în timp ce buclă

Modern JavaScriptul adaugă bucla for…of pentru iterarea directă a valorilor, astfel încât în ​​practică sunt disponibile cinci forme. Tabelul de mai jos arată pe care să o folosești într-o anumită situație.

pentru bucla

Sintaxă:

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

1. Instrucțiunea1 este executată prima, chiar înainte de executarea instrucțiunii loo.ping cod. Așadar, această instrucțiune este utilizată în mod normal pentru a atribui valori variabilelor care vor fi utilizate în interiorul buclei.
2. Declarația2 este condiția pentru a executa bucla.
3. Instrucțiunea 3 este executată de fiecare dată după toaletă.ping codul este executat.

Încercați singuri asta:

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

ieșire:

Using for loops
John
Ann
Aaron
Edwin
Elizabeth

Contorul începe de la 0 deoarece primul index al unui mulțime este zero, iar condiția folosește students.length, astfel încât bucla se adaptează automat atunci când se adaugă sau se elimină nume.

în timp ce bucla

Sintaxă:

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

„Bucla while” este executată atâta timp cât condiția specificată este adevărată. În bucla while, ar trebui să includeți declarația care va încheia bucla la un moment dat. În caz contrar, bucla dvs. nu se va termina niciodată și browserul dvs. se poate bloca.

Încercați singuri asta:

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

ieșire:

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

face... în timp ce buclă

Sintaxă:

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

Bucla do…while este foarte similară cu bucla while. Singura diferență este că în bucla do…while, blocul de cod este executat o singură dată chiar înainte de verificarea condiției.

Încercați singuri asta:

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

ieșire:

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

Diferența devine vizibilă atunci când condiția este falsă de la început. O buclă while nu afișează nimic, în timp ce o buclă do...while afișează totuși o linie înainte de oprire.ping.

pentru…în buclă

Bucla for…in parcurge numele proprietăților enumerabile ale unui obiect. Fiecare trecere atribuie următoarea cheie variabilei buclei, iar valoarea este citită cu notația dintre paranteze.

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

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

ieșire:

name : Ann
age : 21
course : JavaScript

buclă for…of și forEach

Bucla for…of citește valorile oricărui obiect iterabil, inclusiv tablouri, șiruri de caractere, hărți și seturi. Metoda forEach obține același rezultat cu o funcție callback și oferă acces la index.

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

ieșire:

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

O diferență practică contează: break și continue work în interiorul for…of, dar nu pot fi folosite în interiorul forEach, deoarece fiecare callback este o funcție separată.

Instrucțiuni break și continue

Două cuvinte cheie schimbă fluxul normal al oricărei bucle. Instrucțiunea break părăsește complet bucla, iar instrucțiunea continue abandonează pasul curent și sare la următorul.

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

ieșire:

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

Buclele apar în aproape fiecare script pe care îl veți scrie. Continuați cu practic JavaExemple de cod de script, revedeți JavaMetode de tip matrice de script pentru helperele de iterație construite peste aceste bucle și citiți intern si extern JavaScenariu pentru a decide unde ar trebui să se afle scenariul finalizat.

Întrebări frecvente