为什么我的reduce函数中的累加器不采用回调的返回值？

Question

I have an array of objects and I want to sum all the "bps" values in my object for the entire array.

My array of objects looks like this:

arr = [
    {
        date: "2017-06-14T14:00:00.000Z",
        bps: 2
    },
    ...
]

Here is my reduce function:

arr.reduce((accum, currVal) => {
        console.log(accum.bps);
        console.log(currVal.bps);
        console.log(accum.bps + currVal.bps);
        return accum.bps + currVal.bps;
    }, {
        bps: 0
    });

Based on what has been outputted to the console, it appears that after the first iteration of the reduce function, the return value of 0 does not become the next iteration's accumulator (it becomes "undefined"). Why is this the case and what should my function look like to sum up all the "bps" values in my array?

The is what the console is displaying

scripts.js:1024 0
scripts.js:1025 0
scripts.js:1026 0
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 1.95
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1024 undefined
scripts.js:1025 0
scripts.js:1026 NaN
scripts.js:1031 NaN

Answer 1

As your reduce is simply adding all the .bps values together, you can simply map all the array items to an array of numbers, then add those together

arr.map(({bps}) => bps)
.reduce((a, b) => a + b);

or even

arr.reduce((accum, {bps}) => accum + bps, 0);

Answer 2

You should return an object that has a bps key, not a pure sum.

Ie return { bps: accum.bps + currVal.bps }; instead of return accum.bps + currVal.bps;

---

arr
  .reduce((accum, currVal) => {
    console.log(accum.bps);
    console.log(currVal.bps);
    console.log(accum.bps + currVal.bps);
    return { bps: accum.bps + currVal.bps };
  }, {
    bps: 0
  })
  .bps;

---

Alternatively (this will actually work faster, especially for long arrays, because it doesn't create unnecessary objects, only the result object).

 
 
 
 
  
  
  const bpsResult = { bps: arr .reduce((accum, currVal) => { console.log(accum); console.log(currVal); console.log(accum + currVal); return accum + currVal; }, 0); };
 
 
  

Answer 3

This works. accum is a number so don't use accum.bps. Also, the initial value is a number, so don't use {bps: 0}, just use 0.

arr = [{
    date: "2017-06-14T14:00:00.000Z",
    bps: 2
}, {
    date: "2017-05-14T14:00:00.000Z",
    bps: 9
}, {
    date: "2017-08-14T14:00:00.000Z",
    bps: 4
}]

// Here is my reduce function:

arr.reduce((accum, currVal) => {
    console.log("accum-" + accum);
    console.log("currVal.bps-" + currVal.bps);
    console.log("return value-" + (accum + currVal.bps));
    return accum + currVal.bps;
}, 0);

Here is the output:

accum-0
currVal.bps-2
return value-2
accum-2
currVal.bps-9
return value-11
accum-11
currVal.bps-4
return value-15