JavaScript: Sortowanie tablic

0:00Teraz pokażę Ci, w jaki sposób możemy

0:02sortować elementy tablicy. Więc jeżeli będziemy mieli tablicę, w której będą np.

0:06liczby, będzie 10, 2, 5, 39, 1 i np. 100

0:12i chcielibyśmy je posortować, aby tutaj były np.

0:14od liczby najmniejszej do największej, to możemy zrobić to metodą sort.

0:19Czyli wyświetlimy sobie tę tablicę, a następnie zrobimy arr.sort.

0:24I to nam modyfikuje tablicę, na której wykonaliśmy właśnie takie sortowanie

0:29i możemy jeszcze raz później zrobić sobie console.log arr.

0:32Zobaczmy jak to się zmieni.

0:34Zauważ, wygląda to w ten sposób. I nie

0:36jest to sortowanie jakie nas by satysfakcjonowało.

0:39Z jakiego powodu?

0:40Otóż tablica jeżeli tylko skorzystamy z metody sort, to posortuje nam tak jakby

0:44alfabetycznie, to wszystko traktując te elementy jakby to były wartości tekstowe.

0:49Czyli zauważ mamy 1, 10, 100. Po prostu zostało to alfabetycznie posortowane.

0:54Tutaj jest 2, 3 bo tutaj jest trójka i 5.

0:57Natomiast jeżeli chcemy posortować według

1:00jakiegoś naszego kryterium, to musimy tutaj przekazać taką funkcję anonimową i

1:05funkcje będą w jednym z kolejnych rozdziałów,

1:06ja zakładam, że ogólnie wiesz czym są

1:08funkcje, dlatego chciałem tę lekcję zawrzeć w rozdziale o tablicach

1:12zanim jeszcze przejdziemy do funkcji. Ale w

1:14języku JavaScript funkcje możemy tworzyć na różne sposoby, które będę omawiał.

1:18Jednym z nich jest pisanie po prostu funkcji z użyciem słowa function.

1:23Tutaj będzie ona otrzymywać jakieś

1:24parametry, zaraz je dodam, a tutaj będzie tzw.

1:27ciało funkcji.

1:28I teraz w przypadku sortowania tablic

1:30algorytm jest taki, że będziemy otrzymywać dwa kolejne elementy, więc możemy sobie

1:34jakby takie zmienne czy parametry nazwać jak chcemy np.

1:37a i b.

1:39I one tutaj zostaną przekazane.

1:40To oznacza, że będziemy otrzymywać do tej funkcji pod a dostaniemy 10,

1:46pod B dostaniemy dwójkę.

1:48Coś zwrócimy i następnie kolejny, czyli ten drugi element zostanie

1:52podstawiony pod a i kolejny pod b. I na podstawie tego co my

1:56tutaj dostajemy będziemy mogli podjąć jakieś decyzje jak to chcemy posortować.

2:00I teraz ta funkcja powinna zwracać

2:03minus 1 jeżeli chcemy zamienić elementy kolejnością, czyli np.

2:06dwójkę dać przed dziesiątkę,

2:08a dwójka będzie pod b, dziesiątka pod a, 1 jeżeli chcemy je przestawić w drugą stronę

2:13lub zwrócić 0 jeżeli chcemy, aby te elementy pozostały bez zmian.

2:18Dlatego możemy w środku skorzystać z

2:20instrukcji warunkowej w takiej funkcji i napisać tutaj

2:24jeżeli a jest mniejsze od b, czyli korzystamy tutaj z operatora

2:29porównania, o którym Ci już mówiłem wcześniej.

2:31Jeżeli a jest mniejsze od b, to zwróćmy minus 1.

2:34Czyli tak jak powiedziałem, jeżeli a jest

2:36mniejsze od b, to chcemy je zamienić miejscami.

2:40Następnie możemy zrobić kolejnego if, bo

2:42wiemy, że return kończy nam działanie funkcji, więc tutaj nie trzeba robić bloku else,

2:46zrobimy kolejnego if i napiszemy tutaj,

2:49czyli jakby w przeciwnym wypadku jeżeli a jest większa

2:52od b, to chcemy z tej funkcji zwrócić 1, natomiast w przeciwnym wypadku chcemy

2:57zwrócić 0, czyli żeby te elementy nie były zamienione miejscami.

3:01Zobaczmy jak teraz będzie wyglądała posortowane tablica.

3:04No i teraz ona jest już posortowana

3:06jak widzisz poprawnie.

3:08Więc gdybyśmy chcieli zamienić kolejność

3:10sortowania, czyli od największej liczby do najmniejszej

3:12wystarczyłoby tutaj zamienić to na 1, a tutaj na minus 1.

3:16Zobaczmy.

3:17I teraz będzie posortowana w drugim kierunku.

3:20Ale wróćmy do tego, co było.

3:21Wiem, że na początku to się może wydawać

3:23skomplikowane, ale później jak nabierzesz trochę doświadczenia to zobaczysz, że

3:27sortowanie tablic będzie nam bardzo przydatne.

3:29Nie tylko jak w nich będą liczby.

3:31Tu będą mogły być różne obiekty, które

3:33zostaną nam podstawione pod a i b i na podstawie innych kryteriów

3:37tutaj będziemy musieli zwrócić -1, 1 i 0.

3:41To będzie zależało od nas, więc mamy tutaj

3:43pełną kontrolę nad tym, w jaki sposób chcemy posortować tablicę.

3:46Tak naprawdę ten przykład może być

3:48prostszy, bo ja wspomniałem, że trzeba zwrócić -1, 1 albo 0.

3:51Tak naprawdę można zwrócić wartość ujemną

3:54dowolną. Jak bym zwrócił minus 10 to byłoby to to samo.

3:57Jak zwrócę + 10 to też byłoby to to samo.

4:00Dlatego jeżeli mamy wartości liczbowe, to

4:02w zasadzie to wszystko można by było wykomentować i zwrócić po prostu

4:07poprzez return a minus b i efekt powinien być ten sam.

4:11Zobaczmy. Czyli taki jak mieliśmy wcześniej.

4:14Rzeczywiście tak jest, dlatego, że jeżeli pod a zostanie podstawione 10 pod b

4:18zostanie podstawione 2 to 10 minus 2 to się równa 8, czyli zwracam wartość

4:25dodatnią, a więc tak samo jak jakby zwrócił 1.

4:28W przeciwnym wypadku będzie zwrócona wartość ujemna.

4:30A jeżeli dwa elementy byłyby takie same

4:32obok siebie to 2 minus 2 zwróciło by 0, czyli nie zamieniali byśmy ich miejscami.

4:37A więc można to skrócić w przypadku liczb do takiego prostego zapisu.

4:41Jak zatem widzisz domyślnie jeśli użyjemy

4:43tylko arr.sort to będziemy mieli wszystko posortowane alfabetycznie

4:47a jeżeli chcemy mieć jakiś wpływ na to jak to jest sortowane, to musimy przekazać

4:51funkcję, do której będziemy otrzymywać dwa kolejne elementy tablicy i na ich

4:55podstawie możemy je jakoś porównywać i zwracać wartości ujemne, dodatnie lub 0 w

5:00zależności od tego jak chcemy sortować te elementy.