Tablice w JavaScript 1/3: lista wartości pod jedną nazwą
Plan tematu (3 godziny):
Godzina 1 (dziś): czym jest tablica, tworzenie, odczyt elementu, .length
Godzina 2: dopisywanie i zamiana elementów, klucz tekstowy
Godzina 3: pętla po wszystkich elementach tablicy
Ćwiczenie: tablica owoców, odczyt pierwszego i ostatniego elementu
Rozgrzewka · 3 minuty
Rozgrzewka: do...while, break i continue
Czym różni się do...while od while, jeśli chodzi o to, kiedy sprawdzany jest warunek?
Co robi break wewnątrz pętli for?
Co robi continue - czym różni się od break?
Część 1 · Tablice w innych językach
Tablice w PHP i w JavaScript
Jeśli piszecie też w PHP, znacie stamtąd tablice: jedna zmienna, wiele wartości, numer pierwszej wartości to 0. W JavaScript zasada jest dokładnie ta sama - zmienia się tylko zapis.
Tablica (ang. array) to jedna zmienna, w której trzymacie wiele wartości naraz - jak szafka z ponumerowanymi szufladami, każda z jedną rzeczą w środku. Numer szuflady nazywa się indeksem i zawsze zaczyna się od 0.
MDN: Learn_web_development/Core/Scripting/Arrays (sekcja „What is an array?”: „Arrays are generally described as 'list-like objects'... we can access each value inside the list individually”)
Część 3 · Tworzenie tablicy
Dwa poprawne zapisy, jeden błędny
Najczęściej używa się literału [...] - krócej i tak radzi MDN. Zapis z new Array() działa tak samo, ale wymaga okrągłych nawiasów; kwadratowe po Array to błąd składni.
MDN: Learn_web_development/Core/Scripting/Arrays (sekcja „Creating arrays”: „Arrays consist of square brackets and items that are separated by commas”)
Część 4 · Odczyt elementu i długość
array[index] i .length
const shopping = ["bread", "milk", "cheese", "hummus", "noodles"];
console.log(shopping[0]); // bread
console.log(shopping.length); // 5 - liczba elementów, nie ostatni indeks
console.log(shopping[shopping.length - 1]); // noodles - ostatni element
Ciekawostka: informatyk Edsger Dijkstra 11 sierpnia 1982 roku wytłumaczył, dlaczego liczenie od zera jest wygodniejsze niż od jedynki. Numer szuflady w tablicy to po prostu liczba szuflad, które stoją przed nią, więc pierwsza szuflada (przed nią nie ma żadnej) ma numer 0. To ten sam powód, dla którego ostatni indeks tablicy to length - 1, a nie length: numer ostatniego elementu jest zawsze o jeden mniejszy niż liczba wszystkich elementów.
MDN: Learn_web_development/Core/Scripting/Arrays (sekcje „Accessing and modifying array items”: „the first item has index 0”; „Finding the length of an array”) · ciekawostka: cs.utexas.edu/~EWD/transcriptions/EWD08xx/EWD831.html (Edsger W. Dijkstra, „Why numbering should start at zero”, 11 sierpnia 1982)
Część 5 · Typy w tablicy i indeks poza zakresem
Tablica mieszana i pusty indeks
Tak jak w PHP, jedna tablica w JavaScript może trzymać wartości różnych typów naraz - tekst, liczbę, wartość logiczną, nawet inną tablicę w środku.
const student = ["Ala", 25, true];
console.log(student[0]); // Ala
console.log(student[1]); // 25
console.log(student[2]); // true
console.log(student[10]); // undefined - takiej szuflady nie ma, JS nie zgłasza błędu
Odwołanie do indeksu, którego tablica nie ma, nie wywala błędu jak w wielu innych językach - JavaScript po prostu zwraca undefined. To częsty błąd w kodzie: literówka w indeksie, a program działa dalej z pustą wartością zamiast się zatrzymać.
MDN: Learn_web_development/Core/Scripting/Arrays (sekcja „Creating arrays”: „we can store various data types... and even mix data types in a single array”)
Egzamin EE.09 / E.14
Tak pytają na egzaminie
1. Który zapis tworzący tablicę w JavaScript jest niepoprawny składniowo?
var numbers = [3];
var numbers = [1, 2, 3];
var numbers = new Array[1, 2, 3];
var numbers = new Array(1, 2, 3);
2. Odwołaniem do imienia Agata, zawartym w przedstawionej tablicy JavaScript, jest element
var names = newArray('Anna','Joanna','Monika','Agata');
names[4];
names[3];
names[Agata];
names['Agata'];
CKE, EE.09, czerwiec 2026, zadanie 7 · CKE, E.14, czerwiec 2019, zadanie 28
Ćwiczenie przy komputerze · 20 minut
Ćwiczenie: tablica owoców
Otwórz script.js w folderze swojego projektu (ten sam plik co na poprzednich lekcjach).
Utwórz tablicę let fruits = ["jabłko","gruszka","banan"];
Wypisz w konsoli pierwszy element: console.log(fruits[0]);
Wypisz ostatni element przez length - 1: console.log(fruits[fruits.length - 1]);
Wypisz całą tablicę: console.log(fruits); - sprawdź w konsoli (F12 → Console), że widzicie wszystkie trzy elementy.
Dla chętnych: zapisz zmiany w swoim repozytorium - commit „Dodaje tablice owocow”.
Na koniec
Sprawdź się
Jakim numerem indeksu jest opisany pierwszy element tablicy?
Macie tablicę const colors = ["czerwony","zielony","niebieski"];. Jak odczytać jej długość i jak odczytać ostatni element bez wpisywania liczby na sztywno?
Co zwróci JavaScript, gdy odwołacie się do indeksu, którego tablica nie ma?
Na następnej lekcji: dopisywanie i zamiana elementów w tablicy.
Poza szkołą
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
Literał const arr = [1, 2, 3];
Ten sam zapis - to standardowy, zalecany sposób tworzenia tablicy w kodzie produkcyjnym.
nadal w użyciu
new Array(1, 2, 3)
Działa, ale rzadko spotykany w realnym kodzie - dłuższy zapis bez żadnej korzyści nad literałem.
unikane
Ręczny odczyt tab[tab.length - 1]
ES2022 dodał Array.prototype.at(-1) - ten sam efekt, krótszy zapis, wsparcie we wszystkich aktualnych przeglądarkach.