The basic concept

The reduce() method works from left to right in the array, executing callbacks for each element in turn (excluding elements in the array that were deleted or never assigned).

Argument parsing

Use syntax: arr.reduce(callback,[initialValue])

  • Callback (executes a function for each element in the array, containing four arguments)
    • PreviousValue (the value returned from the last call to the callback, or the initialValue provided)
    • CurrentValue (the element currently being processed in the array)
    • Index (index of the current element in the array)
    • Array (array of calls to reduce)
  • InitialValue (as the first argument to the first callback call.)

Basic Usage (Example)

No initial value is set

let arr = [2.4.6]
let sum = arr.reduce((prev, cur, index, array) = > {
  console.log('prev: ', prev)
  console.log('cur: ', cur)
  console.log('index: ', index)
  console.log('array: ', array)
  console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -')
  return prev + cur
})
/* There are three elements in the array, but the function is executed only twice, as follows. Prev: 2 // The first prev is the first element of the array, 2 cur: 4. The second element of the array is the currently processed element index: 1. [2, 4, 6] // The array of reduce calls ---------------- the second time output: prev: 6 // The value of the last callback return, 2 + 4 = 6, so here prev is 6 cur: 6 // Array elements are processed from left to right, where the third element, 6, is processed. Index: 2 [2, 4, 6] / / call the reduce the array of -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - arr = > [2, 4, 6] sum = > 12 * /
Copy the code

Set the initial value case

let arr = [2.4.6]
let sum = arr.reduce((prev, cur, index, array) = > {
  console.log('prev: ', prev)
  console.log('cur: ', cur)
  console.log('index: ', index)
  console.log('array: ', array)
  console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -')
  return prev + cur
},10)
/* Sets the initial value and executes the function three times, as follows. Prev: 10 // Set the initial value 10 cur: 2 // from left to right, the first element of the array 2 index: 0 // The index of the current element 2 is array: [2, 4, 6] // Call the array of reduce ---------------- the second execution output: prev: 12 // the value of the last callback return, 10 + 2 = 12, so here prev is 12 cur: Index: 1 // The index of the current element 4 is array: [2, 4, 6] // The array of reduce calls ---------------- the third time output: prev: 16 // The value of the last call to return, 12 + 4 = 16, so here prev is 16 cur: Index: 2 // The index of the current element 6 is array: [2, 4, 6] / / call the reduce the array of -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - arr = > [2, 4, 6] sum = > 22 * /
Copy the code

Basic usage as above, hands-on practice, you can roughly some understanding, the following will introduce some practical applications.

The practical application

Array summation, product

let arr = [1.2.3]
let sum = arr.reduce((prev, cur) = > prev + cur)
let mul = arr.reduce((prev, cur) = > prev * cur)
Copy the code

Count the number of occurrences of each element in the array

// Do not use reduce method
let arr = ['a'.'b'.'c'.'a'.'c']
let obj = {}
arr.forEach(item= > {
  if (item in obj) {
    obj[item]++
  } else {
    obj[item] = 1}})// obj => { a: 2, b: 1, c: 2 }

/ / use the reduce
let res = arr.reduce((prev, cur) = > {
  if (cur in prev) {
    prev[cur]++
  } else {
    prev[cur] = 1
  }
  return prev
}, {})
// res => { a: 2, b: 1, c: 2 }
Copy the code

Array to heavy

let arr = [5.1.1.2.3.4.3.5]
/ / Set methods
let res = Array.from(new Set(arr)) // res => [ 5, 1, 2, 3, 4 ]

/ / the forEach method
let resArr = []
arr.forEach(item= > {
  if(! resArr.includes(item)) { resArr.push(item) } })// resArr => [ 5, 1, 2, 3, 4 ]

/ / reduce method
let resArr = arr.reduce((prev, cur) = > {
  if(! prev.includes(cur)) { prev.push(cur)// prev.concat(cur)
  }
  return prev
}, []) // resArr => [ 5, 1, 2, 3, 4 ]
Copy the code

Convert a multidimensional array to a one-dimensional array

let arr = [ [0.1], [2.3], [4.5[2.3]]]// flat()
let res = arr.flat(Infinity) // res => [0, 1, 2, 3, 4, 5, 2, 3]

// reduce()
const flat = (item) = > {
  let res = item.reduce((prev, cur) = > {
    if (cur instanceof Array) {
    // Array.isArray(cur) <=> cur instanceof Array
      return prev.concat(flat(cur))
    } else {
      return prev.concat(cur)
    }
  }, [])
  return res
}
// flat(arr) => [0, 1, 2, 3, 4, 5, 2, 3]
Copy the code

These practical uses are summarized for the time being and will continue to be updated.