Reduce is an array prototype method. It is very powerful, but it is rarely used in practice. Here is the official overview of this function: The reduce() method receives a function as an accumulator. Each value in the array (from left to right) is reduced to a single value. As a high-order function, reduce receives a callback function to call each item in the array until the end of the array

Reduce the parameters of the

Reduce can receive two parameters. The first parameter is a function, which has four parameters

  1. The first prev: the last value, which is the value after the computed operation
  2. Second curr: the current value of the array, incremented by 1 each time it is executed
  3. Third index: the index of the current value of the array
  4. Fourth ARR: primitive array
Const arr = [1,2,3,4,5] arr.reduce((prev, curr, index, arr) => {return prev + curr}) // accumulator 15Copy the code

As shown in the previous example, reduce takes only one callback function argument: prev is the first item of the array, curr is the second item of the array (index=1), prev is 3 on the second execution, curr is 3 on the third execution, prev is 6 on the third execution, curr is 4 on the fourth item of the array. The third execution of prev is 10, curr is 5, and 10+5=15 is returned. If reduce does not pass the second argument, the number of reduce executions is arr.length-1

The second argument to reduce is the default value for prev. If prev is passed, curr is evaluated from the first item in the array by default

Const arr = [1,2,3,4,5] arr.reduce((prev, curr, index, arr) => {return prev + curr}, 0) // accumulator 15

The process is similar to passing a single argument, except that the number of times arr.length is executed and index starts at 0

Reduce usage scenarios

1. The accumulator

Computes the sum value of the properties in the object. The scenario requires that the second parameter be set to the initial calculated value

const arr = [
 {
   total: 4
 },
 {
   total: 5
 },
 {
  total: 8
 }
]
const total = arr.reduce((prev, curr) => {
  return prev + curr.total
}, 0) // 17
Copy the code
2. Array deduplication

There are many ways to deduplicate arrays, but reduce can also be used to deduplicate arrays

Const arr = [1,2,4,4,5,5,6] const newArr = arr. Reduce ((prev, curr) => {if (! Prev. push(curr)} return prev}, []) prev. Push (curr)} return prev}, [])Copy the code
3. Array flattening

Convert a two-dimensional array to a one-dimensional array with reduce, returning a new array each time the traversal is executed, pointing to prev (the value last executed or evaluated)

Const arr = [1,[2,3],4,[5,6]] const newArr = arr.reduce((prev, curr) => {return prev.concat(array.isarray (curr)? curr : [curr]) },[])Copy the code
4. Count the number of occurrences of elements in the array
const arr = ['tom', 'mary', 'slice', 'tom', 'mary']
const item = arr.reduce((prev, curr) => {
  if (curr in prev) {
    prev[curr]++
  } else {
    prev[curr] = 1
  }
  return prev
}, {})
// {mary: 2, slice: 1, tom: 2}
Copy the code

Reduce related method: reduceRight, which is completely similar to reduce parameters and usage, except that the calculation sequence is different. Reduce is calculated from left to right, while reduceRight is calculated from right to left