Podstawy Programowania: Używanie pętli na tablicach

0:00Wiesz już jak działa pętla for.

0:02I teraz pokażę Ci jak tę wiedzę można wykorzystać aby iterować po elementach

0:06tablicy. Więc ja będę chciał sobie utworzyć taką stałą o nazwie numbers gdzie

0:11będziemy mieli tablicę i wiesz, że tablice tworzy się tak i ona będzie miała jakieś sześć

0:15liczb. Powiedzmy, że są to liczby wylosowane np.

0:18w dużym lotku. Zapiszemy 2, 3 może 17, 32, 28 i 9.

0:26Zrobimy to w ten sposób i teraz będziemy chcieli kolejno te liczby wyświetlić.

0:30Najpierw pokaże Ci to na prostym przykładzie a potem go sobie troszeczkę

0:33jeszcze doszlifujemy aby dawało nam to fajny komunikat. Więc teraz chcielibyśmy w

0:38konsoli wyświetlić po kolei wszystkie te liczby.

0:41No i do tej pory ja Ci pokazałem jeżeli

0:43byśmy zrobili console.log odwołam się do tej tablicy numbers i podam indeks zero,

0:48to wyświetli mi to dwójkę prawda, bo tutaj jest dwójka pod indeksem zero potem 1, 2, 3,

0:544, 5 czyli jak podam 5 to mi powinno zwrócić

0:58dziewiątkę, dokładnie tak. Więc teraz

1:00gdybyśmy sobie stworzyli taką pętlę gdzie będziemy mieli zmienną i, która będzie

1:04przyjmowała wartości 0, 1, 2, 3, 4, 5 i te wartości byśmy podstawiali tutaj pod numbers to byśmy

1:10mogli sobie właśnie wyświetlić wszystkie liczby po kolei.

1:13No i można to bardzo łatwo zrobić z użyciem pętli for

1:17na takim przykładzie jak mieliśmy w lekcji

1:18poprzedniej czyli robimy sobie for i inicjujemy

1:21można powiedzieć nasz świat na początku.

1:23Czyli mówimy, że i ma przyjąć wartość zero. To jest to pierwsze wrażenie, które na samym

1:28początku wykonywania pętli będzie raz wywołane.

1:32Następnie podajemy wyrażenie, które będzie nam ewoluowało do prawdy lub fałszu po to żeby

1:36pętla wiedziała czy ma wykonywać kod w niej zawarty czy nie.

1:39Więc będziemy chcieli wykonywać tą pętlę tak długo jak i będzie mniejsze od,

1:45no właśnie od czego?

1:46Chcielibyśmy to wykonać tyle razy ile jest elementów w tablicy czyli 1, 2, 3, 4, 5, 6.

1:52Skąd to wziąć. Ja to na sekundę wykomentuję i przypomnę Ci,

1:56że jak mamy tablicę i odwołały się do numbers czyli do tej tablicy i do

2:00właściwości length to to nam zwraca dokładnie ile elementów jest w tej tablicy.

2:04Czyli mamy tutaj sześć.

2:06A więc jeżeli ja chciałbym napisać, że ta pętla ma się wykonać sześć razy

2:11to oczywiście mógłbym tutaj wpisać na sztywno sześć,

2:14no ale to nie ma sensu dlatego, że jak tutaj

2:16dodamy siódmy element to ta pięta nam ostatniego elementu nie wyświetli.

2:19Więc tutaj możemy dynamicznie się odwołać do numbers length

2:23i to będzie nasz warunek. Czyli będziemy sprawdzać na początku czy i a więc zero

2:28jest mniejsza od 6 w tym przypadku zostanie zwrócone 6.

2:31Tak, więc wykonaj kod, który tam jest zawarty. I potem będziemy chcieli po prostu

2:35zwiększać i, tak jak w lekcji poprzedniej. A tutaj będziemy chcieli robić console.log,

2:41no właśnie i co.

2:42Nie będziemy chcieli wyświetlać tak jak w

2:44lekcji poprzedniej i, bo wtedy byśmy sobie wyświetlili liczby od zera do pięciu.

2:49Nie ma to tutaj sensu, natomiast chcemy się

2:51odwoływać do tej tablicy. Czyli jeszcze raz przypomnę skoro możemy napisać numbers 0 i

2:56to nam da pierwszy element tablicy, numbers 1 da nam drugi element, to skoro pod

3:00i za każdą iteracją mamy 0, 1, 2 to właśnie to i postawimy sobie tutaj.

3:07Zróbmy to w ten sposób.

3:08A więc console.log odwołuje się do numbers

3:11i podaje zmienną i. Teraz jeżeli zapisze tutaj może jeszcze

3:16wyczyszczę żebyśmy to zobaczyli i jeszcze raz zapisuje, program się wykonał,

3:20zauważ, że on nam wyświetlił po kolei wszystkie liczby jakie mieliśmy w tej

3:24tablicy. Więc prześledzimy jeszcze raz na sekundę. Na początku i ma wartość 0.

3:29Sprawdzamy czy i jest mniejsze od długości

3:32tej tablicy w tym przypadku od sześciu. I jest mniejsza od sześciu

3:36więc robimy console.log i odwołujemy się do numbers podstawiając i, czyli numbers 0.

3:41To nam zwraca dwójkę i przekazuje do console.log, ta dwójka się tutaj wyświetliła,

3:47zwiększa licznik o 1 więc teraz zmienna i ma wartość 1.

3:52Sprawdzamy czy 1 jest mniejsza od 6.

3:54Tak, więc znowu tutaj do numbers podstawiami i czyli jedynkę.

3:59A jak powiemy numbers 1 to zwróci nam trójkę i tak będziemy robić aż do końca.

4:04W pewnym momencie i zostanie zwiększone do wartości 7

4:08i jeżeli tutaj sprawdzimy czy i jest mniejsze od 7 a

4:12w zasadzie od 6 więc czy 7 jest mniejsza od 6, nie, a więc już

4:16nie wykonuj tego kodu tylko wyskocz tutaj.

4:19Mam nadzieję, że teraz to widzisz i jak

4:21fajnie połączyliśmy sobie wiedzę z zakresu tablic, zakresu zwracania

4:25tego ile tablica ma elementów i tego jak po indeksach można się odwoływać do

4:29tablic. No i połączyliśmy to wszystko z pętlą for. Teraz Ci pokaże, że ten przykład

4:34możemy jeszcze sobie troszeczkę dopieścić żeby nasz program fajniej wyglądał.

4:37Tutaj jeszcze raz wyczyszczę.

4:39Będę chciał wyświetlić coś takiego jak wylosowane liczby to i chciałbym żeby te

4:45liczby były po przecinku pokazane tak jak są w tej tablicy. Więc utworzymy sobie

4:50tutaj zmienną tekst, tak ją po prostu nazwę i napiszemy wylosowane

4:55liczby to, podamy dwukropek i spację

4:59i teraz do tego ciągu będę chciał doklejać 2, 3, itd.

5:04Bardzo łatwo to będziemy mogli zrobić zamiast tutaj robić console.loga to odwołamy

5:08się do tekst i za pomocą operatora Plus równa się tak jak Ci pokazałem, że można

5:14zwiększyć wartość jakiejś liczby to tak samo możemy dokleić kolejny tekst.

5:19Oczywiście tu moglibyśmy to zrobić dłuższą wersją czyli chcę nadpisać zmienną tekst

5:23tym co już tam jest i do tego chciałbym jeszcze coś dokleić.

5:27Ale dokładnie tak samo można zrobić pisząc plus równa się.

5:30To oznacza, że chce zmienić wartość zmiennej tekst dodając do niej coś czyli

5:35jeżeli tam jest wylosowane liczby to i tu napisze jeden to dokleimy tutaj jedynkę. W kolejnej

5:40iteracji do tego wylosowane liczby to 1 dokleimy kolejną cyfrę. I teraz odwołamy się

5:46tutaj po prostu do numbers i, czyli to co przed momentem było w consol.log

5:50I na końcu będziemy chcieli jak się już ta pętla zakończy,

5:53zauważ ona będzie kręcić tyle razy ile tutaj ten warunek jest poprawny

5:57i dopiero potem wyskoczymy poza pętle i będziemy wiedzieli, że ta zmienna tekst

6:01jest już uzupełniona i będziemy mogli ją wyświetlić aby ją po prostu zobaczyć.

6:05I będzie to wyglądać tak.

6:07Wylosowane liczby to,

6:08no i zostały one wszystkie połączone w taki sposób, że nie jest to zbyt czytelne.

6:13Natomiast teraz Ci pokaże co możemy zrobić żeby to było czytelne.

6:16Możemy do tego tekstu

6:20tutaj dodawać jeszcze przecinek i spację.

6:24Czyli tutaj dokleiliśmy na początku np.

6:27dwójkę czyli będzie wylosowane liczby to

6:29dwa, doklejamy przecinek i spację i teraz to wygląda następująco.

6:33Jest to już bardziej czytelne ale mamy jeszcze taki problem, że za ostatnim

6:38elementem jest przecinek a tego przecinka tutaj nie chcemy więc teraz Ci pokaże jak

6:42możemy połączyć tą wiedzę, którą już masz a więc korzystać wewnątrz pętli jeszcze z

6:46instrukcji warunkowej aby warunkowo doklejać ten przecinek i spację.

6:50Jaki tutaj powinniśmy postawić warunek. Powinniśmy powiedzieć, że jeżeli nie

6:55jesteśmy na ostatniej iteracji tej pętli to tylko wtedy chcemy to dokleić.

7:00Więc jak możemy to zrobić. Tutaj zrobię trochę miejsca żebyśmy na samym if się skupili.

7:04Możemy zapytać

7:06czy w zasadzie powiedzieć, że chcemy dokleić to tylko jeżeli wartość i, która na początku

7:12będzie miała wartość zero a na końcu będzie miała wartość

7:16w tym przypadku 5 bo tu jest 6 elementów jak zaczynamy od zera to będzie 5 więc tak

7:20długo jak i nie jest równe długości tej tablicy,

7:23a jak to sprawdzić?

7:24Dokładnie tak samo jak tutaj czyli numbers.length

7:29tak długo jak i nie jest równe 6 w tym przypadku

7:35to chcemy dokleić

7:38taki tekst. I to jeszcze do końca nam nie zadziała.

7:41Zobacz jeszcze nam nie zadziałało dlatego, że tu musimy jeszcze odjąć jeden.

7:45Bo tak jak wspomniałem przy ostatniej iteracji i będzie miało

7:49wartość 5 a numbers.length zwraca nam 6. Czyli tutaj chcielibyśmy podstawić piątkę

7:55dlatego odejmiemy sobie jeszcze jeden. Zapisze i teraz to wygląda tak jak byśmy chcieli

8:00wylosowane liczby to 2, 3, 17, 32, 28 i 9.

8:04I tu tego nie dokleiliśmy.

8:06Więc to już jest troszkę bardziej rozbudowany przykład ale mam nadzieję, że

8:09widzisz jak działa. Iterujemy tyle razy ile jest elementów w tablicy, za

8:13każdym razem dodajemy liczbę do tego ciągu znaków doklejamy ją po prostu tutaj i za

8:18każdym razem w tej pętli również sprawdzamy. Na początku i ma wartość 0 więc

8:23sprawdzamy czy i a więc czy 0 nie jest równe

8:26numbers.length to jest 6

8:29minus 1 to da nam 5.

8:32Tutaj byśmy mieli podstawione zero

8:34i pytamy czy zero nie jest równe 5.

8:36Nie jest. To doklej i do tego ciągu jeszcze przecinek i spację. Na którymś etapie

8:41tutaj i będzie już miało wartość 5, tutaj to tak

8:45zostawimy, dlatego tego nie dokleimy i będzie to właśnie przy ostatniej iteracji. A więc tak można

8:50wykryć wewnątrz pętli czy jesteśmy już na jej ostatnim kroku czyli w ostatniej

8:54iteracji. Zapisuje i wszystko działa tak jak należy. Więc mam nadzieję, że zobaczyłeś

8:59jak tą wiedzę powolutku możemy łączyć w całość, wykorzystaliśmy i tablicę i tekst

9:05czyli string i łączenie tekstu i pętla for

9:09i dodatkowo jeszcze instrukcję warunkową po to aby stworzyć taki program, który

9:13wyświetla nam ładnie wylosowane liczby. I co ciekawe on jest dynamiczny w tym sensie,

9:18że możemy tutaj dodać kolejną liczbę taką jak 100.

9:20Jeżeli zapiszemy to mamy pewność, że wszystko zostanie poprawnie wyświetlone.

9:25Za tym 100 nie ma przecinka itd.

9:27I na tym to właśnie polega, że program jest dosyć ogólny.

9:29On tutaj nie wpisuje nic na sztywno, że tu

9:32jest 5 elementów i tak dalej Wszystko jest wyliczane dynamicznie a jedynie zmieniają

9:36się te dane wejściowe, które możemy wpisać sobie tutaj.