Tablice w JavaScripcie: indeksy od zera, length, push, pop, splice, indexOf, join, sort i forEach, obiekt jako zbiór par klucz i wartość oraz biblioteki String, Math i Date z pułapką sortowania liczb i miesięcy liczonych od zera. Lekcja 11.5 kursu INF.03.
Tablica to zmienna trzymająca wiele wartości pod jedną nazwą, każdą pod własnym numerem, a obiekt to zbiór par klucz i wartość, w którym zamiast numeru stoi nazwa. Oba są typami złożonymi, więc jedna nazwa koszyk wystarcza na całą listę towarów zamiast pięciu osobnych zmiennych. W części pisemnej wracają pytania o element o podanym indeksie, o poprawny zapis tworzący tablicę, o to, co wypisze skrypt po push albo sort, oraz o metody bibliotek String, Math i Date. W zadaniu praktycznym z tablicy generuje się listę <li>, a Math i Date liczą wartość wstawianą potem do wskazanego elementu strony.
Tablica: zapis, indeksy i długość
Indeks to numer pozycji, pod którą element leży w tablicy, liczony zawsze od zera: pierwszy element ma indeks 0, drugi 1, a ostatni o jeden mniej niż liczba elementów. Tablicę tworzy się nawiasami kwadratowymi z wartościami po przecinku albo konstruktorem new Array() (NOWA TABLICA); oba zapisy działają tak samo i oba stoją w arkuszach. Elementy nie muszą być jednego typu: w jednej tablicy mogą leżeć liczby, napisy i wartości logiczne.
const ceny = [120, 45, 650];
const sprzet = new Array("mysz", "monitor", "klawiatura");
console.log(ceny[0]);
console.log(ceny.length);
console.log(ceny[ceny.length - 1]);
length (DŁUGOŚĆ) to liczba elementów, a nie największy indeks, więc ostatni element stoi pod length minus jeden. Odwołanie do nieistniejącego indeksu nie zgłasza błędu, tylko oddaje undefined (NIEOKREŚLONA). Przypisanie pod nowy indeks dokłada element, a const (STAŁA) przy tablicy blokuje wyłącznie podmianę całej tablicy, nie zmianę jej zawartości. Starsze arkusze deklarują tablice słowem var, na przykład var liczby = [1, 2, 3];, i działa to tak samo.
Pułapka: new Array[1, 2, 3] jest błędem składni, bo konstruktor wywołuje się nawiasami okrągłymi. new Array(5) z jedną liczbą daje pustą tablicę o długości 5, a nie tablicę z jedną piątką.
Dodawanie, usuwanie i szukanie elementów
Metoda to funkcja przypisana do obiektu, wywoływana po kropce za jego nazwą. Tablica ma komplet metod do zmiany zawartości i każda z nich pracuje na tablicy, na której ją wywołano.
push("x")
dokłada element na koniec
nową długość tablicy
pop()
zabiera ostatni element
zabrany element
unshift("x")
dokłada element na początek
nową długość tablicy
shift()
zabiera pierwszy element
zabrany element
splice(1, 2)
usuwa 2 elementy od indeksu 1
tablicę usuniętych
indexOf("x")
szuka wartości
indeks albo minus 1
join(", ")
skleja elementy w napis
gotowy napis
const lista = ["mleko", "chleb"];
lista.push("ser");
lista.unshift("woda");
console.log(lista.join(", "));
console.log(lista.pop());
console.log(lista.shift());
console.log(lista.length);
woda, mleko, chleb, ser
ser
woda
2
push (WEPCHNIJ) i pop (WYPCHNIJ) pracują na końcu tablicy, unshift i shift na jej początku, więc przesuwają indeksy pozostałych elementów. join (POŁĄCZ) skleja elementy w jeden napis, wstawiając między nie podany separator; bez argumentu wstawia przecinek. splice (WYTNIJ) bierze indeks początku, liczbę elementów do usunięcia i opcjonalnie wartości do wstawienia w to miejsce, więc jedną metodą wycina się ze środka i wstawia do środka.
const dni = ["pon", "wt", "sr", "czw"];
dni.splice(1, 2);
console.log(dni.join(" "));
dni.splice(1, 0, "wt");
console.log(dni.join(" "));
indexOf (INDEKS OD) oddaje indeks pierwszego wystąpienia szukanej wartości, a gdy jej nie ma, oddaje minus jeden. Obecność sprawdza się więc porównaniem if (kolory.indexOf("bialy")!== -1), bo zero jest poprawnym indeksem i samo w warunku zachowałoby się jak fałsz.
const kolory = ["czarny", "zielony", "bialy"];
console.log(kolory.indexOf("zielony"));
console.log(kolory.indexOf("czerwony"));
Przejście po tablicy, sortowanie i odwracanie
Przejście po tablicy to wykonanie tego samego kodu dla każdego jej elementu po kolei. Klasyczna pętla for (DLA) używa licznika jako indeksu i kończy się na warunku i < tablica.length. Same pętle omawia lekcja o instrukcjach sterujących. Warunek ze znakiem < zatrzymuje pętlę na ostatnim elemencie; wersja z <= sięgnęłaby o jeden indeks za daleko i dołożyła do sumy undefined. forEach (DLA KAŻDEGO) robi to samo bez licznika: wykonuje podaną funkcję raz na każdy element, gdzie pierwszy argument funkcji to wartość elementu, a drugi jego indeks. Funkcjom poświęcona jest osobna lekcja. const produkty = ["Mysz", "Monitor", "Klawiatura"];
produkty.forEach(function (nazwa, indeks) {
console.log(indeks + ": " + nazwa);
});
0: Mysz
1: Monitor
2: Klawiatura
sort (SORTUJ) bez argumentu zamienia elementy na napisy i porządkuje je znak po znaku, więc liczby ustawia alfabetycznie, a nie rosnąco. Porządek liczbowy daje dopiero funkcja porównująca a - b dla rosnącego i b - a dla malejącego. Kody z tej lekcji uruchamia w przeglądarce interpreter JavaScript. Napis „100" wypadł przed „12", bo po wspólnej jedynce zero stoi przed dwójką. Napisy sort porządkuje alfabetycznie bez dodatkowej funkcji, a reverse (ODWRÓĆ) odwraca kolejność, więc razem dają porządek malejący.
const kolory = ["zielony", "czarny", "bialy"];
kolory.sort();
console.log(kolory.join(", "));
kolory.reverse();
console.log(kolory.join(", "));
bialy, czarny, zielony
zielony, czarny, bialy
Pułapka: sort i reverse przestawiają elementy w tablicy, na której je wywołano, zamiast oddawać przestawioną kopię. Po liczby.sort() pierwotna kolejność jest stracona.
Obiekt: pary klucz i wartość
Obiekt to zbiór nazwanych wartości, w którym każdą wskazuje klucz, czyli własna nazwa zamiast numeru. Zapisuje się go w nawiasach klamrowych, para po parze: klucz, dwukropek, wartość, przecinek. Do wartości sięga się kropką z nazwą klucza albo nawiasem kwadratowym z kluczem podanym jako napis.
const produkt = {
nazwa: "Mysz bezprzewodowa",
cena: 89.99,
dostepny: true
};
console.log(produkt.nazwa);
console.log(produkt["cena"]);
produkt.cena = 79.99;
produkt.kolor = "czarny";
console.log(produkt.cena + " " + produkt.kolor);
Mysz bezprzewodowa
89.99
79.99 czarny
Nawias kwadratowy potrafi więcej niż kropka: przyjmuje klucz trzymany w zmiennej, jak produkt[pole], i klucz, który nie jest poprawną nazwą, na przykład z odstępem. Nowy klucz powstaje przez samo przypisanie, a odwołanie do nieistniejącego oddaje undefined. W arkuszach obiekt z kluczami tekstowymi bywa nazywany tablicą asocjacyjną: to ta sama konstrukcja co tablica asocjacyjna w PHP, tylko zapisana klamrami. Dane strony sklepu mają zwykle kształt tablicy obiektów: jeden obiekt na produkt.
const koszyk = [
{ nazwa: "Mysz", cena: 89 },
{ nazwa: "Monitor", cena: 650 }
];
let suma = 0;
koszyk.forEach(function (pozycja) {
suma += pozycja.cena;
});
console.log(koszyk[1].nazwa + ": " + koszyk[1].cena);
console.log("Razem: " + suma);
Odwołanie koszyk[1].nazwa czyta się od lewej: element o indeksie 1, a z niego wartość klucza nazwa. Zamiana kolejności na koszyk.nazwa[1] to błąd, bo tablica nie ma klucza nazwa.
Biblioteka String: operacje na napisach
Biblioteka wbudowana to gotowy zbiór metod dostępny w każdej przeglądarce, bez dołączania jakiegokolwiek pliku. String (NAPIS) obsługuje tekst: metody wywołuje się po kropce za zmienną albo za samym napisem w cudzysłowie, a znaki numerowane są od zera, tak jak elementy tablicy.
const napis = "Powodzenia na egzaminie";
console.log(napis.length);
console.log(napis.toUpperCase());
console.log(napis.substring(2, 4));
console.log(napis.indexOf("na"));
console.log(napis.charAt(0));
23
POWODZENIA NA EGZAMINIE
wo
11
P
length napisu to liczba znaków razem z odstępami i jest właściwością, nie metodą, więc pisze się je bez nawiasów. substring wycina fragment od pierwszego indeksu do drugiego, przy czym znak spod drugiego indeksu już nie wchodzi. slice wycina to samo, ale przyjmuje również indeksy ujemne, liczone od końca: napis.slice(-9) daje egzaminie. charAt (ZNAK POD) oddaje pojedynczy znak spod podanego indeksu, a indexOf szuka fragmentu w napisie i przy braku dopasowania oddaje minus jeden, dokładnie jak w tablicy.
const dane = "mysz;monitor;klawiatura";
const czesci = dane.split(";");
console.log(czesci.length);
console.log(czesci[1]);
console.log(dane.replace("mysz", "MYSZ"));
3
monitor
MYSZ;monitor;klawiatura
split (PODZIEL) tnie napis na tablicę w miejscach podanego separatora i jest odwrotnością join, replace (ZASTĄP) podmienia pierwsze wystąpienie szukanego fragmentu, a toUpperCase zamienia litery na wielkie.
Pułapka: metody napisu nie zmieniają napisu, tylko oddają nowy. Samo napis.toUpperCase(); nie daje żadnego efektu, wynik trzeba przypisać albo od razu wypisać.
Biblioteki Math i Date
Math (MATEMATYKA) to wbudowana biblioteka liczbowa, której metody wywołuje się wprost po nazwie, bez tworzenia obiektu. Wracają w pytaniach o zaokrąglanie i o losowanie.
console.log(Math.round(2.5), Math.round(2.4));
console.log(Math.floor(2.8), Math.ceil(2.1));
console.log(Math.abs(-7), Math.pow(2, 10), Math.sqrt(81));
console.log(Math.min(4, 9, 2), Math.max(4, 9, 2));
round (ZAOKRĄGLIJ) idzie do najbliższej liczby całkowitej i połówkę zaokrągla w górę, floor (PODŁOGA) zawsze w dół, a ceil (SUFIT) zawsze w górę. Dalej: abs to wartość bezwzględna, pow potęga o podanej podstawie i wykładniku, sqrt pierwiastek kwadratowy, a min i max najmniejsza i największa z podanych liczb.
const dol = 1;
const gora = 6;
const los = Math.floor(Math.random() * (gora - dol + 1)) + dol;
console.log(los >= dol && los <= gora);
Wynik: true, bo wylosowana liczba zawsze mieści się w zakresie od 1 do 6. Math.random() oddaje liczbę pseudolosową od zera włącznie do jedynki wyłącznie, więc samo z siebie nigdy nie da liczby całkowitej. Wzór na liczbę całkowitą z zakresu od dol do gora włącznie to Math.floor(Math.random() * (gora - dol + 1)) + dol; pominięte + 1 odcina górną granicę.
Date (DATA) to biblioteka daty i czasu, której obiekt trzeba najpierw utworzyć przez new Date(). Bez argumentów bierze bieżącą datę i czas z komputera, a z argumentami rok, miesiąc i dzień ustawia datę wskazaną.
const data = new Date(2026, 4, 17);
console.log(data.getFullYear());
console.log(data.getMonth());
console.log(data.getDate());
console.log(data.getDay());
Czwórka w drugim argumencie to maj, nie kwiecień: styczeń ma numer 0, a grudzień 11, więc do wyświetlenia numeru miesiąca dodaje się jeden. getFullYear oddaje pełny czterocyfrowy rok, getDate dzień miesiąca, a getDay dzień tygodnia jako numer liczony od niedzieli, która ma zero: 17 maja 2026 wypada właśnie w niedzielę.
Pułapka: getMonth liczy miesiące od zera, a getFullYear i getDate liczą normalnie. getDate to dzień miesiąca, getDay to dzień tygodnia.
Na egzaminie
Pytania pisemne o tablice mają kilka stałych kształtów. Ramka z tablicą imion i pytanie o odwołanie do jednej wartości: licz od zera, więc czwarte imię stoi pod indeksem 3, a zapis z samą wartością w nawiasie kwadratowym odwołuje się do klucza, nie do numeru. Pytanie o niepoprawny składniowo zapis tworzący tablicę: konstruktor bierze nawiasy okrągłe, więc new Array[1, 2, 3] odpada, a [3] jest poprawną tablicą jednoelementową. Pytanie, do czego służy obiekt typu tablica: do przechowywania wielu wartości dowolnego typu, nie tylko liczb i nie tylko napisów. Pytanie o rodzaj przedstawionej definicji: nawias kwadratowy to tablica, a klamra z parami klucz i wartość to obiekt, w arkuszach nazywany też tablicą asocjacyjną.
Biblioteki wracają w pytaniach o pojedyncze metody. Math.pow wyznacza potęgę, Math.sqrt pierwiastek, Math.random liczbę pseudolosową, a metodą, która dla 2.8 zwraca 2, jest Math.floor, bo round dałoby 3 tak samo jak ceil. Do obiektu Date należą getMonth i getDay, a nie concat ani pop. Fragment napisu między dwoma indeksami wycina slice albo substring, natomiast trim usuwa odstępy z brzegów, concat skleja napisy, a zapis s = t.length; przypisuje długość napisu, nie jego fragment.
Najczęstsze pytanie brzmi „co wyświetli przedstawiony skrypt" i rozwiązuje się je zawsze tak samo: przepisz tablicę, wykonaj metodę po metodzie i dopiero na końcu odczytaj wynik. Uwagi wymaga sort bez funkcji porównującej, bo dla liczb daje porządek alfabetyczny, oraz pop i shift, które zwracają zabrany element, a nie skróconą tablicę.
W zadaniu praktycznym tablica bywa źródłem listy: pętla skleja z jej elementów napis ze znacznikami <li>, a gotowy napis trafia do wskazanego elementu przez innerHTML. Zapis document.write wykonany po załadowaniu strony kasuje jej dotychczasową treść, więc na prawdziwej stronie używa się innerHTML albo metod modelu DOM, opisanych w osobnej lekcji. Obok tego arkusz zamawia sumę i średnią z tablicy liczb, wylosowanie liczby z zakresu oraz wypisanie bieżącej daty, zwykle z ręcznym dodaniem jedynki do numeru miesiąca. Ściąga
const tab = [1, 2, 3];
tablica trzech elementów, indeksy 0, 1 i 2
new Array(1, 2, 3)
ta sama tablica zapisana konstruktorem
tab[0]
pierwszy element, bo indeksy liczą się od zera
tab.length
liczba elementów, ostatni indeks to length minus 1
tab.push("x")
dokłada element na koniec tablicy
tab.pop()
zabiera ostatni element i zwraca go
tab.unshift("x")
dokłada element na początek tablicy
tab.shift()
zabiera pierwszy element i zwraca go
tab.splice(1, 2)
usuwa dwa elementy, zaczynając od indeksu 1
tab.splice(1, 0, "x")
wstawia element na pozycję 1, nic nie usuwając
tab.indexOf("x")
indeks pierwszego wystąpienia, minus 1 przy braku
tab.join(", ")
skleja elementy w jeden napis z separatorem
tab.sort()
porządkuje jak napisy, więc 100 wypada przed 12
tab.sort(function (a, b) { return a - b; })
porządkuje liczby rosnąco
tab.reverse()
odwraca kolejność elementów w tablicy
tab.forEach(function (el) { })
wykonuje funkcję raz na każdy element
{ nazwa: "Mysz", cena: 89 }
obiekt, czyli zbiór par klucz i wartość
obiekt.cena
wartość klucza, zapis z kropką
obiekt["cena"]
to samo, zapis przyjmujący klucz ze zmiennej
napis.length
liczba znaków, właściwość bez nawiasów
napis.toUpperCase()
nowy napis zapisany wielkimi literami
napis.substring(2, 4)
fragment od indeksu 2 do 3 włącznie
napis.charAt(0)
pojedynczy znak spod podanego indeksu
napis.split(";")
dzieli napis na tablicę po separatorze
napis.replace("a", "b")
podmienia pierwsze wystąpienie fragmentu
Math.round(2.5)
3, do najbliższej liczby całkowitej
Math.floor(2.8)
2, zawsze w dół
Math.ceil(2.1)
3, zawsze w górę
Math.pow(2, 10)
1024, potęga o podanym wykładniku
Math.floor(Math.random() * 6) + 1
losowa liczba całkowita od 1 do 6
new Date().getMonth()
numer miesiąca, styczeń to 0, grudzień 11
new Date().getDay()
dzień tygodnia, niedziela to 0