Tablice w JavaScript
1. Wprowadzenie
Tablica (ang. array) to struktura danych, która pozwala przechowywać wiele wartości w jednej zmiennej.
W JavaScript tablice są dynamiczne, co oznacza, że:
* Mogą przechowywać elementy różnych typów (liczby, stringi, obiekty, inne tablice),
* Ich rozmiar może się zmieniać w trakcie działania programu,
* Są indeksowane od 0 – pierwszy element ma indeks 0, drugi 1, itd.
Tablice należą do typów referencyjnych – zmienna przechowuje referencję (wskaźnik) do tablicy, a nie jej kopię.
2. Tworzenie tablic
2.1 Literał tablicy (najczęstszy sposób)
2.2 Konstruktor Array()
Uwaga: Konstruktor jest rzadziej używany, ponieważ może prowadzić do niejednoznaczności.
2.3 Pusta tablica
3. Dostęp do elementów tablicy
Elementy tablicy są indeksowane od 0.
Dostęp do nieistniejącego indeksu:
4. Modyfikowanie elementów
5. Właściwość length
Zwraca liczbę elementów w tablicy.
Modyfikowanie length:
6. Podstawowe metody tablic
6.1 Dodawanie elementów
| Metoda | Opis | Przykład |
|---|---|---|
push() |
Dodaje element na końcu tablicy | arr.push("nowy") |
unshift() |
Dodaje element na początku | arr.unshift("pierwszy") |
Przykład:
6.2 Usuwanie elementów
| Metoda | Opis | Przykład |
|---|---|---|
pop() |
Usuwa ostatni element | arr.pop() |
shift() |
Usuwa pierwszy element | arr.shift() |
Przykład:
6.3 Łączenie i wycinanie
| Metoda | Opis | Przykład |
|---|---|---|
concat() |
Łączy dwie lub więcej tablic | arr1.concat(arr2) |
slice() |
Zwraca wycinek tablicy (nie modyfikuje oryginału) | arr.slice(1, 3) |
splice() |
Usuwa/dodaje elementy (modyfikuje oryginał) | arr.splice(1, 2, "nowy") |
Przykład concat():
Przykład slice():
Przykład splice():
Parametry splice():
* splice(startIndex, deleteCount, item1, item2, ...)
6.4 Wyszukiwanie elementów
| Metoda | Opis | Zwraca |
|---|---|---|
indexOf() |
Zwraca indeks pierwszego wystąpienia | Indeks lub -1 |
lastIndexOf() |
Zwraca indeks ostatniego wystąpienia | Indeks lub -1 |
includes() |
Sprawdza, czy element istnieje | true lub false |
find() |
Zwraca pierwszy element spełniający warunek | Element lub undefined |
findIndex() |
Zwraca indeks pierwszego elementu | Indeks lub -1 |
Przykład:
Przykład find():
6.5 Sortowanie i odwracanie
| Metoda | Opis | Przykład |
|---|---|---|
sort() |
Sortuje tablicę (modyfikuje oryginał) | arr.sort() |
reverse() |
Odwraca kolejność elementów | arr.reverse() |
Przykład sortowania stringów:
Sortowanie liczb (wymaga funkcji porównującej):
Odwracanie:
6.6 Przekształcanie tablicy w string
| Metoda | Opis | Przykład |
|---|---|---|
join() |
Łączy elementy w string z separatorem | arr.join(", ") |
toString() |
Konwertuje tablicę na string | arr.toString() |
Przykład:
7. Metody funkcyjne (higher-order functions)
JavaScript oferuje metody, które przyjmują funkcję jako argument i działają na każdym elemencie tablicy.
7.1 forEach() – iteracja po tablicy
Wykonuje funkcję dla każdego elementu.
7.2 map() – transformacja elementów
Tworzy nową tablicę z wynikami funkcji zastosowanej do każdego elementu.
7.3 filter() – filtrowanie elementów
Zwraca nową tablicę zawierającą tylko elementy spełniające warunek.
7.4 reduce() – redukcja do jednej wartości
Redukuje tablicę do jednej wartości (np. suma, iloczyn).
Parametry reduce():
* reduce((accumulator, currentValue) => ..., initialValue)
7.5 some() i every()
| Metoda | Opis | Zwraca |
|---|---|---|
some() |
Sprawdza, czy przynajmniej jeden spełnia | true/false |
every() |
Sprawdza, czy wszystkie spełniają warunek | true/false |
Przykład:
8. Tablice wielowymiarowe
Tablica może zawierać inne tablice – tzw. tablica zagnieżdżona lub dwuwymiarowa.
9. Spread operator (...) z tablicami
Operator ... pozwala rozpraszać elementy tablicy.
Kopiowanie tablicy
Łączenie tablic
Dodawanie elementów
10. Destrukturyzacja tablic
Pozwala wyciągać wartości z tablicy do osobnych zmiennych.
Pomijanie elementów:
Rest operator:
11. Porównywanie tablic
Tablice w JavaScript są porównywane przez referencję, a nie przez zawartość.
Porównywanie zawartości:
12. Sprawdzanie, czy wartość jest tablicą
13. Dobre praktyki
- Używaj
constdla tablic, których referencja nie ma się zmieniać - Preferuj metody funkcyjne (
map,filter,reduce) zamiast pętlifor - Unikaj mutowania oryginalnej tablicy, jeśli nie jest to konieczne
- Używaj spread operatora do kopiowania tablic
- Pamiętaj, że
sort()ireverse()mutują oryginalną tablicę
14. Podsumowanie
| Kategoria | Metody |
|---|---|
| Dodawanie | push(), unshift() |
| Usuwanie | pop(), shift(), splice() |
| Wyszukiwanie | indexOf(), includes(), find() |
| Transformacja | map(), filter(), reduce() |
| Sortowanie | sort(), reverse() |
| Łączenie | concat(), spread operator (...) |
| Iteracja | forEach(), pętle for, for...of |
| Sprawdzanie | some(), every(), Array.isArray() |
15. Wnioski
- Tablice w JavaScript są dynamicznymi strukturami danych, które mogą przechowywać wiele typów wartości.
- JavaScript oferuje bogaty zestaw metod do manipulacji tablicami.
- Metody funkcyjne (
map,filter,reduce) to nowoczesny i czytelny sposób pracy z tablicami. - Tablice są typami referencyjnymi – kopiowanie wymaga użycia spread operatora lub metod takich jak
slice(). - Znajomość tablic i ich metod jest kluczowa dla efektywnego programowania w JavaScript.
Podsumowanie praktyczne:
Opanowanie tablic i ich metod to fundament pracy z danymi w JavaScript. Używaj metod funkcyjnych dla czystszego kodu, a spread operator do bezpiecznego kopiowania i łączenia tablic.