Lekcja 7: Tablice

Tablice (Arrays) to specjalny rodzaj obiektów w JavaScript, służący do przechowywania uporządkowanych kolekcji danych. Elementy w tablicy mogą być różnych typów i są dostępne za pomocą indeksów liczbowych (zaczynając od 0).

Tworzenie tablic

Istnieje kilka sposobów tworzenia tablic:

// 1. Literał tablicowy (najczęstszy sposób)
let pustaTablica = [];
let owoce = ["jabłko", "banan", "pomarańcza"];
let liczby = [1, 2, 3, 4, 5];
let mieszana = ["tekst", 10, true, null];

// 2. Konstruktor Array()
let kolory = new Array("czerwony", "zielony", "niebieski");
let liczby2 = new Array(10); // Tworzy tablicę o długości 10, ale bez elementów (puste sloty)

console.log(owoce);
console.log(liczby2);
console.log(liczby2.length); // 10

Dostęp do elementów

Elementy tablicy są dostępne za pomocą indeksów, zaczynając od 0.

let owoce = ["jabłko", "banan", "pomarańcza"];

console.log(owoce[0]); // "jabłko" (pierwszy element)
console.log(owoce[1]); // "banan" (drugi element)
console.log(owoce[2]); // "pomarańcza" (trzeci element)

console.log(owoce[3]); // undefined (indeks poza zakresem)

// Modyfikacja elementu
owoce[1] = "mango";
console.log(owoce); // ["jabłko", "mango", "pomarańcza"]

Właściwość `length`

Zwraca liczbę elementów w tablicy.

let liczby = [10, 20, 30];
console.log(liczby.length); // 3

// Można również ustawić długość tablicy
liczby.length = 5; // Zwiększa długość, dodając puste sloty
console.log(liczby); // [10, 20, 30, <2 empty items>]
console.log(liczby.length); // 5

liczby.length = 2; // Skraca tablicę, usuwając elementy
console.log(liczby); // [10, 20]
console.log(liczby.length); // 2

Podstawowe metody tablicowe

Tablice w JavaScript mają wiele wbudowanych metod do manipulacji danymi.

Dodawanie/Usuwanie elementów na końcu

• push(element1, ..., elementN): Dodaje jeden lub więcej elementów na koniec tablicy i zwraca nową długość.
• pop(): Usuwa ostatni element z tablicy i zwraca go.

let zwierzeta = ["pies", "kot"];

let nowaDlugosc = zwierzeta.push("chomik", "rybka");
console.log(zwierzeta);    // ["pies", "kot", "chomik", "rybka"]
console.log(nowaDlugosc); // 4

let usunietyElement = zwierzeta.pop();
console.log(zwierzeta);       // ["pies", "kot", "chomik"]
console.log(usunietyElement); // "rybka"

Dodawanie/Usuwanie elementów na początku

• unshift(element1, ..., elementN): Dodaje jeden lub więcej elementów na początek tablicy i zwraca nową długość.
• shift(): Usuwa pierwszy element z tablicy i zwraca go.

let kolory = ["zielony", "niebieski"];

kolory.unshift("czerwony", "żółty");
console.log(kolory); // ["czerwony", "żółty", "zielony", "niebieski"]

let pierwszyKolor = kolory.shift();
console.log(kolory);        // ["żółty", "zielony", "niebieski"]
console.log(pierwszyKolor); // "czerwony"

Łączenie tablic

• concat(tablica1, ..., tablicaN): Zwraca nową tablicę, będącą połączeniem bieżącej tablicy z innymi tablicami lub wartościami.

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [5, 6];

let polaczona = arr1.concat(arr2, arr3, 7);
console.log(polaczona); // [1, 2, 3, 4, 5, 6, 7]
console.log(arr1);      // [1, 2] (oryginalna tablica nie jest modyfikowana)

Wycinki tablic

• slice(start, end): Zwraca nową tablicę zawierającą kopię fragmentu oryginalnej tablicy od indeksu start (włącznie) do indeksu end (wyłącznie). Nie modyfikuje oryginalnej tablicy.

let litery = ["a", "b", "c", "d", "e"];

let wycinek1 = litery.slice(1, 4); // Elementy od indeksu 1 do 3
console.log(wycinek1); // ["b", "c", "d"]

let wycinek2 = litery.slice(2); // Od indeksu 2 do końca
console.log(wycinek2); // ["c", "d", "e"]

let kopia = litery.slice(); // Kopiuje całą tablicę
console.log(kopia); // ["a", "b", "c", "d", "e"]

console.log(litery); // ["a", "b", "c", "d", "e"] (oryginał bez zmian)

Modyfikacja tablicy w miejscu

• splice(start, deleteCount, item1, ..., itemN): Zmienia zawartość tablicy, usuwając lub zastępując istniejące elementy i/lub dodając nowe. Modyfikuje oryginalną tablicę i zwraca tablicę usuniętych elementów.

let miesiace = ["Sty", "Mar", "Kwi", "Maj"];

// Wstawienie elementu na indeksie 1
miesiace.splice(1, 0, "Lut");
console.log(miesiace); // ["Sty", "Lut", "Mar", "Kwi", "Maj"]

// Zastąpienie elementu na indeksie 3
let usuniete = miesiace.splice(3, 1, "Kwiecień");
console.log(miesiace); // ["Sty", "Lut", "Mar", "Kwiecień", "Maj"]
console.log(usuniete); // ["Kwi"]

// Usunięcie dwóch elementów od indeksu 2
miesiace.splice(2, 2);
console.log(miesiace); // ["Sty", "Lut", "Maj"]

Wyszukiwanie elementów

• indexOf(element, start): Zwraca pierwszy indeks, pod którym dany element może być znaleziony w tablicy, lub -1, jeśli nie występuje.
• lastIndexOf(element, start): Zwraca ostatni indeks, pod którym dany element może być znaleziony w tablicy, lub -1.
• includes(element, start) (ES7): Zwraca true, jeśli tablica zawiera dany element, w przeciwnym razie false.

let liczby = [2, 5, 9, 2];

console.log(liczby.indexOf(2));    // 0 (pierwsze wystąpienie)
console.log(liczby.indexOf(7));    // -1 (nie znaleziono)
console.log(liczby.indexOf(2, 1)); // 3 (szukaj od indeksu 1)

console.log(liczby.lastIndexOf(2)); // 3 (ostatnie wystąpienie)

console.log(liczby.includes(5)); // true
console.log(liczby.includes(1)); // false

Iterowanie po tablicach

Oprócz pętli `for` i `for...of` (omówionych w poprzedniej lekcji), tablice mają wbudowane metody iteracyjne (omówimy je szczegółowo w lekcji o ES6).

• forEach(callback(element, index, array)): Wykonuje podaną funkcję raz dla każdego elementu tablicy.

let owoce = ["jabłko", "banan", "mango"];

owoce.forEach(function(owoc, index) {
    console.log(`Indeks ${index}: ${owoc}`);
});
// Wynik:
// Indeks 0: jabłko
// Indeks 1: banan
// Indeks 2: mango

// 1. Stworzenie tablicy
let miasta = ["Warszawa", "Kraków", "Gdańsk"];
console.log("Początkowa tablica:", miasta);

// 2. Dodanie na koniec
miasta.push("Poznań");
console.log("Po push:", miasta);

// 3. Dodanie na początek
miasta.unshift("Wrocław");
console.log("Po unshift:", miasta);

// 4. Wyświetlenie drugiego miasta
console.log("Drugie miasto:", miasta[1]); // Warszawa

// 5. Usunięcie ostatniego miasta
let usunieteMiasto = miasta.pop();
console.log("Usunięte miasto:", usunieteMiasto); // Poznań

// 6. Ostateczna zawartość i długość
console.log("Ostateczna tablica:", miasta);
console.log("Ostateczna długość:", miasta.length);