Tablice są specjalnym typem obiektu, w którym dane są przechowywane jako sekwencyjny zbiór elementów. Każdy element posiada numeryczny indeks, zaczynając od zera. Dzięki temu łatwo odwołać się do konkretnego elementu tablicy za pomocą jego indeksu. Co więcej, tablice są dynamiczne – oznacza to, że mogą zmieniać swój rozmiar i zawartość w czasie działania programu.
Tworzenie tablic
Literał tablicowy
Najprostszy i najbardziej bezpośredni sposób tworzenia tablicy to użycie literału tablicowego, czyli par kwadratowych nawiasów [], które mogą zawierać dowolną liczbę elementów, rozdzielonych przecinkami. Przykład:
const mojaTablica = [1, 'dwa', { liczba: 3 }, [4, 5]];Operator spread (…)
Operator spread ... pozwala na rozpakowanie elementów innej tablicy lub obiektu iterowalnego do nowej tablicy. Przykład:
const arrayNumberOne = [1, 2];
const arrayNumberTwo = [3, 4];
const together = [...arrayNumberOne, ...arrayNumberTwo]; // [1, 2, 3, 4]Array()
Innym sposobem na stworzenie tablicy jest użycie konstruktora Array(). Może on tworzyć tablicę na kilka sposobów, w zależności od przekazanych argumentów. Przykład:
const arrayLength5 = new Array(5); // tworzy tablicę z 5 pustymi miejscami
const arrayValues = new Array(1, 2, 'three'); // [1, 2, 'trzy']Metody Array.of() i Array.from()
Array.of() tworzy nową tablicę z przekazanych argumentów, niezależnie od ich liczby czy typów. Jest to bardziej przewidywalny sposób tworzenia tablic niż new Array(). Przykład:
const tablica = Array.of(1, 'dwa', [3]); // [1, 'dwa', [3]]Array.from() umożliwia tworzenie nowych tablic z obiektów iterowalnych (jak inne tablice czy stringi) lub z obiektów podobnych do tablic (jak arguments lub NodeList). Można również użyć funkcji mapującej, aby przekształcić elementy podczas tworzenia tablicy. Przykład:
const tablicaZStringa = Array.from('123'); // ['1', '2', '3']
const tablicaZMapowaniem = Array.from([1, 2, 3], x => x + x); // [2, 4, 6]length
Każda tablica jest specjalnym typem obiektu, który posiada wbudowaną właściwość length. Ta właściwość informuje o liczbie elementów zawartych w tablicy, ale w precyzyjniejszym ujęciu zwraca wartość o jeden większą niż największy indeks w tablicy. Jest to ważne, ponieważ indeksy w JavaScript zaczynają się od 0. Właściwość length jest dynamiczna – oznacza to, że automatycznie aktualizuje swoją wartość, gdy tablica zostaje zmodyfikowana, na przykład poprzez dodanie lub usunięcie elementów.
Co interesujące, właściwość length jest zapisywalna (ang. writable). To znaczy, że możemy ją ręcznie modyfikować, co pozwala na skracanie lub rozszerzanie tablicy. Gdy ustawiamy length na wartość mniejszą niż obecna liczba elementów w tablicy, elementy o indeksach wyższych niż nowa wartość length zostaną usunięte. Natomiast zwiększając wartość length, nie dodajemy nowych elementów do tablicy, ale tworzymy „puste miejsca” (tj. indeksy bez przypisanych wartości), które technicznie są częścią tablicy, ale nie posiadają przypisanych wartości.
let numbers = [1, 2, 3, 4];
console.log(numbers.length); // Wyświetla: 4
// Skracamy tablicę do dwóch elementów
numbers.length = 2;
console.log(numbers); // Wyświetla: [1, 2]W tym przypadku, po ustawieniu length na 2, elementy z indeksami większymi niż 1 (czyli 2 i 3) zostają usunięte z tablicy.
Dodawanie elementów do tablicy
Wskazanie indeksu
Dodawanie elementów do tablicy przez bezpośrednie przypisanie wartości do określonego indeksu jest proste i intuicyjne. Jeśli indeks, do którego przypisujemy wartość, jest równy lub większy niż długość tablicy, JavaScript automatycznie rozszerzy tablicę, wypełniając nowe miejsca wartościami undefined, aż do osiągnięcia tego indeksu.
let array = ['first', 'second'];
array[2] = 'third';
// array: ['first', 'second', 'third']
array[5] = 'sixth';
// array: ['first', 'second', 'third', undefined, undefined, 'sixth']push
Dodaje jeden lub więcej elementów na koniec tablicy i zwraca nową długość tablicy.
let fruits = ['Apple', 'Banana'];
fruits.push('Orange');
// fruits: ['Apple', 'Banana', 'Orange']unshift
Dodaje jeden lub więcej elementów na początek tablicy i zwraca nową długość tablicy.
let numbers = [2, 3, 4];
numbers.unshift(1);
// numbers: [1, 2, 3, 4]Usuwanie elementów z tablicy
delete
Operator delete umożliwia usunięcie elementu z tablicy poprzez bezpośrednie wskazanie indeksu. Usuwa wartość elementu, ale pozostawia „puste miejsce” w tablicy. Oznacza to, że długość tablicy po operacji delete pozostaje niezmieniona.
let array = ['first', 'second', 'third'];
delete array[1];
// array: ['first', undefined, 'third']pop
Usuwa ostatni element z tablicy i zwraca ten element. Ta metoda zmniejsza długość tablicy o jeden.
let colors = ['Red', 'Green', 'Blue'];
let lastColor = colors.pop();
// colors: ['Red', 'Green'], lastColor: 'Blue'shift
Usuwa pierwszy element z tablicy i zwraca go. Podobnie jak pop, ale działa na początku tablicy.
let languages = ['Python', 'JavaScript', 'C++'];
let firstLanguage = languages.shift();
// languages: ['JavaScript', 'C++'], firstLanguage: 'Python'