Introduction to the reduce() function in JS

Definition

reduce() Method to receive a function as an accumulator , Every value in the array （ From left to right ） Start to shrink , The final calculation is a value .

reduce() As a higher-order function , For functions compose.

Be careful : reduce() Callbacks are not performed for empty arrays .

---

grammar

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Syntax reference above   Rookie League

Usually , The first parameter Use   prev （ as follows ）

arr.reduce(function(prev,cur,index,arr){
...
}, init);

 

 prev： Last call callbackFn The return value of . On the first call , If an initial value is specified init, Its value is init, Otherwise, the array index is 0 The elements of arr[0].
cur： The element being processed in the array . On the first call , If an initial value is specified init, Its value is array index 0 The elements of arr[0], Otherwise arr[1].
index： The index of the element being processed in the array . If an initial value is specified init, The starting index number is 0, Otherwise from index 1 start .
arr： Array for traversal .

Is it a feeling to see so many parameters reduce Very complicated , I thought so at first , Then repeatedly understand the meaning of the above parameters , I know, usually , The commonly used parameters are only the two parameters that must be selected above   prev,cur , Let's take a look at the case

---

Case study

1. Array sum

Usually , We often use for loop perhaps forEach , Use here reduc It will also be more concise , as follows

var arr = [1,5,8,10,15,66,65,25,48,55]

//  forEach 
var eachSum = 0;
arr.forEach( item =>{
  eachSum += item
})
console.log(eachSum); //298

---

var arr = [1,5,8,10,15,66,65,25,48,55]

//  reduce
 var sum = arr.reduce(function(prev,cur){
  return prev+cur;
 });

console.log(sum); //298

2. Find the maximum value of an array item

var arr = [1,5,8,10,15,66,65,25,48,55]
var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

console.log(max)  //66

Because no initial value was passed in , So at the beginning prev The value of is an array The first one is 1,cur The value of is an array The second item 5, Take the maximum of two values 5  As a function of the next round prev , Take the next item of the array, that is The third one 8 As a function of the next round cur , Continue to the next round of adjustment to compare the size , So again and again , To get the maximum value of the array . 

3. Flatten a two-dimensional array

var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((prev, cur) => prev.concat(cur), []);
console.log(res)   // [1,2,8,3,4,9,5,6,10]

The initial value is passed here init Empty array [ ] , So start saying  prev The value of is [ ] , cur For the first item of the array [1, 2, 8], Then proceed concat operation

summary

reduce(callback,initiaValue) Two variables are passed in , Callback function (callback) And the initial value (init).

The function has four incoming parameters ,prev and cur,index and array. Prev and cur It's what you have to know .

When no initial value is passed in ,prev It starts with the first element in the array ,cur Is the second element of the array .

But when the initial value is passed （init） after , first prev Will be the initial value init,cur Will be the first element in the array .

arr  Represents the original array ;
prev  Represents the return value when the callback was last called , Or the initial value init;
cur  Represents the array element currently being processed ;
index  Represents the index of the array element currently being processed , If provided init value , The index is 0, Otherwise the index is 1;
init  Represents the initial value .

---

If there is any mistake in the article , Please ask questions , I am obliged . You can comment on what you don't understand , I will be one A reply

If the article is helpful to you , I hope you can praise and encourage , We will work together in the future     Long journey , The resistance and long