JavaScript - pętle

Pętle mogą wykonywać blok kodu wiele razy. Przy testowanu uważaj byś nie zrobił nieskończonej pętli - możesz unieruchomić przeglądarkę. Rodzaje pętli:

• for - zapętla blok kodu
• for... in - zapętla właściwości obiektu
• for... of - zapętla wartości iterowalnego obiektu
• while - zapętla blok kodu, gdy określony warunek jest spełniony
• do... while - zapętla blok kodu, gdy określony warunek jest spełniony

Pętla for

for (instr1_przed; warunek2; instr3_po) {
  // blok kodu do wykonania
}

Wszystkie instrukcje sa opcjonalne ale średniki zostają.
1 - instrukcja wykonywana (jeden raz) przed wykonaniem bloku kodu, listę oddzielamy przecinkiem
zazwyczaj w niej inicjujemy zmienną używaną w pętli (ale jeśli zrobiłeś to przed pętlą to możesz pominąć)
2 - określa warunek wykonania bloku kodu
najczęściej bada stan zmiennej początkowej, jeśli pominiesz tę instrukcję musisz zapewnić jakoś wyjście z pętli by nie byłą nieskończona.
3 - instrukcja wykonywana (za każdym razem) po wykonaniu bloku kodu, listę oddzielamy przecinkiem
często zmienia ona stan zmiennej początkowej (np. i++), jeśli ją pominiesz musisz to zrobić w bloku kodu do wykonania

for (i=0; i<3; i++) alert("Hej");

var i = 0;
for (; i < 5; ) {
  alert(i);
  i++;
}

Pętla for/in

for... in iteruje po wszystkich niesymbolicznych, wyliczalnych właściwościach obiektu

for (zmienna in obiekt)
  polecenie

var osoba = {imie: "Jan", nazwisko: "Kowalski", wiek: 33};
var text1 = ""; 
var text2 = "";
for (i in osoba) {
  text1 += i+ " ";
  text2 += osoba[i]+ " ";
}
alert(text1);   //zwróci: imie nazwisko wiek
alert(text2);   //zwróci: Jan Kowalski 33

var osoba = ['Ala', 'Ola', 'Jan'];
var text1 = ""; 
var text2 = ""; 
for (i in osoba) {
 text1 += i+ " ";
 text2 += osoba[i]+ " ";
}
alert(text1);   //zwróci: 0 1 2
alert(text2);   //zwróci Ala Ola Jan

Pętla for/of

For... of zapętla wartości iterowalnych obiektów takich jak łańcuchy, tablice, mapy, listy węzłów itp.
Składnia:

for (zmienna of obiekt_iterowalny) 
  polecenie

var osoba = ['Ala', 'Ola', 'Jan'];
var text = ""; 
for (i of osoba) {
 text += i+ " "; 
}
alert(text);   //zwróci Ala OLa Jan

Pętla while

Pętla jest wykonywana tak długo dopóki warunek jest spełniony (pradziwy)

while (warunek) {
  //polecenia
}

var text = "";
var i = 0;
while (i < 6) {
  text += " " + i;
  i++;
}
alert(text);  //zwróci: 0 1 2 3 4 5

Pętla do/while

Podobna do while ale najpierw wykona blok kodu jeden raz, zanim sprawdzi, czy warunek jest spełniony, a następnie będzie powtórzać pętlę, dopóki warunek będzie spełniony.

do {
  //polecenia
}
while (warunek)

Nie zapomnij o tym by jakaś zmienna miała wpływ na zakończenie pętli!

n = 0;
suma = 0;
do {
  suma += n;
  n ++;
}
while(n <= 11)
alert(suma); 
//zwróci sumę cyfr od 0 do 10 (66)

n = 0;
suma = 0;
for (; n <= 11; )  { 
  suma += n;
  n ++;
}
alert(suma); 
//zwróci sumę cyfr od 0 do 10 (66)

Instrukcje break i continue

Instrukcja break powoduje wyskoczenie z pętli i wykonywanie kodu po niej.

Instrukcja continue powoduje przeskok jednej iteracji w pętli.

for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  if (i === 7) { break; }
  text +=  i + " ";
}
alert(text); //zwróci: 0 1 2 4 5 6 

Etykiety

Aby opisać instrukcje JS poprzedzamy je nazwą etykiety i dwukropkiem:

label: {
 instrukcje
}

Instrukcje breaki i continue są jedynymi instrukcjami JavaScript, które mogą „wyskoczyć” z bloku kodu.
Składnia:

break labelname;
continue labelname;

Instrukcja continue (z lub bez odwołania do etykiety) może być użyta tylko do pominięcia 1 iteracji.
Instrukcja break bez odwołania do etykiety, może być używana tylko do wyskoczenia z pętli lub z instrukcji switch.
Instrukcja break za pomocą odwołania do etykiety może być użyta do wyskoczenia z dowolnego kodu bloku.

bloczek: {
  text1 = "Ala"; 
  text2 = "Ola"; 
  text1 = text1 + " i " + text2;
  break bloczek;
  text1 = "XXXXXXXXXXXX"; 
}
alert(text1);    //zwróci: Ala i Ola

menu jest po prawej stronie -->