For, While i Do While LOOP JavaSkrypt z przykładem

Co to jest pętla w JavaScenariusz?

Pętle są przydatne, gdy trzeba wielokrotnie wykonywać te same wiersze kodu, określoną liczbę razy lub tak długo, jak spełniony jest określony warunek. Załóżmy, że chcesz wpisać wiadomość „Witam” 100 razy na swojej stronie internetowej. Oczywiście będziesz musiał skopiować i wkleić tę samą linię 100 razy. Zamiast tego, jeśli użyjesz pętli, możesz wykonać to zadanie w zaledwie 3 lub 4 liniach.

Każda pętla składa się z tych samych trzech części, niezależnie od składni: wartości początkowej, warunku decydującego o uruchomieniu kolejnego przebiegu oraz aktualizacji, która przesuwa pętlę w kierunku wyjścia. Poniższy diagram przedstawia ten powtarzający się cykl.

Różne rodzaje pętli w JavaScenariusz

Istnieją głównie cztery typy pętli JAVASCRIPT.

1. dla pętli
2. pętla for/in
3. pętla while
4. zrobić… pętla while

Nowoczesne technologie JavaSkrypt dodaje pętlę for…of do bezpośredniej iteracji wartości, więc w praktyce dostępnych jest pięć form. Poniższa tabela pokazuje, którą z nich wybrać w danej sytuacji.

dla pętli

Składnia:

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

1. Najpierw wykonywane jest polecenie 1, jeszcze przed wykonaniem polecenia looping kodu. To polecenie jest zazwyczaj używane do przypisywania wartości zmiennym, które będą używane w pętli.
2. Instrukcja2 jest warunkiem wykonania pętli.
3. Instrukcja 3 jest wykonywana za każdym razem po operacji looping kod jest wykonywany.

Spróbuj tego sam:

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

Wyjście:

Using for loops
John
Ann
Aaron
Edwin
Elizabeth

Licznik zaczyna się od 0, ponieważ pierwszy indeks szyk wynosi zero, a warunek używa students.length, dzięki czemu pętla automatycznie dostosowuje się, gdy nazwiska są dodawane lub usuwane.

pętla while

Składnia:

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

„Pętla while” jest wykonywana tak długo, jak określony warunek jest prawdziwy. Wewnątrz pętli while należy umieścić instrukcję, która zakończy pętlę w pewnym momencie. W przeciwnym razie pętla nigdy się nie zakończy, a przeglądarka może się zawiesić.

Spróbuj tego sam:

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

Wyjście:

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

zrobić… pętla while

Składnia:

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

Pętla do…while jest bardzo podobna do pętli while. Jedyną różnicą jest to, że w pętli do…while blok kodu jest wykonywany raz, jeszcze przed sprawdzeniem warunku.

Spróbuj tego sam:

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

Wyjście:

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

Różnica staje się widoczna, gdy warunek jest fałszywy od samego początku. Pętla while nic nie drukuje, podczas gdy pętla do…while nadal drukuje jeden wiersz przed zatrzymaniem.ping.

pętla for…in

Pętla for…in przechodzi przez wyliczalne nazwy właściwości obiektu. Każde przejście przypisuje kolejny klucz do zmiennej pętli, a wartość jest odczytywana w notacji nawiasowej.

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

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

Wyjście:

name : Ann
age : 21
course : JavaScript

pętla for…of i forEach

Pętla for…of odczytuje wartości dowolnego obiektu iterowalnego, w tym tablic, ciągów znaków, map i zbiorów. Metoda forEach osiąga ten sam rezultat za pomocą funkcji zwrotnej i zapewnia dostęp do 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);
}

Wyjście:

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

Istotna jest jedna praktyczna różnica: polecenia break i continue działają wewnątrz instrukcji for…of, ale nie można ich używać wewnątrz instrukcji forEach, ponieważ każde wywołanie zwrotne jest osobną funkcją.

instrukcje break i continue

Dwa słowa kluczowe zmieniają normalny przebieg dowolnej pętli. Polecenie break całkowicie opuszcza pętlę, a polecenie continue porzuca bieżące przejście i przechodzi do następnego.

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

Wyjście:

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

Pętle pojawiają się w niemal każdym skrypcie, który napiszesz. Kontynuuj praktyczny JavaPrzykłady kodu skryptu, ponownie odwiedzić JavaMetody tablicowe skryptów dla pomocników iteracyjnych zbudowanych na tych pętlach i przeczytaj wewnętrzny i zewnętrzny JavaScenariusz aby zdecydować, gdzie ma zostać umieszczony ukończony skrypt.

FAQ