JavaScript: Metody tablic
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji kończymy omawianie tablic i chciałbym Ci pokazać jeszcze kilka bardzo przydatnych metod
dostępnych na tablicach.
Przy okazji pokażę ci stronę w Mozilla Developer Network, gdzie mamy opisane wszystkie metody dostępne
dla tablic i nie tylko metody, ale np. właściwości.
Jak widzisz, mamy tutaj właściwość, z której już korzystaliśmy.
Jest to length i tutaj wiele z metod jest opisanych.
Jeżeli chodzi o mutator metods, to są to metody, które zmieniają faktycznie tablice,
kiedy skorzystamy z nich na tablicy i tak jak ci pokazywałem na przykład mamy tutaj pop.
Kiedy użyliśmy pop na tablicy, to ta metoda zwróciła ostatni element tablicy,
ale faktycznie z tej tablicy go usunęła,
więc są to właśnie takie oto metody.
Natomiast niżej możemy zobaczyć metody, które są opisane jako Accessor methods
i są to metody, które nam coś mogą np. zwrócić, ale nie będą modyfikować oryginalnej tablicy.
Na przykład metoda slice, nie mylić ze splice, z którą ci pokazywałem, natomiast slice za moment ci pokażę
i teraz na początku swojej przygody z JavaScript'em,
taka dokumentacja może wydać ci się nieco skomplikowana, ale uwierz mi, że nie jest i kiedy będziesz chciał
nauczyć się naprawdę dobrze posługiwać tym językiem lub jakimkolwiek innym językiem programowania to
będziesz musiał do takiej dokumentacji zaglądać.
Ja oczywiście stosowne linki wrzucę do plików źródłowych do tego kursu, ale również wiele z przydatnych
funkcji czy metod oraz konstrukcji JavaScript'u będzie opisane w PDF'ie, który będzie do tego kursu również
dołączone.
Tam będzie to opisane oczywiście w języku polskim i będziesz bez problemu również mógł się z tego co,
nieco nauczyć.
Natomiast pamiętaj, że nie będę opisywał wszystkiego, co jest dostępne w języku JavaScript i również nie
jestem w stanie wszystkiego ci pokazać w tym kursie.
Dlatego teraz pokażę ci kilka przydatnych metod, które na tej stronie również znajdziesz. Tutaj na razie
sobie to zamknę i przejdziemy do kodu. Utworze
na samej górze tablicę, z której będziemy oczywiście korzystać. Mamy taką oto tablicę, znajoma nam już
tablica z różnymi liczbami i teraz będę chciał ci pokazać jak działa metoda slice, podobna do metody
splice, ale jednak działa ona trochę inaczej.
Wyobraź sobie, że chcielibyśmy utworzyć nową tablicę, która będzie przechowywała połowę elementów tej
tablicy.
Ale nie chcemy modyfikować oryginalnej tablicy, więc utworze zmienną, którą nazwę half jak połowa.
I teraz odwołamy się do arr i do jej metody slice.
Wcześniej pisaliśmy splice, w ten sposób i ona modyfikowana oryginalną tablicę.
Jeżeli wpisze slice, czyli chcemy taki kawałek wyciąć, to tutaj podajemy
podobnie jak w przypadku metody splice index od którego chcemy zacząć np. 0 gdybyśmy chcieli zacząć
od tego elementu i możemy również tutaj podać np. minusowe, czyli -1, jest to ostatni, więc tutaj
tak jak w metodzie splice, 0.
Natomiast metodzie splice pamiętasz, że podawaliśmy ilość elementów, czyli indeks np. 0 i chcemy 3 elementy
czyli raz, dwa, trzy.
Tutaj gdybym podał trzy, to nie oznacza to, że chcemy trzy elementy, ale od indeksu zero do indeksu trzy
chcemy wyciąć.
Czyli jeżeli tak sobie zapisze, to mamy indeks 0, 1, 2, 3, czyli te elementy chcemy sobie wyciąć i zapisać tutaj
zmiennej half.
Możemy oczywiście to sprawdzić, zróbmy sobie tutaj console.log arr, a poniżej console.log half, abyśmy to mogli
porównać. Odświeżam.
No i jak widzisz, dokładnie tak się stało.
Natomiast mamy tutaj trzy elementy, a nie cztery, jeszcze z jednego bardzo ważnego powodu.
Tutaj podajemy indeks, do którego chcemy wyciąć, czyli 0, 1, 2, 3, ale bez tego indeksu,czyli jeżeli chcemy
wyciąć te elementy 4, to musimy tutaj dodać 4 ,a więc mamy 0, 1, 2, 3, 4, czyli do tego indeksu chcemy wyciąć
ale wykluczając ten indeks.
Teraz będziemy mieli połowę,
w ten oto sposób. Gdybyśmy chcieli wyciąć drugą połowę, to możemy zacząć od końca -1, -2,
-3, minus -4 i wpisać sobie tutaj po prostu minus -4. Jeżeli nie podamy drugiego parametru to chcemy
wyciąć do końca.
Teraz jeżeli odświeżę, to możesz zobaczyć że mamy tutaj te elementy z drugiej połowy wycięte.
Gdybym chciał oczywiście wyciąć tylko te dwa, to nie byłoby problemu. Musiałbym podać jeszcze jeden parametr,
czyli w tym przypadku -4 i zero, raz, dwa, trzy, cztery, pięć, sześć, czyli podajmy tutaj sześć.
I zobaczmy, jak widzisz teraz tylko 45, raz 99 zostało wycięte.
Mam nadzieję, że to dobrze rozumiesz.
Natomiast zauważ, że tablica oryginalna czyli arr, nie została zmodyfikowana w żaden sposób, ale metoda
slice zwróciła nam kawałek tej tablicy i mogliśmy ją zapisać w zmiennej.
Ok, może sobie to wykomentuje i teraz pokażę ci kolejną bardzo ważną metodę, z której często się korzysta na tablicach.
Mianowicie w jaki sposób połączyć wszystkie elementy tablicy i zapisać jako string. Pokazywałam ci w
przypadku iteracji,
kiedy chcieliśmy wylosowane liczby zapisać do zmiennej wylosowane, że robiliśmy iterację i tam wszystko
podawaliśmy. Natomiast nie musimy tego robić w ten sposób, bo możemy napisać bez problemu i zróbmy to
od razu w console.log, arr.join, czyli połącz wszystkie elementy
i tutaj podajemy
jako parametr string, jak chcemy je połączyć.
Jeżeli nic nie podam, tylko pusty ciąg znaków, to będziemy chcieli wszystkie elementy ze sobą połączyć
i zobaczysz one ze sobą zostaną po prostu sklejone,
jest to string.
Natomiast, jeżeli podamy tutaj np. przecinek i spacje tak jakby nas to interesowało. Odświeżę. To te elementy
zostają połączone właśnie przecinkiem i spacją.
I tutaj na samym końcu, jak widzisz, nie mamy problemu, bo do ostatniego elementu już tego nie doklejamy.
Gdybym tutaj wpisał dwie pauzy, no to oczywiście, w taki sposób zostałoby to bez problemu połączone, czyli
metoda join łączy wszystkie elementy tablicy i zapisuje je w ten sposób.
Tutaj mógłbyś zapytać co by się stało, gdyby to nie były liczby, ani stringi, ale np. obiekty.
Otóż wtedy na obiekcie.
O czym ja jeszcze będę mówił.
Będą wywoływane metody konkretnie metoda toString.
I ta metoda, to co zwróci, to to zostanie jakby podstawione.
Będę jeszcze o tym mówił w drugiej części tego kursu.
Gdzie poruszę prototypy.
Więc na razie się tym nie przejmuj.
Zapamiętaj tylko, że metoda join łączy wszystkie elementy tablicy poprzez podany tutaj przez nas ciąg
I zostawmy sobie to na przycinku oraz spacji.
Kolejna bardzo ważna metoda jest to metoda indexOf, która pozwoli nam sprawdzić czy w tablicy znajduje
się jakiś element, więc gdybym chciał sprawdzić czy w tej tablicy mamy 0, to możemy napisać console.log arr
indexOf.
W ten sposób zapisujemy, 0.
I teraz ona nie zwróci ani true ani false.
Zobacz co ona nam zwróci. To może wykomentuje.
Jak widzisz, zwróciła nam trójkę.
I teraz dlaczego?
Jeżeli znajdzie nam taki element, którego szukamy w tablicy.
Gdyby to było kolejne zero, to tyczy się to tylko pierwszego zera.
To wówczas zwróci nam indeks
takiego elementu, więc zapytałem
indexOf Zero i zero zostało znalezione pod indeksem
3.
Bo tutaj mamy zero.
Raz, dwa, trzy.
Co to oznacza dla nas?
Otóż tylko tyle, że jeżeli chcemy sprawdzić czy jakiś element znajduje się w tablicy, to możemy napisać
tutaj arr indexOf np. 0, nie jest równe -1.
Zobaczmy teraz, jak widzisz teraz mamy już true, bo całe to wyrażenie nam porównało. 3 nie jest równe
-1.
To prawda.
Dlaczego -1?
A właśnie z tego powodu, że gdybyśmy wpisali jakiś element, który nie istnieje w tej tablicy np. niech
to będzie 101, to indexOf zwróci nam -1, czyli jeżeli element w tablicy się znajduje to zostanie
nam zwrócone 0 lub 1, 2, 3, po prostu jego indeks.
Jeżeli się nie znajduje to -1.
Dlatego nie możemy sobie zapisać np. if arr, indexOf, tak jak tutaj, na przykład 0 czy jakaś inna liczba.
Możesz się domyślić dlaczego, bo jeżeli taka liczba zostanie znaleziona, ale będzie pod zerowym indeksem
to indexOf zwróci nam 0.
A pamiętaSZ, że w instrukcji if 0 jest uważane za wartość fałszywą. Dlatego tutaj zawsze w if'ie powinniśmy
porównywać.
Czy to nie jest równe.
Zróbmy to jeszcze raz -1.
Wtedy zawsze będziemy mieli true lub false i sprawdzimy raz jeszcze mamy false, bo element 101 w tej tablicy
się nie znajduje.
Wykomentuje to i przejdziemy do kolejnej metody.
Kolejna metoda, z której możesz czasem korzystać jest to metoda concat, która pozwoli nam skonkatenować,
czyli połączyć dwie tablice. Wpiszmy sobie console.log i napiszemy arr, czyli array, concat
i tutaj musimy podać drugą tablicę.
Wiesz, że mamy tutaj połowę tej tablicy zapisaną, więc korzystajmy z tej zmiennej,
podamy tutaj Halthalf.
Oczywiście mógłbyś tu wpisać tablicę ręcznie.
To nie ma znaczenia.
Podajmy half.
W ten sposób, czyli do tej tablicy chcemy dołączyć tablice half i zobaczmy co zostanie nam zwrócone.
Jak widzisz będzie to wyglądać w następujący sposób i sprawdzimy czy tablica arr została zmodyfikowana.
Jak widzisz nie.
Więc korzystając z metody concat, jak zwracamy to, co jest w tej tablicy. Dodajemy do tego to co podamy
tutaj.
I to wszystko jest zwrócone, nie modyfikując oryginalnej tablicy.
Teraz kolejna bardzo ważna metoda, o której nie mówiłem w lekcji o iteracji po tablicach, gdzie pokazywałem
ci jak pętlą for iterować po tablicy.
Jest to metoda for each i większość z tych metod, które ci pokazuje są dostępne dla nas od momentu kiedy
w życie wszedł standard ECMA5script 5, o którym Ci mówiłem podczas omawiania historii JavaScriptu. Natomiast
spokojnie możesz w nowych przeglądarkach z tego korzystać, nie ma problemu.
Wszystkie powyżej Internet Explorer 8 będą tę metodę implementować, więc dlatego ci je pokazuje.
Metoda FOR ifor each wykonywana jest na tablicę i wygląda następująco.
Oznacza ona tylko tyle, że dla każdego elementu takiej tablicy wykonaj funkcję, którą tutaj przekażemy.
Ta funkcja przyjmuje trzy parametry.
Jeżeli przerobiłeś już rozdział o funkcjach to wiesz, że nie musimy ich wszystkich podawać, jeżeli nie chcemy,
ale możemy w dokumentacji też to znajdziesz.
Pierwszy parametr będzie to wartość, więc możemy go nazwać value.
Drugi będzie to index.
Oczywiście te nazwy są tutaj dowolne, a trzeci to będzie sama tablica.
I dla każdego elementu takiej tablicy, czyli dla 32, 11 itd.
zostanie ta funkcja wywołana. Przy pierwszej iteracji value,
to będzie 32, index to będzie 0, bo tutaj mamy zerowy indeks, a reszta to będzie cała ta tablica, czyli
możemy do tych zmiennych wewnątrz funkcji się bez problemu odwołać. Zróbmy tylko console.log, value i
wszystkie te elementy po kolei powinny zostać w konsoli wyświetlone.
Jak widzisz, dokładnie tak się stało.
Więc często z takiej metody możemy korzystać.
For each po prostu wykona te funkcje dla wszystkich elementów tablicy i będziemy mogli sobie z takich parametrów
bez problemu skorzystać.
I jeszcze dwie przydatne metody.
Oczywiście jest ich więcej, ale jeszcze dwie chcę Ci pokazać, to może wykomentuje, aby się w konsoli nie
pojawiało.
I pokażę ci teraz metodę filter.
Wyobraź sobie, że chcielibyśmy z takiej tablicy zwrócić tylko te elementy, które są większe od 10.
Nazwę zmienną gt10, czyli greater than 10, większa od dziesięciu i odwołamy się do arr.
I teraz do metody filter.
Jest to metoda, która jako parametr też przyjmuje funkcję.
A ta funkcja przyjmuje tutaj wartość.
Czyli taka funkcja podobnie jak przy for each będzie wykonana dla każdego elementu tablicy i pod zmienną
value będziemy mieli 32, 11, 2 itd.
I teraz co zostanie z tej metody zwrócone? Otóż
nowa tablica, którą zapiszemy tutaj.
Ale to co znajdzie się w tej tablicy będzie zależeć od tego co tutaj zwrócimy.
Jeżeli taka funkcja którą tutaj mamy zwróci true, czyli return true, to oznacza, że ten element value ma
zostać zapisany w nowej tablicy.
Jeżeli zwróci false to nie, dlatego chcemy tutaj zwrócić true tylko jeżeli value jest większa od dziesięciu
i będziemy tutaj mieli elementy większe od dziesięciu.
Dlatego możemy tutaj zapisać return value, większe od 10. Weźmiemy na początku 32.
Będzie ono tutaj podstawione. 32 większe od 10. True, więc zapisz ten element w nowej tablicy.
Później będzie 11 również true. 2 większe od 10 zostanie zwrócone false.
I ten element tam nie zostanie zapisany.
Zróbmy console.log, gt10.
I porównajmy.
No i jak widzisz mamy tylko te elementy, które są większe od dziesięciu.
No i po raz kolejny gdybyś w tej tablicy miał przechowywane jakieś obiekty, to mógłbyś tutaj się odwołać
poprzez value
kropka
do jakiejś właściwości tego obiektu czy także jakiejś metody, która coś by zwracała i mógłbyś na tej
podstawie zwrócić true lub false.
I na koniec jeszcze jedna metoda jest to albo array map, to sobie wykomentujemy.
Ona działa nieco podobnie.
Wyobraź sobie, że chcielibyśmy, aby wszystkie elementy tej tablicy zamienić na wartości minusowe.
Więc możemy tutaj napisać negative.
Bo znowu metoda, z której skorzystamy nie zmienia oryginalnej tablicy, ale nam tylko zwraca nową tablicę.
I tutaj napiszemy arr.map. Często się korzysta z takiej metody w różny sposób i ona znowu tutaj przyjmuje
funkcję, która przyjmuje wartość.
I teraz co jest ważne, to co zostanie zwrócone z tej funkcji, będzie zapisane w tej zmiennej,
jakby w tym miejscu w tablicy, czyli na początku pod value zostanie podstawione 32 i to co zwrócimy zostanie
w tym miejscu zapisane.
Chciałbym żeby te wszystkie liczby były odwrócone, czyli negatywne.
Więc wrócimy sobie, return valiumvalue razy minus jeden.
I teraz jeżeli sobie zrobimy console.log, negative, w ten sposób, to powinniśmy mieć wszystkie te wartości,
ale właśnie minusowe, czyli to co mieliśmy wyżej.
Jest jeszcze więcej metod tablic, z których warto korzystać i z czasem one dla ciebie również okażą się
przydatne.
Polecam Ci zerknąć do dokumentacji, która tutaj wcześniej była pokazana i linki do tego znajdziesz w
plikach źródłowych do tego kursu.
Natomiast na chwilę obecną wystarczy, że będziesz znał te metody, które tutaj pokazałem.
Zdaję sobie sprawę, że być może na razie nie do końca jesteś pewien, kiedy będziesz z takich metod korzystał,
bo ja pokazuję tutaj tylko takie przykłady, które faktycznie działają, ale może nie do końca są użyteczne.
Natomiast w tym kursie zrobimy jeszcze kilka praktycznych projektów, w których zobaczysz jak korzystać
w praktyce z wielu konstrukcji, które pokazuje, a w drugiej części tego kursu będzie jeszcze więcej praktycznej
wiedzy, którą znajdziesz oczywiście również w innych kursach na eduweb.pl, które już zrealizowaliśmy dlatego,
że tam nie tłumaczymy wszystkiego tak bardzo dokładnie, ale korzystamy już z tych koncepcji, które w tym
kursie możesz poznać.
Kod
Metody tablic · 2 min
var arr = [32, 11, 2, 0, 45, 99, 3, 5];
console.log(arr);
var half = arr.slice(-4, 6);
// console.log(half);
// console.log(arr.join(", "));
// console.log(arr.indexOf(101) !== -1);
// console.log(arr.concat(half));
arr.forEach(function(value, index, array) {
// console.log(value);
});
var gt10 = arr.filter(function(value) {
return value > 10;
});
// console.log(gt10);
var negative = arr.map(function(value) {
return value * -1;
});
console.log(negative);