Tablice to fundament programowania w JavaScript – ale czy wiesz, czym tak naprawdę są i jak działają?
W tym artykule wyjaśnię ci na przykładach kodu czym są tablice, jakie skrywają tajemnice oraz jak możesz je efektywnie wykorzystać!
Pokażę ci też jak poprawnie porównać ze sobą tablice (co nie jest takie proste)!
Zapraszam cię również do kodowania podczas nauki, aby lepiej poznać tablice i nabrać praktycznego doświadczenia. Zaczynajmy!
Czym są tablice w JavaScript?
W JavaScript tablica to miejsce, w której możemy przechowywać wszelakie elementy. Możesz w nich przechować stringi, liczby, wartości logiczne (true lub false), zmienne, funkcje, a nawet inne tablice!
Mamy w tym zakresie dowolność, ale co ważne, elementy w tablicy są ponumerowane i ich kolejność ma znaczenie. Więc kiedy tworzysz tablicę i dodajesz do niej nowe elementy, pamiętaj, że w takiej właśnie kolejności będą ustawione.
Działanie indeksów w tablicach
Jak już wiesz, elementy są ponumerowane. Nie mogłoby się jednak obejść bez odrobiny zamieszania, bowiem indeksy (bo tak nazywają się pozycje elementów w tablicach) zaczynają się od zera, nie od jedynki. Nie przesłyszałeś się – od zera.
Drugi element ma indeks [1] i choć na pierwszy rzut oka może wydawać się to mylące, po chwili praktyki zacznie to nabierać sensu.
Sprawdź na poniższym przykładzie, jak indeksy tablic działają w praktyce.
Tworzenie tablic
Oprócz najpopularniejszego sposobu z nawiasami kwadratowymi możesz stworzyć tablicę na więcej sposobów, co znacznie ułatwi Ci pracę przy bardziej skomplikowanych operacjach na tablicach.
Spróbujmy stworzyć taką tablicę.
Jaki typ ma tablica?
Tablica to taki „specjalny obiekt”.
Dlaczego obiekt? Otóż, jeśli zapytamy JavaScript jaki typ ma tablica, powie nam, że jest to obiekt.
Zobacz, jak wygląda to na przykładzie
Jak sprawdzić, czy w zmiennej jest tablica?
No właśnie, jak? Tutaj dowiemy się, dlaczego tablica jest specjalnym obiektem - o ile w ogóle nim jest!
Jak już wspomniałem wcześniej, tablica różni się od zwyczajnego obiektu w JavaScript, ponieważ jest uporządkowana, a kolejność dodawania elementów ma znaczenie.
A jak w takim razie sprawdzić, czy w jakiejś zmiennej jest tablica?
Użyjemy do tego specjalnej metody isArray – ona prawdę nam powie.
A dla ciekawskich, metoda isArray zadziała też na obiektach, które rozszerzają klasę Array.
Jak porównać ze sobą tablice?
Tablica podobnie jak obiekty i funkcje jest typem złożonym. Znaczy to w skrócie tyle, że JavaScript nie przechowuje w niej wszystkich naszych elementów, a jedynie „wskazówki dotarcia” do miejsca w pamięci, gdzie te elementy się znajdują – jeden za drugim. Warto też wiedzieć, że to miejsce w pamięci to referencja – to właśnie ona jest przypisywana do zmiennej, w której jest tablica.
O typach złożonych przeczytasz w innym artykule, ale najważniejsza rzecz, którą powinieneś wiedzieć, to w jaki sposób porównać ze sobą elementy dwóch tablic.
Sprawdźmy to!
Niestety (lub stety) nie porównamy ze sobą elementów tablic w ten sposób… A dlaczego?
Dzieje się to właśnie przez fakt, że tablice są typem złożonym i JavaScript porównuje ze sobą referencje do miejsca w pamięci, który jest unikalny dla każdej nowej tablicy, a przecież w tym przypadku stworzyliśmy dwie tablice – więc referencje różnią się od siebie.
To jak poprawnie porównać ze sobą zawartość dwóch tablic?
Mamy na to wiele sposobów, a najprostsze to zamiana tablic na stringi (w formacie JSON) i porównanie ze sobą tych stringów, albo po prostu stare dobre przeiterowanie po elementach tablic i porównanie ich ze sobą „manualnie”.
Na ostatnim przykładzie zobaczymy, jak porównać ze sobą zawartość dwóch tablic dzięki zamianie ich elementów na stringi.
Teraz już wiesz, jak tworzyć tablice, co możesz w nich przechowywać i jak porównywać tablice oraz ich zawartość!
Nie myśl jednak, że nic cię już nie zaskoczy... Ale o tym w kolejnych materiałach poświęconych tablicom i metodom tablicowym, które pojawią się już niedługo!
