Spread (.
Składnia spread rozkłada tablicę, napis lub obiekt na pojedyncze elementy: do kopiowania, łączenia i przekazywania argumentów.
Przykład
#const frontend = ['HTML', 'CSS']
const backend = ['Node.js']
const stack = [...frontend, 'JavaScript', ...backend]
console.log(stack)
const scores = [72, 95, 88]
console.log(Math.max(...scores))Definicja i zastosowanie
#Trzy kropki przed tablicą, napisem lub innym obiektem iterowalnym „wysypują” jego elementy w miejscu, gdzie oczekiwana jest lista wartości: w nowej tablicy [...a, ...b] albo w argumentach wywołania Math.max(...scores).
Spread działa też w literałach obiektów: { ...user, active: true } kopiuje własne, wyliczalne właściwości user do nowego obiektu. Właściwości zapisane później nadpisują wcześniejsze, więc łatwo tak utworzyć zaktualizowaną kopię albo połączyć ustawienia domyślne z własnymi.
Kopia jest płytka. Zagnieżdżone obiekty i tablice nie są kopiowane, tylko współdzielone, więc ich zmiana w kopii zmieni też oryginał. Do głębokiej kopii służy structuredClone(). Te same trzy kropki w parametrach funkcji albo w destrukturyzacji oznaczają odwrotną operację, czyli zebranie reszty elementów (rest).
Składnia
#const copy = [...array]
const merged = [...first, ...second]
fn(...args)
const clone = { ...object }
const updated = { ...object, key: value }Więcej przykładów
#const defaults = { theme: 'dark', sounds: true, fontSize: 16 }
const userSettings = { sounds: false }
const settings = { ...defaults, ...userSettings }
console.log(settings)
console.log(defaults)const original = { name: 'Ania', badges: ['start'] }
const copy = { ...original }
copy.name = 'Ola'
copy.badges.push('streak')
console.log(original)
console.log(copy)Tablica badges jest wspólna dla obu obiektów. Gdy potrzebujesz niezależnej kopii zagnieżdżonych danych, użyj structuredClone(original).
console.log([...'Kod'])
const tags = ['js', 'css', 'js', 'html', 'css']
console.log([...new Set(tags)])Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Spread w obiektach kopiuje tylko własne, wyliczalne właściwości. Metody z prototypu się nie przeniosą, więc kopia instancji klasy staje się zwykłym obiektem.
- Kolejność ma znaczenie: w
{ ...defaults, ...custom }wygrywają wartości zcustom, a w{ ...custom, ...defaults }zdefaults. - Przy bardzo dużych tablicach (setki tysięcy elementów)
Math.max(...array)może przekroczyć limit argumentów funkcji. Bezpieczniej użyć wtedyreduce().
Powiązane hasła
#- DestrukturyzacjaDestrukturyzacja (destructuring) wyciąga wartości z tablic i obiektów prosto do osobnych zmiennych.
- Array.prototype.concat()Łączy tablice i wartości w nową tablicę.
- Object.assign()Kopiuje właściwości z jednego lub więcej obiektów do obiektu docelowego.
- structuredClone()Tworzy głęboką kopię wartości, łącznie z zagnieżdżonymi obiektami, datami, Map i Set.
- functionDeklaruje nazwaną funkcję: blok kodu z parametrami, który można wywoływać wiele razy i który może zwrócić wynik.
- Parametr resztowy (...rest)Zbiera wszystkie pozostałe argumenty funkcji do prawdziwej tablicy. Zapisujesz go jako ...nazwa na końcu listy.
Widzisz błąd albo brakuje przykładu? Napisz do nas.