Parametr resztowy (.
Zbiera wszystkie pozostałe argumenty funkcji do prawdziwej tablicy. Zapisujesz go jako ...nazwa na końcu listy.
Przykład
#function totalPoints(...scores) {
return scores.reduce((sum, score) => sum + score, 0)
}
console.log(totalPoints(10, 20, 30))
console.log(totalPoints(5))
console.log(totalPoints())Definicja i zastosowanie
#Parametr resztowy zapisujesz jako trzy kropki przed nazwą ostatniego parametru: function sum(...numbers). Wszystkie argumenty, które nie trafiły do wcześniejszych parametrów, lądują w nim jako zwykła tablica. Gdy takich argumentów nie ma, tablica jest pusta, a nie undefined.
Dzięki temu łatwo napisać funkcję przyjmującą dowolną liczbę wartości: sumującą punkty, łączącą nazwy klas CSS albo zapisującą zdarzenie z dodatkowymi danymi. To prawdziwa tablica, więc od razu masz do dyspozycji map(), reduce() i length.
Parametr resztowy musi być ostatni i może być tylko jeden. Zastępuje starszy obiekt arguments, który nie jest tablicą i nie istnieje w funkcjach strzałkowych. Te same trzy kropki przy wywołaniu funkcji, fn(...array), oznaczają spread, czyli operację odwrotną: rozłożenie tablicy na osobne argumenty.
Składnia
#function name(...rest) {}
function name(first, second, ...rest) {}
const fn = (...args) => {}Więcej przykładów
#function logEvent(type, ...details) {
console.log(type, details.length, details)
}
logEvent('lekcja', 'CSS', 'Grid')
logEvent('logowanie')function maxScore(...scores) {
return Math.max(...scores)
}
const results = [72, 95, 88]
console.log(maxScore(...results))
console.log(maxScore(40, 60))W definicji ...scores zbiera argumenty w tablicę (rest), a w wywołaniu Math.max(...scores) rozkłada tablicę na osobne argumenty (spread).
function oldStyle() {
console.log(Array.isArray(arguments), arguments.length)
}
function newStyle(...args) {
console.log(Array.isArray(args), args.length)
}
oldStyle('a', 'b')
newStyle('a', 'b')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
#- Parametr resztowy zawsze stoi na końcu. Zapis
function fn(...items, last)to błąd składni. - W nowym kodzie nie używaj
arguments. Parametr resztowy daje prawdziwą tablicę i działa także w funkcjach strzałkowych. - Gdy funkcja przyjmuje wiele opcjonalnych ustawień różnego rodzaju, czytelniejszy od długiej listy argumentów jest jeden obiekt opcji z destrukturyzacją.
Powiązane hasła
#- Spread (...)Składnia spread rozkłada tablicę, napis lub obiekt na pojedyncze elementy: do kopiowania, łączenia i przekazywania argumentów.
- functionDeklaruje nazwaną funkcję: blok kodu z parametrami, który można wywoływać wiele razy i który może zwrócić wynik.
- Parametry domyślneWartości, które parametr funkcji dostaje, gdy argument nie zostanie podany albo ma wartość undefined.
- DestrukturyzacjaDestrukturyzacja (destructuring) wyciąga wartości z tablic i obiektów prosto do osobnych zmiennych.
- () => {}Funkcja strzałkowa (arrow function): krótszy zapis funkcji, bez własnego this, z niejawnym return dla jednego wyrażenia.
Widzisz błąd albo brakuje przykładu? Napisz do nas.