Podstawy Programowania: Sortowanie elementów tablicy

0:00W tej lekcji pokażę Ci jak możemy

0:02sortować elementy tablicy bo jest to również operacja bardzo popularna w przypadku

0:06programowania, natomiast niestety musimy troszeczkę wybiec w przyszłość i będę musiał

0:10pokazać Ci jak wyglądają funkcje a o funkcjach jeszcze powiemy sobie później

0:15więc tutaj znowu jest ten moment kiedy nie jestem w stanie tego pokazać bez

0:18pokazywania funkcji a chciałem żeby to się znalazło w rozdziale o tablicach więc w

0:22razie czego wróć sobie tutaj jeszcze po przerobieniu lekcji o funkcjach.

0:26Od czego zaczniemy. Mamy dwie tablice. Pierwszą pod stałą arr

0:30i są tutaj same liczby a drugą mamy pod stałą arr 2 i są tutaj jak widzisz

0:35imiona wszystkie z wielkiej litery i jedna z małej litery.

0:39Wrócimy do tej drugiej tablicy za chwilę.

0:42Na razie zajmiemy się tą pierwszą.

0:44Będziemy chcieli ją posortować a więc chciałbym aby liczby były tutaj poukładane

0:48od najmniejszej do największej. I pokażę Ci w jaki sposób to zrobić.

0:52Robimy to za pomocą metody,

0:54jak widziałeś w poprzedniej lekcji metody

0:56to jest coś do czego się odwołujemy po kropce czyli jak się odwołam do

1:00arr to jest tak jakbym się odwołał do tej tablicy,

1:03i ona ma taką metodę jak sort. Jeżeli podamy samo sort w ten sposób

1:08nic tutaj szczególnego nie zrobimy i wyświetlimy sobie tą tablicę,

1:13zauważ, że ona od razu jest posortowana ale nie tak jakby się mogło wydawać.

1:18Nie do końca poprawnie bo została jakby posortowana alfabetycznie ale wszystkie te

1:23wartości zostały potraktowane tak jakby to były wartości typu string.

1:27Dlaczego.

1:28Dlatego że mamy 1:1 ale potem mamy 18 bo została wzięta jakby tylko ta jedynka.

1:33I zostało to alfabetycznie posortowane, potem dwójka itd.

1:37A my chcemy to posortować mając nad tym jakąś kontrolę. I pokażę Ci jak to zrobić.

1:42Otóż tutaj zostawimy sobie to do tej funkcji, do tej metody sort

1:47możemy przekazać funkcję anonimową,

1:50tak jak wspomniałem o funkcjach dokładnie będę mówił później,

1:53wygląda to tak, że przekazujemy tutaj funkcję i ta funkcja

1:57sama w sobie jest też pewnego rodzaju strukturą w języku programowania.

2:02I ta funkcja otrzyma na etapie tego sortowania

2:07parametry. Poszczególne elementy będzie to a i b.

2:11Możemy to nazwać dowolnie, możemy to nazwać

2:14powiedzmy element 1 i element 2 bo to jest tak jakbyśmy sobie tworzyli pewnego

2:18rodzaju zmienne więc sami to nazywamy jak chcemy,

2:21ale ważne, że tutaj muszą być dwa elementy.

2:24I przy takim sortowaniu pod a zostanie

2:26umieszczona na początku piątka, pod b zostanie umieszczona ósemka.

2:30My tutaj wykonujemy jakąś operację,

2:33musimy zwrócić z tej funkcji o czym za moment 0, -1 lub 1 i później jakby

2:39cała ta metoda przechodzi do kolejnej iteracji tak zwanej i podstawi dwa

2:43kolejne elementy pod a i b i znowu na nich trzeba będzie wykonać jakąś operację.

2:48Więc tutaj będziemy chcieli tak jak

2:50wspomniałem zwrócić z tej funkcji 0, -1 lub 1

2:53ale najpierw musimy zrobić sobie jakieś porównanie. Więc tutaj stworzymy sobie

2:56instrukcję warunkową i powiemy, że jeżeli a jest mniejsza od b

3:01takie instrukcje warunkowe już znasz to jeżeli a jest mniejsza od b to chcemy

3:06zwrócić z funkcji a robi się to specjalnym słowem kluczowym return,

3:09jeszcze później w odpowiednim rozdziale będę to bardzo dokładnie tłumaczył,

3:13chcemy zwrócić -1. Czyli tak jak wspomniałem jeżeli pod a wpadnie nam 5, pod b wpadnie

3:19nam 8 to sprawdzimy czy 5 jest mniejsze od 8,

3:22tak, zwróć -1 i to oznacza, że tą pierwszą

3:26wartość chcemy umieścić w tablicy przed tą drugą wartością.

3:30Później przejdziemy do kolejnej jakby do kolejnego sprawdzenia i zostanie pod a

3:35podstawione 8 a pod b zostanie podstawione 1.

3:38Więc sprawdzimy czy 8 jest mniejsza od 1,

3:41nie, więc trzeba będzie zwrócić jedynkę aby ósemkę umieścić za tą kolejną wartością.

3:48Więc tutaj musimy sobie zrobić else if i

3:51sprawdzić, jeżeli a jest większe od b to zwróć jedynkę tak jak wspomniałem.

3:56Natomiast w przeciwnym wypadku znajdziemy się tylko jeżeli a będzie równe b

4:01i wtedy chcemy zwrócić 0 mówiąc nie przestawiaj kolejności tych elementów.

4:05Ja to zapisze i zauważ, że ta tablica została poprawnie posortowana,

4:09natomiast jeszcze na sekundkę sobie to prześledźmy.

4:12Czyli tak jak wspomniałem na początku piątka wpadnie a, ósemka pod b, czyli na

4:16tym etapie w naszym programie to jest tak jakbyśmy mieli zmienną a i b

4:20i jedna przechowuje piątkę druga ósemkę. Czy 5 jest mniejsza od 8?

4:23Tak. Zwróć -1 żeby piątka była

4:26przed ósemką. Następnie podstawiona zostanie ósemka i jedynka.

4:30Czyli tu będzie 8 tu 1. Sprawdzimy czy 8 jest mniejsze od 1.

4:34Nie jest. Więc sprawdzamy dalej.

4:36W takim razie czy 8 jest większa od 1.

4:39Tak. Zwróć jedynkę aby to 8 zostało na prawą stronę przeniesione.

4:44No i tak to będzie wyglądać aż zostanie cała ta tablica posortowana

4:48i na tym etapie w naszym kodzie mamy dokładnie tę samą tablicę ale ona jest już

4:52po kolei posortowana i pod indeksem 0 czyli tak naprawdę pierwszym już nie

4:56będzie miała piątki ale będzie miała jedynkę.

4:59Gdybyśmy w jakiś sposób później chcieli te liczby

5:01kolejno wyświetlać no to wiemy, że są one już odpowiednio posortowane.

5:05Teraz przejdziemy dalej. Będę chciał Ci

5:07pokazać, że możemy sortować również ciągi znaków i jak skorzystaliśmy z tego sort i nie

5:12przekazaliśmy żadnej funkcji to właśnie domyślnie tak to zostało posortowane.

5:16Więc jeżeli tą drugą tablicę chciałbym

5:18posortować odpowiednio to może to wykomentuje żeby się nam nie

5:22wyświetlało, to zrobimy sobie najpierw console.log arr2.

5:25Widzimy jak ta tablica wygląda i następnie będę chciał ją posortować.

5:29Napiszę arr2.sort i następnie ją będę chciał wyświetlić żeby

5:34zobaczyć jak została posortowana. I okazuje się, że ona automatycznie została

5:38bez podawania tutaj czegokolwiek posortowana alfabetycznie ale mamy tutaj taki problem,

5:44że Anita została tutaj umieszczona na końcu dlatego, że jest tutaj

5:49brana pod uwagę wielkość liter. A chcielibyśmy żeby Anita

5:53nie była traktowana jakoś inaczej z tego powodu, że nie ma tutaj wielkiej litery.

5:57Więc pokażę Ci jak możemy znowu ręcznie nad tym zapanować. Podamy funkcję gdzie

6:02znowu wpiszemy sobie a i b i na początku pod a wpadnie

6:06anita pod b wpadnie Tomek i znowu z tej funkcji będziemy chcieli zwracać -1, 1 albo 0.

6:14Jak będziemy mogli porównać

6:16czy dwie wartości powinny być przestawione czy nie.

6:20Czyli jak one się do siebie mają.

6:23Do tej pory nie pokazałem Ci jednej rzeczy

6:25bo pokazałem Ci taki operator porównania, który nam porównywał liczby ale

6:29nie wspomniałem, że on potrafi porównywać również ciągi znaków.

6:32Czyli jeżeli pod a byśmy przedstawili Anita a pod b byśmy postawili Tomek

6:36to ten operator nam po prostu zwróci true lub false. Czy w alfabecie wcześniej jeżeli

6:42byśmy startowali alfabetycznie powinno wystąpić

6:44a czy b.

6:46Więc zobaczmy.

6:47Może ja to jeszcze tylko pokażę na takim

6:50jednym przykładzie tutaj na samym dole żebyś był pewny o czym ja mówię.

6:54Jeżeli zapytamy czy a jest mniejsza od b to nam zwróciło true.

6:58To znaczy, że alfabetycznie to powinno być

7:00wcześniej, natomiast jeżeli byśmy zapytali czy b jest większa od a zwróci nam false, a

7:05więc ten operator on zawsze zwraca true lub false ale zauważ, że potrafi pracować nie

7:09tylko na liczbach ale również na ciągach znaków.

7:13Więc tutaj będziemy chcieli sobie to

7:15sprawdzać podobnie jak robiliśmy to tutaj wyżej.

7:18Natomiast z jednym zastrzeżeniem. Bo jeżeli to po prostu skopiuje

7:22to nadal nam to zadziała dokładnie tak samo jak wcześniej bo bierze pod uwagę wielkość

7:27liter. Czyli niestety dla tego sprawdzenia a

7:32czy jest mniejsze od A zwraca false.

7:34Zauważ, że wygląda to w ten sposób.

7:38Więc tu musimy zrobić jedną rzecz aby wszystkie wartości tej tablicy traktować

7:42tak samo to musimy albo wszystkie zamienić na wielkie litery żeby tutaj nie było

7:47np.

7:47anita tylko w ten sposób ANITA, Tomka byśmy zamienili tak samo itd.

7:53Wtedy mamy pewność, że są te wartości traktowane tak samo no albo wszystkie

7:56byśmy musieli zamienić na małe litery żeby to wyglądało w ten sposób.

8:00I możemy to zrobić dynamicznie.

8:01A więc jeżeli pod a na początku zostanie podstawiony Anita

8:05to będę chciał nadpisać wartość tej zmiennej bo jest to taka lokalna zmienna

8:10i odwołam się do tego a jest to Anita i na wartościach tekstowych mamy takie

8:15specjalne metody jak na przykład toLowerCase.

8:18Działa to w ten sposób, że jeżeli na Anita wywołany toLowerCase

8:22to zamienimy to na małe litery no i w tym przypadku nic się kompletnie

8:26nie zmieni. Wartość b też będę chciał nadpisać na b.toLowerCase

8:32I jeżeli pod b zostanie podstawiony Tomek to

8:35jeżeli na wartości Tomek zrobimy LowerCase to zamieni nam to na właśnie taką wartość.

8:40Czyli po prostu będzie to wartość z małej litery.

8:44Wszystkie litery będą małe, wszystkie zostaną zamienione na małe

8:48i teraz te wartości nadpisaliśmy, można powiedzieć znormalizowaliśmy. Teraz

8:51nieważne czy to zostanie przekazane Anita wielkimi literami czy małymi zawsze to

8:55zamieni na małe i podobnie zrobimy z Tomkiem i z każdą kolejną wartością.

8:59I jeżeli teraz będziemy porównywać te wartości zauważ, że one zostały już

9:03poprawnie posortowane. Mamy Andrzej, Ania, Anita itd.

9:07To nie zmienia naszej tablicy więc to nie jest tak, że w tej tablicy teraz Anita jest

9:11małymi literami czy inne nie bo my to zmieniliśmy

9:14tak naprawdę tylko tutaj na potrzeby tego

9:16porównania i zwróciliśmy tak jak wcześniej -1, 1 lub 0.

9:21Ja wiem, że na początku może to się wydawać

9:22wszystko skomplikowane ale staram się to tłumaczyć najdokładniej

9:26jak potrafię w razie czego wracać do tych lekcji.

9:28Niemniej jednak zapamiętaj, że w przypadku

9:30sortowania tablic tutaj możesz mieć dowolną logikę, sortować to na bazie

9:35jakiejś swojej logiki tak jak chcesz ale zawsze musisz zwrócić -1 jeżeli

9:38chcesz aby ten pierwszy element był przed tym drugim, 1 jeżeli mają zostać

9:43zamienione kolejnością i 0 jeżeli kolejność ma pozostać taka sama. No i na

9:47końcu jak widzisz pokazuje nam tutaj posortowaną poprawnie tablicę.