Podstawowe metody tablic

Po zapoznaniu się z obiektami i tablicami, czas nauczyć się manipulować danymi w tablicach. JavaScript oferuje szereg wbudowanych metod, które pozwalają dodawać, usuwać i modyfikować elementy tablicy. W kontekście Parku Jurajskiego, potrzebujemy tych metod do zarządzania listami dinozaurów, ich statusem i lokalizacją.

Metody modyfikujące tablicę (mutujące)

push() - dodawanie na koniec

Metoda

push()

dodaje jeden lub więcej elementów na koniec tablicy i zwraca nową długość tablicy:

1const pack = ["Blue", "Charlie"];
2console.log(pack.length); // 2
3
4pack.push("Delta");
5console.log(pack); // ["Blue", "Charlie", "Delta"]
6
7// Dodawanie wielu elementów naraz
8pack.push("Echo", "Fox");
9console.log(pack); // ["Blue", "Charlie", "Delta", "Echo", "Fox"]

pop() - usuwanie z końca

Metoda

pop()

usuwa ostatni element z tablicy i zwraca go:

1const pack = ["Blue", "Charlie", "Delta", "Echo"];
2const removed = pack.pop();
3
4console.log(removed); // "Echo"
5console.log(pack);    // ["Blue", "Charlie", "Delta"]

unshift() - dodawanie na początek

Metoda

unshift()

dodaje elementy na początek tablicy:

1const pack = ["Charlie", "Delta"];
2pack.unshift("Blue");
3
4console.log(pack); // ["Blue", "Charlie", "Delta"]

shift() - usuwanie z początku

Metoda

shift()

usuwa pierwszy element z tablicy i zwraca go:

1const pack = ["Blue", "Charlie", "Delta"];
2const first = pack.shift();
3
4console.log(first); // "Blue"
5console.log(pack);  // ["Charlie", "Delta"]

splice() - wszechstronne modyfikowanie

Metoda

splice()

może dodawać, usuwać lub zamieniać elementy w dowolnym miejscu tablicy. Modyfikuje oryginalną tablicę.

1const dinosaurs = ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops"];
2
3// Usunięcie 1 elementu od indeksu 1
4dinosaurs.splice(1, 1);
5console.log(dinosaurs); // ["T-Rex", "Stegosaurus", "Triceratops"]
6
7// Wstawienie elementu na indeks 1 (bez usuwania)
8dinosaurs.splice(1, 0, "Brachiosaurus");
9console.log(dinosaurs); // ["T-Rex", "Brachiosaurus", "Stegosaurus", "Triceratops"]
10
11// Zamiana elementu na indeksie 2
12dinosaurs.splice(2, 1, "Pteranodon");
13console.log(dinosaurs); // ["T-Rex", "Brachiosaurus", "Pteranodon", "Triceratops"]

Metody niemodyfikujące (niemutujące)

slice() - kopiowanie fragmentu tablicy

Metoda

slice()

zwraca nową tablicę będącą fragmentem oryginalnej. Nie modyfikuje oryginału.

1const allDinos = ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops", "Pteranodon"];
2
3// slice(start, end) - od indeksu start do end (bez end)
4const herbivores = allDinos.slice(2, 4);
5console.log(herbivores); // ["Stegosaurus", "Triceratops"]
6console.log(allDinos);   // Oryginał niezmieniony!
7
8// Kopiowanie całej tablicy
9const copy = allDinos.slice();
10console.log(copy); // ["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops", "Pteranodon"]

Kluczowa różnica: splice() vs slice()

| Cecha | splice() | slice() | |-------|----------|---------| | Mutacja | TAK - zmienia oryginalną tablicę | NIE - zwraca nową tablicę | | Parametry | (start, deleteCount, ...items) | (start, end) | | Zastosowanie | Dodawanie/usuwanie/zamiana elementów | Wycinanie fragmentu tablicy |