Jeśli dopiero zaczynasz swoją przygodę z JavaScriptem, to na pewno szybko natkniesz się na tablice. I dobrze, bo to jeden z najczęściej używanych typów danych w tym języku! Tablice pozwalają nam przechowywać wiele wartości w jednym miejscu – coś jak pudełko, w którym trzymasz swoje ulubione gadżety. W tym artykule pokażę Ci, jak z nich korzystać, jak je modyfikować i jakie triki warto znać.
Co to właściwie jest tablica?
Tablica (ang. array) to po prostu zbiór elementów, do których możemy się odwoływać za pomocą indeksów (czyli numerów pozycji w tablicy).
W JavaScripcie tablica może przechowywać różne typy danych – liczby, teksty, obiekty, a nawet inne tablice!
Przykład najprostszej tablicy:
const owoce = ["jabłko", "banan", "gruszka"];
Tutaj mamy trzy elementy: jabłko, banan i gruszka.
Każdy z nich ma swój indeks:
owoce[0]→ „jabłko”owoce[1]→ „banan”owoce[2]→ „gruszka”
Pamiętaj: liczenie zaczyna się od zera, a nie od jedynki. To częsty błąd początkujących.
Tworzenie tablic – różne sposoby
Najczęściej używamy nawiasów kwadratowych [], ale nie jest to jedyny sposób.
const liczby = [1, 2, 3, 4, 5]; const puste = []; // pusta tablica const mieszane = [1, "tekst", true, null];
Możesz też użyć konstruktora Array:
const kolory = new Array("czerwony", "zielony", "niebieski");
Ale uwaga! Ten sposób jest mniej popularny, bo bywa mylący:
const myArray = new Array(5); // tworzy pustą tablicę o długości 5, a nie z liczbą 5!
Jak uzyskać dostęp do elementów tablicy?
Dostęp do elementów odbywa się za pomocą indeksu.
Prosty przykład:
const zwierzeta = ["pies", "kot", "papuga"]; console.log(zwierzeta[0]); // pies console.log(zwierzeta[2]); // papuga
Jeśli spróbujesz dostać się do indeksu, który nie istnieje – otrzymasz undefined.
Dodawanie i usuwanie elementów
Jedna z najfajniejszych rzeczy w tablicach to możliwość łatwego dodawania i usuwania elementów.
Dodawanie elementów
- push() – dodaje element na końcu:
const filmy = ["Matrix", "Incepcja"]; filmy.push("Avatar"); console.log(filmy); // ["Matrix", "Incepcja", "Avatar"] - unshift() – dodaje element na początku:
filmy.unshift("Titanic"); console.log(filmy); // ["Titanic", "Matrix", "Incepcja", "Avatar"] - splice() – pozwala dodać element w dowolnym miejscu:
filmy.splice(2, 0, "Gladiator"); console.log(filmy); // ["Titanic", "Matrix", "Gladiator", "Incepcja", "Avatar"]
Usuwanie elementów
- pop() – usuwa ostatni element:
filmy.pop(); console.log(filmy); // ["Titanic", "Matrix", "Gladiator", "Incepcja"] - shift() – usuwa pierwszy element:
filmy.shift(); console.log(filmy); // ["Matrix", "Gladiator", "Incepcja"] - splice() – usuwa element z dowolnego miejsca:
filmy.splice(1, 1); console.log(filmy); // ["Matrix", "Incepcja"]
Iterowanie po tablicach – jak przejść przez wszystkie elementy?
W codziennej pracy z tablicami bardzo często będziesz chciał przejść po wszystkich elementach i coś z nimi zrobić.
Oto kilka najpopularniejszych sposobów:
1. Pętla for
Klasyka programowania:
const liczby = [10, 20, 30, 40];
for (let i = 0; i < liczby.length; i++) {
console.log(liczby[i]);
}
2. for...of – prostsza wersja
Czytelniejsza i krótsza:
for (const liczba of liczby) {
console.log(liczba);
}
3. forEach() – metoda tablicowa
Idealna, gdy nie potrzebujesz ręcznie kontrolować indeksów:
liczby.forEach((liczba, index) => {
console.log(`Element ${index}: ${liczba}`);
});
Wyszukiwanie elementów
Tablice mają kilka bardzo przydatnych metod do znajdowania rzeczy w środku.
includes()
Sprawdza, czy tablica zawiera dany element:
const imiona = ["Ania", "Kuba", "Ola"];
console.log(imiona.includes("Kuba")); // true
console.log(imiona.includes("Tomek")); // false
indexOf()
Zwraca indeks pierwszego wystąpienia elementu (albo -1, jeśli go nie ma):
console.log(imiona.indexOf("Ola")); // 2
find() i findIndex()
Pozwalają znaleźć element lub jego indeks na podstawie warunku:
const liczby = [5, 12, 8, 130, 44]; const duza = liczby.find(num => num > 50); console.log(duza); // 130
Sortowanie i odwracanie tablic
Czasem trzeba uporządkować dane.
sort()
const liczby = [40, 100, 1, 5, 25]; liczby.sort((a, b) => a - b); // sortowanie numeryczne console.log(liczby); // [1, 5, 25, 40, 100]
Uwaga: bez funkcji porównującej JavaScript sortuje… jak tekst!
Czyli np. [1, 10, 2] → [1, 10, 2]
reverse()
Odwraca kolejność elementów:
liczby.reverse(); console.log(liczby); // [100, 40, 25, 5, 1]
Łączenie i rozdzielanie tablic
Tablice można łatwo łączyć, kopiować i dzielić.
concat()
const a = [1, 2]; const b = [3, 4]; const razem = a.concat(b); console.log(razem); // [1, 2, 3, 4]
spread operator (…)
Nowoczesny, bardzo popularny sposób:
const razem2 = [...a, ...b]; console.log(razem2); // [1, 2, 3, 4]
join()
Zamienia tablicę na tekst (np. do wyświetlenia listy):
const owoce = ["jabłko", "banan", "kiwi"];
console.log(owoce.join(", ")); // "jabłko, banan, kiwi"
split()
To odwrotność join() – działa na stringach, nie tablicach:
const tekst = "jabłko,banan,kiwi";
const nowaTablica = tekst.split(",");
console.log(nowaTablica); // ["jabłko", "banan", "kiwi"]
Mapowanie i filtrowanie tablic
To bardzo potężne narzędzia w nowoczesnym JavaScripcie.
map()
Tworzy nową tablicę z przetworzonych elementów:
const liczby = [1, 2, 3, 4]; const podwojone = liczby.map(num => num * 2); console.log(podwojone); // [2, 4, 6, 8]
filter()
Zwraca tylko te elementy, które spełniają warunek:
const wiek = [12, 18, 25, 15, 30]; const dorosli = wiek.filter(w => w >= 18); console.log(dorosli); // [18, 25, 30]
reduce()
Służy do sumowania lub redukcji całej tablicy do jednej wartości:
const suma = liczby.reduce((acc, val) => acc + val, 0); console.log(suma); // 10
Przykład praktyczny – zarządzanie listą zakupów
Pokażmy to w praktyce.
Załóżmy, że tworzysz prostą aplikację listy zakupów.
let listaZakupow = ["mleko", "chleb", "masło"];
// Dodaj nowy produkt
listaZakupow.push("ser");
// Usuń pierwszy produkt
listaZakupow.shift();
// Sprawdź, czy jest "chleb"
if (listaZakupow.includes("chleb")) {
console.log("Masz już chleb na liście!");
}
// Posortuj alfabetycznie
listaZakupow.sort();
// Wyświetl wszystkie elementy
listaZakupow.forEach((produkt, i) => {
console.log(`${i + 1}. ${produkt}`);
});
Rezultat:
Masz już chleb na liście! 1. chleb 2. masło 3. mleko 4. ser
Mini-projekt: filtrowanie danych użytkowników
Załóżmy, że masz tablicę obiektów z danymi użytkowników i chcesz wyświetlić tylko tych pełnoletnich.
const users = [
{ name: "Kasia", age: 17 },
{ name: "Bartek", age: 22 },
{ name: "Ola", age: 19 },
{ name: "Michał", age: 15 }
];
const pelnoletni = users.filter(user => user.age >= 18);
pelnoletni.forEach(user => {
console.log(`${user.name} ma ${user.age} lat.`);
});
Wynik:
Bartek ma 22 lat. Ola ma 19 lat.
To świetny przykład, jak tablice ułatwiają pracę z danymi.
Nowoczesne triki z tablicami
Destrukturyzacja tablic
const dane = ["Adam", 28, "programista"]; const [imie, wiek, zawod] = dane; console.log(imie); // "Adam" console.log(wiek); // 28 console.log(zawod); // "programista"
Operator rest (...)
Pozwala zebrać resztę elementów:
const [pierwszy, ...reszta] = [1, 2, 3, 4]; console.log(pierwszy); // 1 console.log(reszta); // [2, 3, 4]
Podsumowanie
Tablice w JavaScripcie to niezwykle potężne narzędzie, które towarzyszy Ci praktycznie w każdym projekcie — od prostych list po złożone operacje na danych.