JavaScript: Pętla for

0:00Kolejna pętla to pętla for.

0:02Chyba najpopularniejsza we wszystkich językach programowania.

0:05W JavaScript wygląda ona następująco.

0:07Piszemy sobie for i tutaj będziemy musieli

0:09podać trzy wyrażenia oddzielone średnikiem, a następnie blok kodu, który

0:14chcemy wykonywać tak długo jak tutaj warunek będzie spełniony.

0:17I teraz na początku podajemy wyrażenie

0:19inicjujące, czyli takie, gdzie możemy sobie utworzyć np.

0:22jakąś zmienną.

0:23Zazwyczaj podaje się to na takim przykładzie zmiennej i, natomiast my tutaj

0:27tworząc zmienną oczywiście możemy ją nazwać w dowolny sposób.

0:30Czyli powiemy sobie let i równa się 0

0:33i to jest coś, co wykona się tylko raz.

0:35A więc ta pętla for na początku wykona to

0:37wyrażenie, utworzy taką zmienną i do tego miejsca już wracać nie będzie.

0:41Następnie podajemy warunek tak jak np. było w

0:44przypadku pętli while. Czyli jak długo ma się wykonywać ta pętla.

0:48Tak długo jak i jest mniejsze od 10 możemy

0:51zrobić sobie coś takiego i to będzie sprawdzane za każdym razem,

0:55kiedy pętla będzie miała się wykonać i podajemy po średniku

0:59ostatnie trzecie wyrażenie to wyrażenie będzie wykonywane po obrocie takiej pętli.

1:04Więc chcemy tutaj zwiększyć wartość tego i.

1:06Ale moglibyśmy równie dobrze napisać i+ równa się 1 albo i równa się i + 1.

1:13To jest po prostu dowolne wyrażenie JavaScript,

1:14więc możemy je najkrócej zrobić w ten sposób.

1:18A więc jeszcze raz jak ta pętla się będzie rozpoczynać, to się wykona raz utworzy nam

1:22zmienną i, następnie sprawdzi czy i czyli 0 jest mniejsza od 10.

1:26Tutaj po prostu musi być podstawione true

1:28lub false albo wyrażenie takie, które ewaluuje do prawdy

1:32lub fałszu, a więc wartość prawdziwa lub fałszywa.

1:35Zatem wiemy, że ten operator to nam porówna i zamieni na true lub false.

1:40Czyli to jest sprawdzane

1:41następnie i jeżeli okaże się, że tutaj jest wartość prawdziwa, wykonamy kod, który

1:46jest tutaj, a ja chcę po prostu wyświetlić w konsoli wartość i

1:50i po wykonaniu tego kodu, którego to może być więcej, wskakujemy do trzeciego

1:53wyrażenia zwiększamy i o 1, czyli i będzie miał wartość 1.

1:58Tego już nie ruszamy.

2:00Znowu pętla sprawdza warunek czy 1 jest mniejszy od 10. Tak.

2:03Wykonaj ten kod i następnie przeskocz tutaj.

2:06W pewnym momencie ten warunek zwróci false

2:08i wtedy zakończymy pętle i będziemy kontynuować dalszy kod.

2:12Więc mam nadzieję, że to jest jasne.

2:13To się wykonuje raz na początku, to przed

2:15każdym obrotem pętli, a to po obrocie pętli.

2:18Zobaczmy, wypisaliśmy sobie wartości od zera do dziewięciu.

2:23Pętla for również bardzo często jest wykorzystywana przy iteracji po tablicach,

2:27aczkolwiek w JavaScript można to robić również w inny, prostszy sposób.

2:30Ale spróbujmy sobie utworzyć jakąś tablicę

2:32arr, która będzie miała tutaj kilka wartości, powiedzmy 1, 100, 55

2:40wystarczy tyle.

2:41I tak samo jak zrobiliśmy wyżej, możemy utworzyć podobną pętlę.

2:45Tutaj natomiast warunkiem nie będzie już,

2:47że mniejsza od 10, ale mniejsza od arr.length, czyli odwołamy się dynamicznie do

2:52tego ile jest elementów w tablicy, w tym przypadku

2:54tutaj trójka byłaby podstawiona i skoro pod i mamy 0, 1, 2 bo takie będą tutaj

3:00wartości to możemy odczytać sobie odpowiednią komórkę tablicy

3:04pisząc arr i wiesz, że do tablicy po indeksach się można odwoływać np.

3:080, 1 itd.

3:09więc skoro pod i mamy dokładnie takie wartości możemy to tutaj podstawić.

3:13W ten sposób jak widzisz wypisaliśmy 1, 100 i 55

3:17czyli przeiterowaliśmy po wszystkich elementach tej tablicy.

3:20Co natomiast tutaj w tym kodzie będziemy z tymi elementami robić

3:23to już jest zupełnie inna historia.