JavaScript: Przerywanie lub kontynuacja pętli

0:00W tej lekcji pokażę Ci jak działa

0:02przerywanie lub kontynuacja pętli i będzie to miało zastosowanie do wszystkich

0:06rodzajów pętli, jakie do tej pory pokazałem.

0:08Więc wyobraź sobie sytuację, w której

0:09chcielibyśmy wyświetlić liczby od 0 do 20, ale tylko liczby parzyste.

0:15Zrobilibyśmy sobie taką pętlę for, gdzie utworzyli byśmy zmienną i równa się zero.

0:20Chcemy iterować tak długo jak jest

0:21mniejsza lub równe 20 i następnie zwiększamy wartość i.

0:25Czyli standardowa pętla. Ale w środku

0:27musielibyśmy zrobić sobie warunek jeżeli i modulo z 2,

0:32to też Ci pokazywałem już w tym kursie, jest równe 0

0:35to oznacza, że mamy do czynienia z liczbą parzystą.

0:37Wówczas tylko wtedy chcemy

0:40wyświetlić taką liczbę, a więc będziemy w ten sposób pomijać liczby nieparzyste.

0:45Zobaczmy, jak nam się ułoży

0:46w przeglądarce. Rzeczywiście wyświetliliśmy

0:48tylko liczby parzyste. I z tym kodem nie ma nic złego.

0:51Wszystko jest w porządku. Ale chcę Ci pokazać, jak działa słowo

0:54continue po to, żeby można było kontynuować pętlę, nie

0:58wykonując kodu, który jest w niej poniżej, ale też nie zatrzymując tej pętli.

1:03Czyli ten przykład moglibyśmy zrobić troszeczkę inaczej, a więc zawsze

1:07wyświetlać i to by nam wyświetliło wszystkie liczby,

1:11ale sprawdzać tutaj w warunku, czy liczba jest parzysta, odwrócimy sobie ten warunek.

1:16Jeżeli liczba nie jest parzysta, to chcemy

1:19kontynuować pętlę. I wpisujemy tutaj słowo continue dokładnie w ten sposób.

1:24To jest słowo, które będzie działać tylko wewnątrz pętli i ono oznacza tylko tyle,

1:28że jak dojdziemy do tego momentu, to znaczy, że ten warunek się wykona,

1:32mamy do czynienia z liczbą nieparzystą, to mówimy kontynuuj, czyli nie wykonuj

1:36żadnego kodu, który jest poniżej w tym bloku, ale przejdź do kolejnej iteracji

1:40pętli. Czyli w praktyce będzie to działać dokładnie tak samo i czasami to jest

1:44bardzo przydatne z tego powodu, że tutaj mieliśmy przykład gdzie tu był console.log,

1:48czyli jedna linijka, ale czasami tego kodu w pętli będzie znacznie więcej i jak go

1:52oplatamy takim if to on staje się trochę mniej czytelny.

1:55Natomiast możemy cały ten kod zawrzeć tutaj.

1:57To może być dużo tego kodu, a na samym początku zrobić sobie jakieś sprawdzenie

2:01i jeżeli tu będzie warunek fałszywy to kontynuujemy, czyli pomijamy cały ten kod

2:06dla tej iteracji. Więc to już zależy od konkretnego przypadku.

2:09Niemniej jednak tak działa słowo continue.

2:11Zobacz, że efekt jest dokładnie ten sam. Czyli jak napotkamy słowo continue to się

2:16wykona to nie wykonujemy kodu poniżej, ale przechodzimy do kolejnej iteracji pętli.

2:21Drugim słowem, z którego można skorzystać

2:23w pętli jest break i ono sprawia, że przerywamy całkowicie działanie pętli,

2:27czyli nie wykonujemy kodu, który jest poniżej, ale także nie przechodzimy już do

2:31kolejnej iteracji. I będę chciał Ci to pokazać na praktycznym przykładzie.

2:35Utworzymy sobie taką tablicę numbers, gdzie będziemy mieli jakieś liczby np.

2:382, 3, 6, 100, 0 i powiedzmy 52 i 11

2:44i chciałbym napisać taki kod, który sprawdzi mi czy w tej tablicy znajduje się 0.

2:48I od razu Ci powiem, że to można zrobić w bardzo łatwy sposób w języku JavaScript

2:52pisząc po prostu numbers czyli odwołując się do tej tablicy

2:56i następnie includes 0 i to nam już zwróci true lub false

2:59ale ja chcę Ci to pokazać na innym

3:01przykładzie po to, żeby pokazać Ci jak działa break, z którego

3:04jednak możesz korzystać w bardzo wielu różnych sytuacjach.

3:07Teraz sobie zrobimy pętlę for of, czyli możemy powiedzieć let number

3:13of numbers, a więc pod number będziemy mieli kolejno 2, 3, 6 itd.

3:18I chciałbym jeszcze sobie tutaj utworzyć

3:19taką zmienną jak containsZero, czyli czy ta tablica zawiera 0.

3:25Ustawmy to na false. Czyli na początku mówimy, że nie zawiera zera.

3:29I chciałbym teraz iterować po całej tej tablicy i w momencie jeżeli natrafimy na 0

3:33to tutaj chciałbym przypisać true i przerwać działanie tej pętli, bo nie ma

3:37sensu dalej sprawdzać czy 52 jest równe 0 czy 11.

3:41Jak dotarliśmy do zera to nasz kod już

3:43można powiedzieć, że powinien się zakończyć.

3:45Jak to zrobimy?

3:47Zrobimy sobie tak jeżeli number równa się 0 to chcemy powiedzieć contains 0 równa się

3:54true i następnie break. Coś takiego chciałbym zrobić.

3:58A przy okazji możemy również tutaj poniżej

3:59wyświetlić sobie number, żeby zobaczyć w konsoli co się dzieje.

4:03Zobaczmy.

4:04Ok, wyświetlił nam się jakiś błąd. Tutaj powinienem tą stałą nazwać poprawnie.

4:11OK i może jeszcze sobie wykomentujmy to, żeby nam się nie mieszały te wszystkie console.log

4:16Zauważ, że dokładnie to zadziałało, czyli

4:18wyświetliliśmy 2, 3, 6 i 100 bo one się nie równały 0,

4:22w kolejnej iteracji już wykonał się ten kod,

4:25czy number jest równe 0?Tak

4:27Ustaw containsZero na true i break.

4:29Jeżeli bym nie zrobił tego breaka to

4:31sprawdzali byśmy dalej, czyli sprawdzali byśmy 52 i 11.

4:35A nie ma sensu tego robić skoro już osiągnęliśmy swój cel.

4:38I teraz jeżeli sobie podejrzymy containsZero mamy tutaj wartość true.

4:43Zatem z tej lekcji zapamiętaj, że słowo

4:45kluczowe continue wewnątrz pętli sprawia, że kod poniżej się nie wykonuje i

4:49przeskakujemy do kolejnej iteracji tej pętli,

4:51natomiast break użyte w dowolnym miejscu w pętli sprawia, że również kod poniżej się

4:56nie wykonuje, ale pętla zostaje zatrzymana i wyskakujemy

5:00w to miejsce.

5:00Gdyby tutaj był jakiś kod, wykonywał by się on dalej.