JavaScript: Metody tablic

0:00Do tej pory zobaczyłeś już kilka metod tablic takich jak np.

0:03push czy unshift, a także pop

0:06a teraz będę chciał Ci pokazać jeszcze kilka z tych najbardziej przydatnych. Więc

0:09szybko utworzę sobie jakąś tablicę, może 1, 2, 33, 0, 7 czy 8 i 5.

0:18To nie ma większego znaczenia. Na tej tablicy będziemy sobie operować.

0:22Pokażę Ci teraz metodę slice, która

0:24pozwala nam wyciąć jakiś kawałek tablicy i utworzyć z tego nową tablicę.

0:29Więc powiedzmy, że chcielibyśmy utworzyć

0:31nową tablicę, gdzie będzie połowa tej oryginalnej tablicy.

0:35Utworzymy sobie stałą, gdzie będziemy chcieli to przechwycić nazwę ją Half jak

0:38połowa i odwołam się do tej oryginalnej tablicy i na niej wywołam metodę slice.

0:44I metoda slice działa w ten sposób, że podajemy, od którego indeksu chcemy

0:49zacząć wycinanie, a także do którego indeksu chcemy wyciąć.

0:52Czyli jeżeli chcę wyciąć połowę tablicy,

0:54to zaczniemy od początku, a więc od indeksu 0.

0:57Zatem podaję liczbę 0. Po przecinku

0:59podaję drugi parametr, do którego indeksu chcę wycinać, czyli 0, 1, 2.

1:05Jeżeli wpiszemy tutaj 2.

1:06Zobaczmy i w konsoli wyświetlimy sobie

1:09tę tablicę, to będziemy tutaj mieli pierwszy element i drugi.

1:14Czyli nie wycięliśmy jeszcze połowy, bo powiedzieliśmy, że do drugiego indeksu,

1:18czyli to jest 0, 1, 2 dotąd chcemy wyciąć, ale bez uwzględnienia tego indeksu.

1:23Czyli jeżeli chcemy połowę, musimy tutaj podać liczbę o 1 większą.

1:26W ten sposób wycięliśmy sobie połowę tej tablicy

1:29i teraz pytanie czy oryginalna tablica się zmieniła, czy nie?

1:32Możemy to oczywiście sprawdzić wyświetlając ją w konsoli.

1:35Jak możesz zobaczyć, ona nie została zmodyfikowana.

1:38Czyli to jest ważne o tyle, że arr.slice tworzy nam nową tablicę, nie modyfikując

1:42tej, na której wywołaliśmy tę metodę.

1:45A na przykład metoda pop, z której usunęliśmy ostatni element tablicy,

1:49on był dla nas zwracany, ale także był z tej tablicy usuwany.

1:53Czyli tamte metody modyfikowały tablicę, na której zostały wykonane,

1:57ta metoda tej tablicy nie modyfikuje, ale tworzy nową tablicę.

2:01Ciekawą metodą, która również może nam się

2:03przydać może sobie ją zrobimy w konsoli jest arr.join, która pozwala nam połączyć

2:08wszystkie elementy tablicy, które tam się znajdują.

2:11Ona będzie przydatna przy liczbach albo

2:13przy ciągach znaków na takim separatorze, który tutaj podamy.

2:17Czyli jeżeli będę chciał połączyć

2:19wszystkie elementy na przecinku i spacji, zobacz, podałem to po prostu jako string,

2:23mógłbyś to mieć w jakieś zmiennej i tutaj przekazać, to

2:26to wszystko połącz nam tą tablicę dodając

2:28właśnie przecinki i zwróci nam to wszystko jako string.

2:32Możemy zobaczyć. Będzie to wyglądać następująco.

2:34Gdybyś chciał to połączyć np.

2:36na takim pipe, możesz go podać jak

2:38najbardziej, wtedy będzie to wyglądać w ten oto sposób.

2:41Więc w ten sposób łączymy wszystkie elementy i wynikiem jest zawsze zwrócony

2:46ciąg znaków. Czyli zawsze będzie to string. To co zostanie zwrócone z metody join.

2:52Bardzo przydatną metodą jest metoda includes.

2:55Zobaczmy, ona nam zwraca true lub false

2:57jeżeli chcemy zapytać czy w jakiś tablicy znajduje się jakiś element.

3:00Więc jeżeli zapytamy czy arr.includes czy zawiera 33,

3:05zobaczmy co się pojawi w konsoli,

3:07mamy true. Bo taki element tam się znajdował.

3:10Jeżeli podamy jakiś, którego tam nie ma, zostanie zwrócone false.

3:13A więc warto np.

3:15w instrukcjach warunkowych gdzieś możemy mieć if arr.includes jakąś wartość,

3:20warto to stosować właśnie tam.

3:22Inną ciekawą metodą jest metoda concat, która pozwala nam połączyć dwie tablice.

3:27Więc zrobimy to bezpośrednio w console.log,

3:29ale oczywiście moglibyśmy utworzyć jakąś

3:30stałą, gdzie zapiszemy sobie taką nową tablicę.

3:33Ja to zrobię bezpośrednio w console.log.

3:35Czyli będziemy chcieli do tej oryginalnej tablicy dołączyć tą tablicę,

3:41połowiczną, którą sobie stworzyliśmy, bo teraz to są dwie zupełnie osobne tablice.

3:45Mam ją tutaj, więc możemy zrobić coś takiego, arr.concat,

3:51czyli na tej tablicy wywołujemy concat mówiąc połącz z tą tablicą

3:55kolejną tablicę, którą należy tutaj przekazać i przekażemy ją

3:59tutaj tablicę jej tą tablicę, którą mamy pod stałą half.

4:03I to stworzy nam nową tablicę.

4:05I znowu pytanie czy to zmodyfikował tablicę arr?

4:08Sprawdźmy.

4:10Zobacz nie zmodyfikował tej tablicy. Czyli concat

4:13połączyło nam jedną tablicę z inną i zwróciło to jako zupełnie nową tablicę, a

4:17oryginalna tablica nie została w żaden sposób zmodyfikowana.

4:21Z innych metod, które mogą się przydać, do których przekazujemy tzw.

4:25funkcję callback to jest np.

4:26metoda forEach.

4:27A więc możemy powiedzieć arr.forEach,

4:30a więc dla każdego elementu tej tablicy tutaj są te elementy,

4:33wywołaj taką funkcję, gdzie przekażemy po prostu ten element.

4:37Możemy sobie tutaj nazwać parametr np.

4:40value, ale oczywiście ta nazwa jest dowolna

4:42tak jak to bywa przy funkcjach i możemy sobie np.

4:45w console.log wyświetlić taką wartość.

4:48Czyli ta funkcja zostanie wywołana dla

4:50każdego elementu. Za pierwszym razem zostanie wywołana i pod value

4:52podstawione zostanie 1, potem 2, potem 33 itd.

4:57Więc co nam wyświetli wszystkie te console.logi w taki sposób.

5:00Natomiast tu można przyjąć jeszcze kilka parametrów np.

5:03możemy przyjąć index, a także array czyli odwołanie do całej tej tablicy.

5:08Czyli wtedy mielibyśmy pod value podstawione np.

5:101, a pod index 0,

5:12za drugim razem pod value byłoby 2, index to byłoby 1 itd.

5:16Więc warto wiedzieć, że tutaj również można się odwołać do takich parametrów,

5:20jeżeli byłyby one dla nas w jakiś sposób pomocne.

5:24Inną ciekawą metodą jest np.

5:27arr.filter, która pozwala nam odfiltrować pewne elementy z tablicy.

5:31Więc wyobraź sobie, że chcielibyśmy

5:32utworzyć tablicę z elementami takimi, które są większe od 5. I będzie to nowa

5:37tablica, więc stworzę sobie taką stałą gdzie powiem gt5 czyli Greater than 5.

5:43To jest tylko nazwa i odwołamy się do arr.filter i tej

5:46metodzie również przekazujemy funkcję callback.

5:49Ona otrzyma tak jak w przypadku forEach pojedynczą wartość.

5:53I teraz jeżeli z tej funkcji zwrócimy

5:55true, to ta wartość znajdzie się w nowo tworzonej tablicy,

5:58jeżeli zwrócimy false to się nie znajdzie.

6:01Więc pod value na początku będziemy mieli np.

6:031 i możemy po prostu zwrócić czy value jest większa od 5. Czy 1 jest większa od 5?

6:08Nie jest.

6:09Czyli tu zostanie zwrócone false, a więc jedynka nie znajdzie się w nowej tablicy,

6:13dwójka też nie, ale 33 i 8 już się znajdzie.

6:17Czyli pod gt5 powinniśmy mieć nową tablicę, gdzie będzie 33 i 8.

6:22Zobaczmy.

6:25Dokładnie tak się stało.

6:26No i oczywiście to może być bardzo przydatne

6:28później, kiedy w tych tablicach będziemy

6:30mieli inne rzeczy niż liczby. Tu będą mogły być jakieś obiekty,

6:33będziemy mogli na podstawie jakiegoś słowa, które ktoś wpisze powiedzmy w

6:37wyszukiwarce przeszukiwać wszystkie jakieś wpisy albo jakieś dane w tabelce i zwracać

6:41tylko te, które będą zawierały taki tekst itd.

6:44Więc ta metoda filter oczywiście tutaj w dowolny

6:47sposób w środku może filtrować, to możemy mieć dowolne warunki,

6:51ważne żeby zwróci true lub false i wtedy taki element znajdzie się w nowej tablicy,

6:54jeżeli zwrócimy false to się nie znajdzie.

6:56I to oczywiście też nie modyfikuje oryginalnej tablicy, tylko tworzy zupełnie

7:00nową, która została tutaj do tej stałej przypisana.

7:03No i może skorzystamy z jeszcze jednej podobnej metody.

7:06Jest to arr.map, też tworzy nam nową tablicę.

7:09Zaraz zobaczysz jak to wygląda.

7:10Nazwiemy ją sobie negative, bo chciałbym wszystkie liczby, które tutaj

7:15mamy odwrócić tak aby zapisać ich ujemne wartości. Więc odwołamy się znowu do arr

7:21metoda nazywa się map i jej też przekazujemy funkcję, która otrzymuje taką pojedynczą

7:26wartość i to co zwrócimy to będzie element nowej tablicy.

7:30Czyli na początku pod value dostaniemy 1 i jak np.

7:32zwrócę 1 razy -1 to będzie -1.

7:36Czyli zwracam sobie value razy minus 1. A więc

7:39każdy element tutaj pod value zostanie podstawiony, potem będzie tu dwójka

7:43i jak zrobię 2 razy -1 zostanie zwrócone -2.

7:46Czyli nowa tablica będzie zawierała wtedy te elementy jakby odwrócone.

7:50Będą to wartości ujemne.

7:56Zobaczmy.

7:57No i rzeczywiście tak się stało.

7:58Łącznie z zerem w JavaScript jest taka wartość jak minus zero.

8:03Na koniec chcę Ci pokazać jeszcze w dokumentacji na Mozilla.org, że możemy

8:07skorzystać jeszcze z wielu innych metod, które są dostępne na tablicach.

8:11Nie będę ich wszystkich tłumaczył.

8:13Powiem Ci szczerze, że to jest tak, że jak uczysz się programowania i

8:16jak tworzysz kolejne przykłady, to dopiero wtedy zazwyczaj zdobywasz taką wiedzę,

8:20czyli sięgasz po jakieś metody, które wydaje Ci się, że mogą być przydatne,

8:25dlatego polecam Ci, żebyś je po prostu

8:26przejrzał poeksperymentował z nimi, zrobił sobie jakieś notatki,

8:29ale niekoniecznie musisz je wszystkie wkuwać na pamięć.

8:32Wszędzie gdzie widzisz tutaj array.prototype i później np.

8:35every, to to every to jest właśnie nazwa tej metody.

8:38Czyli moglibyśmy sobie tutaj zrobić arr.every

8:41i to będzie dokładnie to, co masz tutaj. Więc możesz sobie kliknąć zobaczyć

8:45przykład jak to wygląda, na czym to polega.

8:47Tutaj znajdziesz wszystkie metody, które są właśnie dostępne na obiekcie Array.