Poznaliśmy wspólnie już całkiem dużo elementów JavaScriptu. Były zmienne, pętle, funkcje, typy danych i wiele innych. Jest jeszcze jeden, który stanowi FUNDAMENT dla programów mających robić coś naprawdę efektownego. Tym brakującym ogniwem jest tablica! Zważywszy, że tablica w języku JavaScript wymaga wytłumaczenia większej ilości informacji, artykuł też pewnie zrobi się przez to większy, więc w razie czego znajdźcie sobie trochę więcej czasu na przestudiowanie.
| Tweet |
TABLICA W JĘZYKU JAVASCRIPT TAKŻE POSTANAWIA IŚĆ WŁASNYM TOREM
Ten zawodnik też łamie częściowo ogólnie przyjęte normy wynikające z pierwszego języka wysokiego poziomu w historii, C (opinie są różne, natomiast dla mnie jest językiem wysokiego poziomu) :D. Wyjaśnijmy sobie wpierw cechy charakterystyczne.
TABLICA TAK OGÓLNIE
Przede wszystkim tablica pełni funkcję przechowalni wielu wartości w jednym miejscu tego samego typu, chociaż w JavaScript nie jest to do końca prawdą (zobaczcie sobie tę strukturę danych od strony teoretycznej). Wrócimy do tego za moment. Przypomina taki "słoik", do którego wrzucamy elementy będące wartościami należącymi do tablicy, a one są odpowiednio ponumerowane (to też będzie później). Najbardziej podstawową funkcją użycia tablicy jest grupowanie danych. Zamiast pisania czterystu zmiennych nieznacznie różniących się etykietą (nazwą), możemy wepchnąć je wszystkie do jednej zmiennej tablicowej o wielkości 400 elementów i tam niech sobie siedzą. To z kolei umożliwia nam zastosowanie pętli do obsługi tych danych zamieniając pojedyncze instrukcje (Boże, jakie to byłoby okropne pisać 400 razy to samo :O!).
INICJALIZACJA TABLICY
Tablica w języku JavaScript inicjowana jest za pomocą pary nawiasów kwadratowych ([]). Pomiędzy nimi umieszczamy ewentualne elementy, które mają się tam znajdować od samego początku. Na przykład:
const a1 = []; // pusta tablica
const a2 = [5, 67, 15, 8]; // tablica wypełniona liczbamiPODOBNO NAZYWAJĄ CIĘ "OBIEKTEM"
Informacja wyjątkowa! Tablica w języku JavaScript to w rzeczywistości obiektowy typ danych! Tak, ten sam poznany nie tak dawno temu. Nie wierzycie? To sprawdźcie sobie tablicę przy użyciu wywołania "console.log" i użycia "typeof". Co widzicie :)?
const array = [];
console.log(typeof array);ODWOŁYWANIE SIĘ DO ARGUMENTÓW
Tablica jest zdolna do przechowywania wielu argumentów. Bardzo często występuje potrzeba dostania się do któregokolwiek z nich celem wykonania operacji (najczęściej w pętli). Jak to się robi?
Po pierwsze, celem dostania się do argumentu korzystamy z liczby naturalnej, która oznacza numer występowania w kolejności. Co więcej, liczony jest od zera!!! To znaczy, że pierwszy argument będzie "leżał" pod numerem 0, drugi pod numerem 1 i tak dalej, i tak dalej. Oto przykład:
const array = [5, 6, 9];
console.log("Pierwsza liczba: " + array[0]);W wielu papierowych i elektronicznych materiałach znajdziecie termin "indeks", który jest ładniejszym sformułowaniem tego numeru w kolejności.
Liczenie od zera pochodzi z języka C i odwoływania się do adresu tablicy w systemie szesnastkowym. Tam indeks jest przesunięciem adresu o N bajtów, w zależności od typu danych tablicy. Kiedy indeks jest zerowy, to adres wskazuje na początek tablicy, który jednocześnie przechowuje pierwszy argument. Wraz ze zwiększaniem indeksu, wzrasta przesunięcie adresu w pamięci o który nam chodzi, co będzie oznaczać wskazywanie na kolejne argumenty (albo wyjście poza tablicę). Tyle w dużym streszczeniu, żeby nie uciec od meritum i nie odstraszyć Ciebie, czytelniku :D.
OBSŁUGA WSZYSTKICH ELEMENTÓW W PĘTLI
W sytuacjach korzystania z pętli "for" do obsługi elementów w tablicy bardzo przydatne okaże się użycie właściwości "length", która zwraca liczbę argumentów w tablicy:
const array = [5, 6, 9];
console.log(array.length); // 3wtedy można bez problemu zaprogramować obsługę tablicy niezależnie od liczby posiadanych przez nią elementów:
for (let i = 0; i < array.length; ++i) {
console.log(array[i]);
}METODY TABLICY
Chciałem zaprezentować parę metod należących do tablicy, które oferują wykonywanie podstawowych operacji na tablicy, czyli dodawanie i usuwanie z niej elementów (można też nazwać argumentami) oraz wykonywanie poszczególnych operacji na każdym z nich. Poznajcie się :)!
PUSH
"push" to wprowadzenie dodatkowego elementu do tablicy na jej sam koniec (stąd też wymaga podania tego elementu w miejsce parametru). Przydaje się w momencie, gdy element ma zostać dodany do tablicy, ale później niż w chwili inicjalizacji. Przykładowe użycie:
const array = [5, 6, 9];
console.log(array);
array.push(38);
console.log(array);Metoda niczego nie zwraca, więc tylko wykonuje polecenia i tyle.
POP
Co innego "pop", które zwraca element z końca tablicy (albo "undefined", jeśli nie ma czego zwrócić) jednocześnie usuwając go z tablicy:
const array = [5, 6, 9];
console.log(array);
const lastElement = array.pop();
console.log(array);
console.log(lastElement);W tej sytuacji nie podajemy żadnych parametrów.
FOREACH
Przyzwyczajono nas do tego, że kiedy trzeba wykonać jakąś operację na dowolnym zbiorze danych, to nic tylko pętla "for" i jazda:
for (let i = 0; i < array.length; ++i) {
console.log(array[i]);
}Pokażę Wam jednak coś prostszego. Każda tablica w języku JavaScript posiada metodę "forEach", która za parametr przyjmuje serię instrukcji do wykonania. Tak, to jest lambda! Patrząc na powyższy przypadek, możemy to zamienić na to:
array.forEach(function(e) {
console.log(e);
});albo jeszcze prościej:
array.forEach(e => console.log(e));Metoda "forEach" może przyjmować od jednego do trzech parametrów:
- element
- indeks
- cała tablica
Użyteczność wszystkich parametrów zależy od rozwiązania postawionego problemu. Na przykład do wypisania elementów wystarczy nam tylko pierwsze, ale indeks już może być potrzebny kiedy chcemy wypisać co drugi element (i % 2 == 0).
RÓŻNICE WZGLĘDEM INNYCH (NIEKTÓRYCH) JĘZYKÓW
Żeby było kolorowo, skonfrontujmy sobie tablicę występującą w języku JavaScript z tym, jak wygląda tablica w większości innych równie często wykorzystywanych języków. Głównie będę mieć na myśli język C, C# i Javę choć bardzo możliwe, że znalazłyby się jeszcze jakieś języki.
ROZCIĄGLIWOŚĆ
Do tablicy możemy swobodnie dodawać i usuwać elementy. Tyle tylko, że to nie leży w naturze tablicy! Należy wiedzieć, że to jest struktura statyczna. Oznacza to, że definicja jej wielkości określana jest na poziomie pisania kodu i zwykle jest później niezmienna. W celu późniejszego dostosowania wielkości, trzeba stworzyć całkowicie nową tablicę. Tablica w języku JavaScript to nie jest zwyczajna tablica. To jest w gruncie rzeczy "tablica na sterydach". Żeby rozwinąć tę myśl, muszę otworzyć nowy akapit. Dawać mi tu nowy nagłówek :D!
O CO TU TAK NAPRAWDĘ CHODZI?
JavaScript lubi mocno odstawać od ogólnie przyjętych norm, co napisałem już dużo wcześniej. Tablica jaką tu widzicie jest "rozciągliwa", więc mimo tego, że sama w sobie nie posiada możliwości "ustawiania" długości po inicjalizacji jak się chce, to jest w stanie to robić. To jest de facto złamanie jednej z przyjętych norm jakie panują od czasów języka C, choć JavaScript wcale nie jest osamotniony (język Lua też posiada taką rozciągliwą tablicę). A tak na serio, to nie są wcale sztuczki Merlina, tylko charakterystyczna cecha jednej ze struktur danych jaką jest lista dynamiczna. Lista dynamiczna przechowuje dane tak samo jak tablica (tylko już bez indeksów), z tym że jej rozmiar może się dowolnie zmieniać podczas działania programu! Nawet możecie nie mieć pojęcia jak bardzo JavaScript Was wyręcza od brudnej roboty. W warunkach języka C musielibyście potrafić operować na wskaźnikach, bo tylko one otwierają drogę do modyfikacji rozmiarów listy w trakcie działania programu. A tu chlast, jedna instrukcja i już niczym nie musimy się przejmować :).
Wniosek: tablica w języku JavaScript to tak naprawdę lista dynamiczna mogąca elastycznie zmieniać rozmiary w trakcie działania programu (metody "push" i "pop").
WIELE TYPÓW W JEDNYM MIEJSCU
Oto drugie odstępstwo od normy. Przyjęło się w wielu językach o silnej typizacji, że tablica ma prawo przechowywać obiekty tylko JEDNEGO typu i to w dodatku ściśle określonego podczas jej deklaracji. JavaScript ponownie wypina się na zasady i umożliwia wstawianie wszystkiego jak leci. Czy to "stringi", czy "boolean'y", wolno Wam umieszczać wszystko bez ograniczeń. Wtedy musicie sobie zadać pytanie czy aby na pewno to dobrze, że język pozwala na coś takiego. Jak potem zaprogramujecie pętlę mającą obsłużyć każdy bez wyjątku argument? Wykrywanie typu elementu, dobieranie metody, ewentualne jakieś weryfikacje, o jejku! Ja bym sobie nie zwalał takich kłopotów na kark i mimo wszystko trzymał się jednego typu danych. Obiekty do obiektów, łańcuchy do łańcuchów i pętla osobna na każdy ze zbiorów. Wam radzę robić to samo.
Wniosek: tablica w języku JavaScript potrafi przechowywać wiele wartości RÓŻNYCH typów (choć NIE POLECAM stosowania tej praktyki).
 |
Tablica będąca tak naprawdę listą dynamiczną typu obiektowego, to miejsce do składowania wielu elementów różnych typów.
"const" i w tym przypadku nie stanowi ochrony przed modyfikacją argumentów tablicy, a jedynie zabroni nadpisywania całej tablicy. To samo, co było przy obiekcie.
Tyle informacji Wam wystarczy, aby wiedzieć do czego jest zdolna tablica w języku JavaScript! Jeśli coś zostało napisane zbyt trudnym językiem, wybaczcie.