Powiedzmy, że chcę sumować a.xdla każdego elementu arr.

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return a.x + b.x})
>> NaN

Mam powody sądzić, że topór jest w pewnym momencie niezdefiniowany.

Następujące działa dobrze

arr = [1,2,4]
arr.reduce(function(a,b){return a + b})
>> 7

Co robię źle w pierwszym przykładzie?

Po pierwszej iteracji zwracasz liczbę, a następnie próbujesz uzyskać jej właściwość x, aby dodać ją do następnego obiektu, który obejmuje undefinedmatematykę i undefinedwyniki NaN.

spróbuj zwrócić obiekt zawierający xwłaściwość z sumą x właściwości parametrów:

var arr = [{x:1},{x:2},{x:4}];

arr.reduce(function (a, b) {
  return {x: a.x + b.x}; // returns object with property x
})

// ES6
arr.reduce((a, b) => ({x: a.x + b.x}));

// -> {x: 7}

Wyjaśnienie dodano z komentarzy:

Zwracana wartość każdej iteracji [].reduceużywana jako azmienna w następnej iteracji.

Iteracji 1: a = {x:1}, b = {x:2}, {x: 3}przypisany aw iteracji 2

Iteracja 2: a = {x:3}, b = {x:4}.

Problem z twoim przykładem polega na tym, że zwracasz literał liczbowy.

function (a, b) {
  return a.x + b.x; // returns number literal
}

Iteracja 1: a = {x:1}, b = {x:2}, // returns 3jak aw następnej iteracji

Iteracja 2: a = 3, b = {x:2}powracaNaN

Szereg dosłowny 3nie (zazwyczaj) mają właściwość o nazwie xwięc undefinedi undefined + b.xpowraca NaNi NaN + <anything>jest zawszeNaN

Wyjaśnienie : Wolę moją metodę niż drugą najwyższą odpowiedź w tym wątku, ponieważ nie zgadzam się z pomysłem, że przekazanie opcjonalnego parametru zmniejszania za pomocą magicznej liczby w celu uzyskania liczby pierwotnej jest czystsze. Może to skutkować zapisaniem mniejszej liczby wierszy, ale imo jest mniej czytelne.

Lepszym sposobem na osiągnięcie tego jest podanie wartości początkowej:

var arr = [{x:1}, {x:2}, {x:4}];
arr.reduce(function (acc, obj) { return acc + obj.x; }, 0); // 7
console.log(arr);

Przy pierwszym wywołaniu funkcji anonimowej zostaje wywołana za pomocą (0, {x: 1})i zwraca 0 + 1 = 1. Następnym razem zostaje wywołany (1, {x: 2})i wraca 1 + 2 = 3. Następnie jest wywoływany (3, {x: 4}), w końcu wraca 7.

TL; DR, ustaw wartość początkową

Wykorzystanie destrukcji

arr.reduce( ( sum, { x } ) => sum + x , 0)

Bez destrukcji

arr.reduce( ( sum , cur ) => sum + cur.x , 0)

Z maszynopisu

arr.reduce( ( sum, { x } : { x: number } ) => sum + x , 0)

Spróbujmy metody destrukcji:

const arr = [ { x: 1 }, { x: 2 }, { x: 4 } ]
const result = arr.reduce( ( sum, { x } ) => sum + x , 0)
console.log( result ) // 7

Kluczem do tego jest ustawienie wartości początkowej. Zwracana wartość staje się pierwszym parametrem następnej iteracji.

Technika zastosowana w górnej odpowiedzi nie jest idiomatyczna

Przyjęta odpowiedź proponuje NIE przekazywanie wartości „opcjonalnej”. Jest to błędne, ponieważ idiomatyczny sposób polega na tym, że zawsze dołączany jest drugi parametr . Czemu? Trzy powody:

1. Niebezpieczne - nieprzekazanie wartości początkowej jest niebezpieczne i może powodować skutki uboczne i mutacje, jeśli funkcja oddzwaniania jest nieostrożna.

Ujrzeć

const badCallback = (a,i) => Object.assign(a,i) 

const foo = [ { a: 1 }, { b: 2 }, { c: 3 } ]
const bar = foo.reduce( badCallback )  // bad use of Object.assign
// Look, we've tampered with the original array
foo //  [ { a: 1, b: 2, c: 3 }, { b: 2 }, { c: 3 } ]

Gdybyśmy jednak zrobili to w ten sposób, z wartością początkową:

const bar = foo.reduce( badCallback, {})
// foo is still OK
foo // { a: 1, b: 2, c: 3 }

Dla potrzeb rekordu, chyba że masz zamiar zmutować oryginalny obiekt, ustaw pierwszy parametr Object.assignna pusty obiekt. Tak: Object.assign({}, a, b, c).

2 - Lepsze wnioskowanie o typach - podczas korzystania z narzędzia takiego jak Typescript lub edytora, takiego jak VS Code, zyskujesz na informowaniu kompilatora o inicjałach i może on wychwytywać błędy, jeśli popełnisz błąd. Jeśli nie ustawisz wartości początkowej, w wielu sytuacjach może nie być w stanie zgadnąć, co może spowodować przerażające błędy w czasie wykonywania.

3 - Respect the Functors - JavaScript świeci najlepiej, gdy jego wewnętrzne funkcjonalne dziecko jest uruchomione. W świecie funkcjonalnym istnieje standard określający sposób „składania” lub reducemacierzy. Kiedy spasujesz lub zastosujesz katamorfizm do tablicy, bierzesz wartości tej tablicy, aby skonstruować nowy typ. Musisz przekazać wynikowy typ - powinieneś to zrobić, nawet jeśli końcowym typem są wartości z tablicy, innej tablicy lub dowolnego innego typu.

Pomyślmy o tym w inny sposób. W JavaScript funkcje mogą być przekazywane jak dane, tak działają wywołania zwrotne, co jest wynikiem następującego kodu?

[1,2,3].reduce(callback)

Czy zwróci liczbę? Obiekt? To czyni to jaśniejszym

[1,2,3].reduce(callback,0)

Przeczytaj więcej na temat specyfikacji programowania funkcjonalnego tutaj: https://github.com/fantasyland/fantasy-land#foldable

Trochę więcej tła

reduceSposób dwa parametry,

Array.prototype.reduce( callback, initialItem )

callbackFunkcja przyjmuje następujące parametry

(accumulator, itemInArray, indexInArray, entireArray) => { /* do stuff */ }

W pierwszej iteracji

• Jeśli initialItempodano, reducefunkcja przekazuje initialItemjako accumulatori pierwszy element tablicy jako itemInArray.

• Jeśli nieinitialItem jest podana, funkcja przekazuje pierwszy element w tablicy jako drugi element w tablicy, co może być mylące.reduceinitialItemitemInArray

Uczę i zalecam zawsze ustawianie początkowej wartości redukcji.

Możesz sprawdzić dokumentację na:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Mam nadzieję że to pomoże!

Inni odpowiedzieli na to pytanie, ale myślałem, że rzuciłbym inne podejście. Zamiast przejść bezpośrednio do sumowania siekiery, możesz połączyć mapę (od siekiery do x) i zmniejszyć (aby dodać x):

arr = [{x:1},{x:2},{x:4}]
arr.map(function(a) {return a.x;})
   .reduce(function(a,b) {return a + b;});

Wprawdzie prawdopodobnie będzie nieco wolniej, ale pomyślałem, że warto wspomnieć o tym jako opcji.

Aby sformalizować to, co zostało wskazane, reduktor jest katamorfizmem, który przyjmuje dwa argumenty, które mogą być tego samego typu przez przypadek, i zwraca typ, który pasuje do pierwszego argumentu.

function reducer (accumulator: X, currentValue: Y): X { }

Oznacza to, że korpus reduktora musi polegać na konwersji currentValuei bieżącej wartości accumulatorna wartość nowego accumulator.

Działa to w prosty sposób podczas dodawania, ponieważ zarówno akumulator, jak i wartości elementu są tego samego typu (ale służą innym celom).

[1, 2, 3].reduce((x, y) => x + y);

To po prostu działa, ponieważ wszystkie są liczbami.

[{ age: 5 }, { age: 2 }, { age: 8 }]
  .reduce((total, thing) => total + thing.age, 0);

Teraz podajemy wartość początkową agregatorowi. Wartością początkową powinien być typ, jakiego oczekuje się od agregatora (typ, który ma się pojawić jako wartość końcowa), w zdecydowanej większości przypadków. Chociaż nie musisz tego robić (i nie powinno tak być), należy o tym pamiętać.

Kiedy już to wiesz, możesz napisać znaczące redukcje dla innych problemów w relacji n: 1.

Usuwanie powtarzających się słów:

const skipIfAlreadyFound = (words, word) => words.includes(word)
    ? words
    : words.concat(word);

const deduplicatedWords = aBunchOfWords.reduce(skipIfAlreadyFound, []);

Podając liczbę wszystkich znalezionych słów:

const incrementWordCount = (counts, word) => {
  counts[word] = (counts[word] || 0) + 1;
  return counts;
};
const wordCounts = words.reduce(incrementWordCount, { });

Zmniejszenie tablicy tablic do pojedynczej płaskiej tablicy:

const concat = (a, b) => a.concat(b);

const numbers = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
].reduce(concat, []);

Za każdym razem, gdy chcesz przejść od szeregu rzeczy do pojedynczej wartości, która nie pasuje do 1: 1, warto rozważyć redukcję.

W rzeczywistości mapę i filtr można wdrożyć jako redukcje:

const map = (transform, array) =>
  array.reduce((list, el) => list.concat(transform(el)), []);

const filter = (predicate, array) => array.reduce(
  (list, el) => predicate(el) ? list.concat(el) : list,
  []
);

Mam nadzieję, że zapewnia to dodatkowy kontekst użycia reduce.

Jedynym dodatkiem do tego, do czego jeszcze się nie włamałem, jest oczekiwanie, że typy wejściowe i wyjściowe mają być dynamiczne, ponieważ elementy tablicy są funkcjami:

const compose = (...fns) => x =>
  fns.reduceRight((x, f) => f(x), x);

const hgfx = h(g(f(x)));
const hgf = compose(h, g, f);
const hgfy = hgf(y);
const hgfz = hgf(z);

Dla pierwszej iteracji „a” będzie pierwszym obiektem w tablicy, stąd ax + bx zwróci 1 + 2, tj. 3. Teraz w następnej iteracji zwrócone 3 jest przypisane do a, a więc a jest liczbą teraz n nazywającą siekierę da NaN.

Prostym rozwiązaniem jest najpierw mapowanie liczb w tablicy, a następnie ich zmniejszenie, jak poniżej:

arr.map(a=>a.x).reduce(function(a,b){return a+b})

tutaj arr.map(a=>a.x)zapewni tablicę liczb [1,2,4]. Teraz .reduce(function(a,b){return a+b})wystarczy użyć tych liczb bez żadnego hassel

Innym prostym rozwiązaniem jest podanie początkowej sumy jako zero poprzez przypisanie 0 do „a” jak poniżej:

arr.reduce(function(a,b){return a + b.x},0)

Na każdym etapie redukcji nie zwracasz nowego {x:???}obiektu. Więc albo musisz zrobić:

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return a + b.x})

lub musisz to zrobić

arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return {x: a.x + b.x}; }) 

W pierwszym kroku będzie działać dobrze, ponieważ wartość abędzie wynosić 1, a wartość bbędzie wynosić 2, ale jako 2 + 1 zostanie zwrócona, aw następnym kroku wartość bbędzie wartością zwracaną, from step 1 i.e 3a zatem b.xbędzie niezdefiniowana. .i undefined + anyNumber będzie NaN i dlatego otrzymujesz ten wynik.

Zamiast tego możesz spróbować, podając wartość początkową jako zero, tj

arr.reduce(function(a,b){return a + b.x},0);

Jeśli masz złożony obiekt z dużą ilością danych, taki jak tablica obiektów, możesz rozwiązać problem krok po kroku.

Na przykład:

const myArray = [{ id: 1, value: 10}, { id: 2, value: 20}];

Najpierw powinieneś zmapować tablicę na nową tablicę, która Cię interesuje, w tym przykładzie może to być nowa tablica wartości.

const values = myArray.map(obj => obj.value);

Ta funkcja zwrotna zwróci nową tablicę zawierającą tylko wartości z oryginalnej tablicy i zapisze ją w wartości const. Teraz twoje wartości const są tablicą podobną do tej:

values = [10, 20];

A teraz jesteś gotowy, aby wykonać redukcję:

const sum = values.reduce((accumulator, currentValue) => { return accumulator + currentValue; } , 0);

Jak widać, metoda zmniejszająca wykonuje funkcję wywołania zwrotnego wiele razy. Za każdym razem pobiera bieżącą wartość elementu z tablicy i sumuje z akumulatorem. Aby właściwie to zsumować, musisz ustawić wartość początkową akumulatora jako drugi argument metody redukcji.

Teraz masz nową stałą sumę o wartości 30.

zredukuj iteracje funkcji po kolekcji

arr = [{x:1},{x:2},{x:4}] // is a collection

arr.reduce(function(a,b){return a.x + b.x})

przetłumaczyć na:

arr.reduce(
    //for each index in the collection, this callback function is called
  function (
    a, //a = accumulator ,during each callback , value of accumulator is 
         passed inside the variable "a"
    b, //currentValue , for ex currentValue is {x:1} in 1st callback
    currentIndex,
    array
  ) {
    return a.x + b.x; 
  },
  accumulator // this is returned at the end of arr.reduce call 
    //accumulator = returned value i.e return a.x + b.x  in each callback. 
);

podczas każdego wywołania zwrotnego wartość zmiennej „akumulator” jest przekazywana do parametru „a” w funkcji wywołania zwrotnego. Jeśli nie zainicjujemy „akumulatora”, jego wartość będzie niezdefiniowana. Wywołanie undefined.x spowoduje błąd.

Aby rozwiązać ten problem, zainicjuj „akumulator” wartością 0, tak jak pokazano powyżej odpowiedź Casey.

Aby zrozumieć wejścia funkcji „zmniejsz”, sugeruję zajrzeć do kodu źródłowego tej funkcji. Biblioteka Lodash ma funkcję zmniejszania, która działa dokładnie tak samo jak funkcja „zmniejsz” w ES6.

Oto link: zmniejsz kod źródłowy

aby zwrócić sumę wszystkich xrekwizytów:

arr.reduce(
(a,b) => (a.x || a) + b.x 
)

Możesz użyć mapy i ograniczyć funkcje

const arr = [{x:1},{x:2},{x:4}];
const sum = arr.map(n => n.x).reduce((a, b) => a + b, 0);

Funkcja redukcji tablic przyjmuje trzy parametry, tj. Wartość początkową (domyślnie jest to 0), akumulator i wartość prądu. Domyślnie wartość initialValue będzie wynosić „0”. który jest pobierany przez akumulator

Zobaczmy to w kodzie.

var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal ) ; 
// (remember Initialvalue is 0 by default )

//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks .
// solution = 7

Teraz ten sam przykład z wartością początkową:

var initialValue = 10;
var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal,initialValue ) ; 
/
// (remember Initialvalue is 0 by default but now it's 10 )

//first iteration** : 10 +1 => Now accumulator =11;
//second iteration** : 11 +2 => Now accumulator =13;
//third iteration** : 13 + 4 => Now accumulator = 17;
No more array properties now the loop breaks .
//solution=17

To samo dotyczy również tablic obiektowych (aktualne pytanie dotyczące przepływu stosu):

var arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(acc,currVal){return acc + currVal.x}) 
// destructing {x:1} = currVal;
Now currVal is object which have all the object properties .So now 
currVal.x=>1 
//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks 
//solution=7

JEDNA RZECZ, KTÓRA NADUŻYĆ W UMYSŁU, domyślnie jest to wartość początkowa 0 i można podać wszystko, co mam na myśli {}, [] i liczbę

nie powinieneś używać siekiery jako akumulatora, zamiast tego możesz zrobić tak: `arr = [{x: 1}, {x: 2}, {x: 4}]

arr.reduce (funkcja (a, b) {a + bx}, 0) `