W tym artykule przyglądniemy się funkcjom i metodom, jakie stosuje się w tablicach. Przede wszystkim – tablice to jedna z najczęściej używanych struktur danych w JavaScript, pomagająca w przechowywaniu wielu wartości w jednym miejscu.

Tablice pozwalają na grupowanie danych o różnym typie, takich jak liczby, ciągi znaków czy obiekty, co czyni je niezwykle wszechstronnymi. Przykładowo, tablica może przechowywać listę ocen ucznia, nazwiska klientów w sklepie internetowym, czy też zbiory koordynatów punktów na wykresie. Dzięki temu, można łatwo zarządzać dużą ilością danych, a także wykonywać na nich różnorodne operacje za pomocą metod, które oferuje JavaScript. Aby efektywnie pracować z tablicami, warto poznać różne metody, które oferuje JavaScript.

Sprawdźmy więc jedne z najważniejszych funkcji i metod, które pozwalają na manipulację tablicami oraz ich wykorzystanie w projektach.

1. Dodawanie i usuwanie elementów

• push(element) – Dodaje element na końcu tablicy. Metoda ta zmienia oryginalną tablicę i zwraca nową długość.
  • Przykład: tab.push(4); doda 4 na końcu tablicy.
• pop() – Usuwa ostatni element z tablicy i zwraca go. Także zmienia oryginalną tablicę.
  • Przykład: tab.pop(); usunie ostatni element z tablicy.
• unshift(element) – Dodaje element na początku tablicy, przesuwając pozostałe elementy.
  • Przykład: tab.unshift(1); doda 1 na początku tablicy.
• shift() – Usuwa pierwszy element z tablicy i zwraca go.
  • Przykład: tab.shift(); usunie pierwszy element tablicy.

2. Łączenie tablic

• concat(anotherArray) – Łączy dwie lub więcej tablic i zwraca nową tablicę. Nie zmienia oryginalnych tablic.
  • Przykład: tab1.concat(tab2); połączy tab1 i tab2 w jedną tablicę.

3. Szukanie elementów

• indexOf(element) – Zwraca pierwszy indeks pod którym występuje dany element. Jeśli element nie występuje, zwraca -1.
  • Przykład: tab.indexOf(3); zwróci indeks pierwszego wystąpienia liczby 3.
• includes(element) – Sprawdza, czy tablica zawiera dany element. Zwraca true lub false.
  • Przykład: tab.includes(2); zwraca true, jeśli 2 znajduje się w tablicy.

4. Modyfikowanie tablicy

• reverse() – Odwraca kolejność elementów w tablicy. Zmienia oryginalną tablicę.
  • Przykład: tab.reverse(); odwraca kolejność elementów tablicy.
• sort((a, b) => a - b) – Sortuje elementy tablicy. Domyślnie sortuje jako ciągi znaków, ale można przekazać funkcję porównującą.
  • Przykład: tab.sort((a, b) => a - b); sortuje liczby rosnąco.

5. Uzyskiwanie długości i fragmentów tablicy

• length – Zwraca liczbę elementów w tablicy.
  • Przykład: tab.length; zwraca długość tablicy.
• slice(start, end) – Zwraca nową tablicę z elementami od indeksu start do end (nie włącznie). Nie zmienia oryginalnej tablicy.
  • Przykład: tab.slice(1, 3); zwraca fragment tablicy od indeksu 1 do 3 (bez 3).
• splice(start, deleteCount, item1, item2, ...) – Usuwa lub dodaje elementy do tablicy, zmieniając ją.
  • Przykład: tab.splice(1, 0, 2, 3); wstawi 2 i 3 na indeksie 1 bez usuwania elementów.

6. Iteracja po elementach tablicy

• forEach(callback) – Iteruje po każdym elemencie tablicy, wywołując funkcję callback dla każdego elementu.
  • Przykład: tab.forEach(el => console.log(el)); wyświetli każdy element tablicy.
• map(callback) – Tworzy nową tablicę, gdzie każdy element jest wynikiem działania funkcji callback na oryginalnym elemencie.
  • Przykład: tab.map(x => x ** 2); zwraca nową tablicę, gdzie każdy element jest kwadratem oryginalnego.
• filter(callback) – Tworzy nową tablicę z elementami spełniającymi warunek w funkcji callback.
  • Przykład: tab.filter(x => x > 2); zwróci nową tablicę z elementami większymi niż 2.

7. Redukcja i znajdowanie elementów

• reduce((acc, curr) => ..., initialValue) – Redukuje tablicę do jednej wartości, używając funkcji callback.
  • Przykład: tab.reduce((sum, val) => sum + val, 0); sumuje wszystkie elementy w tablicy.
• find(callback) – Zwraca pierwszy element, który spełnia warunek w funkcji callback.
  • Przykład: tab.find(el => el > 2); zwróci pierwszy element większy niż 2.

8. Inne przydatne metody

• flat() – Spłaszcza tablicę wielowymiarową do jednowymiarowej.
  • Przykład: tab.flat(); spłaszcza np. [[1, 2], [3, 4]] do [1, 2, 3, 4].
• join(separator) – Łączy elementy tablicy w ciąg znaków, oddzielając je podanym separatorem.
  • Przykład: tab.join(", "); zwraca ciąg elementów oddzielonych przecinkiem, np. "1, 2, 3".
• Array(n).fill(value) – Tworzy nową tablicę o długości n, wypełnioną wartością value.
  • Przykład: Array(5).fill("A"); tworzy tablicę ['A', 'A', 'A', 'A', 'A'].

Przykładowe zadania z tablicami

Zadanie 1. Dodawanie elementu na końcu tablicy
const tab = [1, 2, 3];
tab.push(4);
console.log(tab); // Wynik: [1, 2, 3, 4]
Wyjaśnienie: Metoda push dodaje nowy element (4) na końcu tablicy. Wynikiem jest zaktualizowana tablica [1, 2, 3, 4].

Zadanie 2. Usuwanie ostatniego elementu z tablicy
const tab = [1, 2, 3, 4];
tab.pop();
console.log(tab); // Wynik: [1, 2, 3]
Wyjaśnienie: Metoda pop usuwa ostatni element z tablicy (4). Tablica po tej operacji to [1, 2, 3].

Zadanie 3. Dodawanie elementu na początku tablicy
const tab = [2, 3, 4];
tab.unshift(1);
console.log(tab); // Wynik: [1, 2, 3, 4]
Wyjaśnienie: Metoda unshift dodaje element (1) na początku tablicy, przesuwając pozostałe elementy. Wynikiem jest tablica [1, 2, 3, 4].

Zadanie 4. Usuwanie pierwszego elementu z tablicy
const tab = [1, 2, 3, 4];
tab.shift();
console.log(tab); // Wynik: [2, 3, 4]
Wyjaśnienie: Metoda shift usuwa pierwszy element z tablicy (1). Tablica po tej operacji to [2, 3, 4].

Zadanie 5. Znajdowanie indeksu elementu
const tab = [1, 2, 3, 4];
console.log(tab.indexOf(3)); // Wynik: 2
Wyjaśnienie: Metoda indexOf znajduje pierwszy indeks, pod którym występuje element 3 (czyli 2). Jeśli elementu nie ma w tablicy, wynik to -1.

Zadanie 6. Sprawdzanie, czy tablica zawiera wartość
const tab = [1, 2, 3];
console.log(tab.includes(2)); // Wynik: true
Wyjaśnienie: Metoda includes sprawdza, czy tablica zawiera podaną wartość (2). Zwraca true, jeśli wartość istnieje, w przeciwnym razie false.

Zadanie 7. Odwracanie kolejności elementów w tablicy
const tab = [1, 2, 3];
console.log(tab.reverse()); // Wynik: [3, 2, 1]
Wyjaśnienie: Metoda reverse odwraca kolejność elementów w tablicy, zmieniając oryginalną tablicę na [3, 2, 1].

Zadanie 8. Sortowanie elementów w tablicy rosnąco
const tab = [3, 1, 4, 2];
console.log(tab.sort((a, b) => a - b)); // Wynik: [1, 2, 3, 4]
Wyjaśnienie: Metoda sort sortuje tablicę liczbową od najmniejszej do największej. Funkcja a – b określa porządek rosnący.

Zadanie 9. Tworzenie nowej tablicy zawierającej kwadraty elementów
const tab = [1, 2, 3];
const kwadraty = tab.map(x => x ** 2);
console.log(kwadraty); // Wynik: [1, 4, 9]
Wyjaśnienie: Metoda map tworzy nową tablicę, w której każdy element jest wynikiem operacji x ** 2, czyli podniesieniem do kwadratu. Wynikiem jest tablica [1, 4, 9].

Zadanie 10. Filtracja elementów większych niż 2
const tab = [1, 2, 3, 4];
const filtrowane = tab.filter(x => x > 2);
console.log(filtrowane); // Wynik: [3, 4]
Wyjaśnienie: Metoda filter tworzy nową tablicę, zawierającą tylko elementy większe niż 2. Wynik to [3, 4].

Podsumowując, metody tablic w JavaScript oferują ogromną elastyczność i możliwości manipulacji danymi. Od prostych operacji jak dodawanie czy usuwanie elementów, po bardziej złożone operacje jak iteracje czy redukcje – opanowanie tych metod pozwala na efektywne zarządzanie danymi w aplikacjach.

Tablice to nieodłączna część JavaScriptu, dlatego warto poświęcić czas na naukę tych metod. Praktyka z wykorzystaniem tych funkcji sprawi, że praca z kodem będzie łatwiejsza, szybsza i bardziej satysfakcjonująca. Spróbuj wykorzystać każdą z omówionych metod w swoim projekcie, aby zrozumieć, jak działają w praktyce!