slice() vs splice()
slice() kopiuje fragment tablicy bez zmian w oryginale, a splice() usuwa, wstawia lub zastępuje elementy w miejscu, mutując tablicę.
Porównanie w tabeli
#Zmienia oryginalną tablicę
Co zwraca
- Array.prototype.slice()
- Nową tablicę z wyciętym fragmentem
- Array.prototype.splice()
- Tablicę usuniętych elementów
Wstawianie nowych elementów
- Array.prototype.slice()
- Niemożliwe
- Array.prototype.splice()
- Tak, jako kolejne argumenty
Argumenty
- Array.prototype.slice()
start,end(indeks końca wyłącznie)- Array.prototype.splice()
start,deleteCount, elementy do wstawienia
Indeksy ujemne w start
- Array.prototype.slice()
- Liczą od końca tablicy
- Array.prototype.splice()
- Też liczą od końca tablicy
Typowe użycie
- Array.prototype.slice()
- Kopia, paginacja, wycinek bez mutacji
- Array.prototype.splice()
- Usuwanie lub wstawianie w konkretnym miejscu
Przykład
#const modules = ['Wstęp', 'HTML', 'CSS', 'Grid']
const copy = modules.slice(1, 3)
const removed = modules.splice(1, 1)
console.log(copy)
console.log(removed)
console.log(modules)Definicja i zastosowanie
#Nazwy są łudząco podobne, ale metody robią coś innego. slice(start, end) wycina fragment tablicy i zwraca go jako nową tablicę, nie dotykając oryginału. splice(start, deleteCount, ...items) zmienia oryginalną tablicę: usuwa wskazaną liczbę elementów od start i w ich miejsce może wstawić nowe.
slice() zawsze zwraca wycięty fragment, a splice() zwraca elementy, które usunęła (może to być pusta tablica, gdy nic nie usunięto). Indeksy ujemne w obu metodach liczą się od końca tablicy. Tylko splice() przyjmuje dodatkowe argumenty z elementami do wstawienia.
Wybór zależy od tego, czy chcesz zachować oryginał. Do kopiowania, paginacji i wycinków używaj slice(). Do usuwania lub wstawiania elementu w konkretnym miejscu użyj splice(), a jeśli nie chcesz mutować tablicy, sięgnij po jej nowszy odpowiednik toSpliced().
Składnia
#array.slice(start, end)
array.splice(start, deleteCount, item1, item2, …)Więcej przykładów
#const list = ['HTML', 'CSS', 'JavaScript']
list.splice(1, 0, 'Sass')
console.log(list)
console.log(list.slice(-2))const original = ['Ania', 'Kuba']
const sliced = original.slice()
const splicedResult = original.splice(5, 2)
console.log(sliced)
console.log(splicedResult)
console.log(original)
console.log(sliced === original)splice() poza zakresem tablicy nic nie usuwa i zwraca pustą tablicę. slice() bez argumentów tworzy płytką kopię, ale to inny obiekt niż oryginał.
Dobre praktyki
#slice()nigdy nie mutuje, więc jest bezpieczna do kopii i paginacji nawet wewnątrz funkcji, które nie powinny zmieniać danych wejściowych.- Usuwając elementy przez
splice()w pętli, idź od końca tablicy. Idąc od początku, kolejne indeksy się przesuwają i łatwo coś pominąć. - Gdy potrzebujesz efektu
splice(), ale bez mutowania oryginału, użyjtoSpliced().
Powiązane hasła
#- Array.prototype.slice()Zwraca kopię fragmentu tablicy bez zmieniania oryginału.
- Array.prototype.splice()Usuwa, zastępuje lub wstawia elementy w miejscu, zmieniając tablicę.
- Array.prototype.toSpliced()Usuwa, wstawia lub zastępuje elementy w kopii tablicy. Oryginał zostaje bez zmian.
- Array.prototype.filter()Tworzy nową tablicę z elementami, dla których funkcja zwróciła true.
Widzisz błąd albo brakuje przykładu? Napisz do nas.