Pętle
Do pracy nad zbiorami danych w JS służą pętle. Pozwalają one na wielokrotne wykonywanie danego kodu z podanymi różnymi wartościami. Jest niczym pracownik przydzielony do wykonywania ciągle powtarzających się zadań. Działanie pętli jest przerywane określonym warunkiem kończącym działanie. Jej konstrukcja wygląda następująco:
for (start, warunek kończący, skok) {
//kod wykonywany dla każdej iteracji(skoku) pętli
}Wyobraź sobie, że chcesz wypisać w liście kilka elementów z tablicy, bez użycia pętli wyglądałoby to tak:
var ourTable = ["Marcin", "Ania", "Agnieszka", "Albert", "Michał", "Basia"];
ourTable[0] // => "Marcin";
ourTable[1] // => "Ania";
ourTable[2] // => "Agnieszka";
ourTable[3] // => "Albert";
ourTable[4] // => "Michał";
ourTable[5] // => "Basia";Z użyciem pętli wygląda to tak:
for (var i=0; i<6; i=i+1) {
ourTable[i] // pętla wypisze po kolei wszystkie imiona, bo za każdym razem
// zmienna i będzie większa niż 1
}- for– deklaracja pętli,
- var i = 0– licznik wykonywania pętli, początkowo jest 0,
- i < 6 – punkt końcowy, a więc pętla będzie się wykonywać od 0 do 5, bo i ma być mniejsze niż 6,
- i = i + 1– powiedzieliśmy pętli, że ma wykonywać sie od 0 do 5, co 1. To znaczy, że pętla wykona się, kiedy i będzie się równało 0, 1, 2, 3, 4 lub 5 (wykona się 6 razy, skok co 1). Gdyby było to i = i + 2 pętla wykonałaby się dla 0, 2 i 4 (wykona się 3 razy, skok co 2).
Skok zwiększa licznik o podaną wartość. Można to wytłumaczyć na przykładzie z pracownikiem. Wyobraź sobie, że dajesz komuś zadanie włożenia 10 długopisów do pudełka. Dzięki deklaracji i=i+1 mówisz mu, żeby wkładał długopis do każdego z nich, natomiast i=i+2 oznacza, że pracownik ma wkładać długopis do co drugiego pudełka.
W pętli for definiujemy zmienną, która będzie licznikiem pętli (start). W poniższym przypadku jest to zmienna i, ale to może być dowolna nazwa np. counter, licznik, j. Przyjęło się jednak zwykle stosować i. Co się zatemstanie, gdy napiszemy taką pętle:
for (var i=0; i<=5; i=i+1) {
example += i;
}Zerknij, jak to działa tutaj:
Licznik pętli zaczyna się na pozycji 0. Dalej sprawdzany jest warunek, czy i jest mniejsze lub równe 5, jeżeli tak, to kod jest wykonywany. Do zmiennej example doliczana jest zmienna i, która za każdym razem jest większa. Na koniec następuje skok, czyli i zwiększa swoją wartość o 1 (taki zabieg nazywamy iteracją i można go zapisać również w ten sposób: i++), a pętla wykonuje się kolejny raz, dopóki i nie osiągnie wartości 6. Dla całej pętli wygląda to tak:
| i | co zwraca warunek | wykonana operacja | wartość zmiennej example |
|---|---|---|---|
| 0 | 0 <= 5 / true | 0+0 | 0 |
| 1 | 1 <= 5 / true | 0+1 | 1 |
| 2 | 2 <= 5 / true | 1+2 | 3 |
| 3 | 3 <= 5 / true | 3+3 | 6 |
| 4 | 4 <= 5 / true | 6+4 | 10 |
| 5 | 5 <=5 / true | 10+5 | 15 |
| 6 | 6 <= 5 / false | brak | 15 |
Zadania
Zadanie 1
Zamień zmienne num1 i num2 na liczby tak, aby pętla wykonała się tylko 5 razy. Linia pod spodem pokazuje ile razy wykonała się pętla.
Przejdź do pierwszego zadania:
Wskazówka: Pamiętaj o tym, że pętle liczy się zazwyczaj od 0, używając więc np znaku "<" pętla wykona się o jeden raz mniej niż liczba po znaku np:
3
//kod do wykonania
}
for(var i = 0; i < 3; i++) { // Pętla wykona się 3 razy, kiedy i = 0, 1, 2
//kod do wykonania
}
Zadanie 2
Zamień zmienne num1 i num2 na liczby, tak aby odliczanie pod spodem liczyło od 0 do 10. Gdy już to zrobisz, spróbuj zmienić warunek i wartość startową zmiennej, tak aby odliczanie było odwrotne od 10 do 0.
Przejdź do drugiego zadania:
Zadanie 3
W miejsce zmiennych condition uzupełnij pętlę tak, żeby wypisała liczby od 0 do 100, ale każdy skok następował co 10, czyli 0, 10, 20, 30 itd.
Przejdź do trzeciego zadania:
Wskazówka: W razie problemów, wróć do sekcji z opisem konstrukcji for i porównaj go z inną przykładową pętlą. Za skok pętli odpowiada ostatni warunek instrukcji.
Zadanie 4
Programista często korzysta z pętli, gdy pracuje z tablicami. Spójrz na kod JavaScript do zadania 4. Znajduje się tam pętla for, a w niej metoda tablic .length zwracająca liczbę elementów tablicy.
array.length //zwraca 4
Jest to przydatne, ponieważ nie musimy ręcznie liczyć, ile elementów ma tablica i wpisywać, tej liczby do warunku. Może nie widać tego tak dokładnie przy tablicy z czterema elementami, ale gdyby było ich 500 lub więcej, różnica byłaby dużo bardziej zauważanla. Przy korzystaniu z tej metody, należy jedynie pamiętać, że zwraca ona długość tablicy licząc od 1, a same indeksy są liczone od 0. Patrząc na zmienną powyżej, ostatni element tablicy jest jej czwartym elementem, ale ma indeks 3.
Uzupełnij warunki podanej pętli tak, aby pod spodem wyświetlały się wszystkie elementy tablicy.
Przejdź do czwartego zadania:
Wskazówka: Jeżeli nie wiesz, jak korzystać z metody length, spójrz na wzór w komentarzu do tego zadania.
