Array.
Sprowadza całą tablicę do jednej wartości, np. sumy, obiektu lub nowej tablicy.
- Zwraca
- Ostateczną wartość akumulatora.
- Zmienia oryginał
- Nie
Przykład
#const cart = [
{ name: 'Kurs HTML', price: 49 },
{ name: 'Kurs CSS', price: 59 },
{ name: 'Kurs JS', price: 79 }
]
const total = cart.reduce((sum, item) => sum + item.price, 0)
console.log(total)Definicja i zastosowanie
#Metoda reduce() przechodzi po tablicy i w każdym kroku łączy bieżący element z wynikiem dotychczasowym, nazywanym akumulatorem. Na końcu zwraca ostateczną wartość akumulatora.
Dzięki temu możesz policzyć sumę i średnią, zgrupować elementy w obiekt, spłaszczyć tablicę albo zbudować licznik wystąpień. To najbardziej uniwersalna metoda tablic.
Zawsze podawaj wartość początkową jako drugi argument. Bez niej reduce() użyje pierwszego elementu jako startu, a na pustej tablicy rzuci błąd.
Składnia
#array.reduce(callbackFn)
array.reduce(callbackFn, initialValue)Parametry
#callbackFn
function (accumulator, element, index, array)
Funkcja łącząca akumulator z bieżącym elementem. Jej wynik staje się nowym akumulatorem.initialValue
opcjonalna
Wartość początkowa akumulatora, na przykład0,[]albo{}.
Więcej przykładów
#const answers = ['A', 'C', 'A', 'B', 'A', 'C']
const counts = answers.reduce((acc, answer) => {
acc[answer] = (acc[answer] ?? 0) + 1
return acc
}, {})
console.log(counts)const points = [80, 95, 70]
const average = points.reduce((sum, p) => sum + p, 0) / points.length
console.log(average)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
#- Jeśli
reduce()robi się nieczytelne, zwykła pętlafor...ofbywa lepszym wyborem. - Do grupowania elementów nowsze przeglądarki mają
Object.groupBy(), które jest czytelniejsze niż ręcznereduce().
Powiązane hasła
#- Array.prototype.map()Tworzy nową tablicę z wynikami wywołania funkcji dla każdego elementu.
- Array.prototype.filter()Tworzy nową tablicę z elementami, dla których funkcja zwróciła true.
- Array.prototype.forEach()Wywołuje funkcję dla każdego elementu tablicy.
- Object.groupBy()Grupuje elementy według klucza zwróconego przez funkcję.
Widzisz błąd albo brakuje przykładu? Napisz do nas.