Reduce Trying to understand the parameters in the callback function of .reduce()

问题

I'm trying to learn JS and I have some questions about reduce() I want to know how can I know what parameters this function needs and how I should call them.

are this parameters connected with any data or the array outside the function.

or this parameters propose is only to be available in this local context of the callback to work as const and be able to store some date for the correct execution of the .reduce() .

Thank You For Your Time

Just trying to understand .reduce()

const companies= [
  {name: "Company One", category: "Finance", start: 1981, end: 2004},
  {name: "Company Two", category: "Retail", start: 1992, end: 2008},
  {name: "Company Three", category: "Auto", start: 1999, end: 2007},
  {name: "Company Four", category: "Retail", start: 1989, end: 2010},
  {name: "Company Five", category: "Technology", start: 2009, end: 2014},
  {name: "Company Six", category: "Finance", start: 1987, end: 2010},
  {name: "Company Seven", category: "Auto", start: 1986, end: 1996},
  {name: "Company Eight", category: "Technology", start: 2011, end: 2016},
  {name: "Company Nine", category: "Retail", start: 1981, end: 1989}
];

const totalYears = companies.reduce((total, company) => total + (company.end - company.start), 0);


console.log(totalYears);

回答1:

The parameters to reduce are related to the array. Here is a simple re-write to show what is effectively happening:

companies.reduce((total, company) => total + (company.end - company.start), 0);

can also be expressed as:

//first parameter to the callback
let total;

//value supplied as the second parameter to `.reduce()`
total = 0;

//the second parameter to the callback
for(let company of companies) { //this is the loop `.reduce` does for you

  //this variable does not show up in your code but is here for clarity
  let temp;

  //this is the body of your `.reduce()` callback
  temp = total + (company.end - company.start)

  //this would be `reduce` handing `total` to the next invocation
  total = temp;
}

This is a simplification but it can work to understand what is happening.

The parameters you define can be named arbitrarily, but they would serve the same purpose

the first parameter to the callback (total, in your case) is often called "accumulator" - it's a generic term and, frankly, very confusing at first, but all that it does is return the last result of the callback. So, if you are trying to sum all members of the array, this could be your running total, if you're trying to find the smallest item, it could just hold the current smallest.
the second parameter to the callback (company, in your case) is also often called "item". It's just the current item the callback is executed against.

It's worth noting that the callback also gets called with more arguments. It's up to you whether you want to use them or not - a lot of times they aren't needed:

the third parameter is the index of the current element
the fourth parameter is the entire array

const sample = ["h", "e", "l", "l", "o"];

//a simple concatenation to illustrate how the parameters work
const output = sample.reduce((accumulator, item, index, array) => {
  console.log(accumulator, item, index, array);
  
  return accumulator + item;
})

console.log("output is:", output);

the second parameter to .reduce() not to the callback (0 in your case) is the starting value of the accumulator (or total here). It's not strictly needed but it's useful in many occasions - you usually want to start from some value. If you don't supply this argument, then the first time .reduce() runs, it would start from the second value in the array and would set the accumulator to the first one:

let run = 1;
//no initial value set
["a", "b", "c"].reduce((accumulator, item) => {
  console.log(run++, accumulator, item);
})

let run = 1;
//with initial value set
["a", "b", "c"].reduce((accumulator, item) => {
  console.log(run++, accumulator, item);
}, "some initial value")

回答2:

They're only available inside the callback, but obviously they aren't constants, as total gets mutated with every tick. This reduce goes like this:

The accumulator is initialized to 0.
First tick, the callback gets the current value of the accumulator (it's named total, but this name is completely arbitrary), 0, and an element: an object (company), with, among other things, start = 1981 and end = 2004. The function returns the value of total + company.end - company.start (0 + 2004 - 1981). 2a. Value returned by the callback becomes the new value of the accumulator. It's now 23.
Second tick, the callback receives 23 as accumulator and { start: 1992, end: 2008 } as the current element. Everything else proceeds as above.

...

Last tick: the value returned by the last execution of the callback is the return value of the companies.reduce(/*...*/) expression.

来源：https://stackoverflow.com/questions/56342682/reduce-trying-to-understand-the-parameters-in-the-callback-function-of-reduce

标签

javascript

arrays

reduce