前端程序员应该理解的reduce方法，对你的js能力很有帮助

前言：之前一直不懂reduce该怎么去好好的利用，今天花时间去理解一下，把理解的意思给大家参考参考，欢迎交流

目录

reduce方法接受参数： 接受一个回调函数和初始值

代码讲解参数

个人理解： 

常见使用：

去重：

累加：

统计出现次数：

比较大小：

---

reduce方法接受参数： 接受一个回调函数和初始值

array.reduce(callback,初始值) 等价于 array.reduce((prev, cur) => { },value)

回调函数接受四个参数：

1. prev：累加值（1：首次遍历如果没有初始值，则拿数组的第一个值，有初始值，则拿初始值，第二次的遍历prev则等于第一次取得值和cur的逻辑处理结果，二次以后的遍历则等于累加逻辑结果再和cur的逻辑结果）通俗的说就是函数返回值 return的结果
2. cur：没有初始值，取数组第二个的值，有初始值取数组第一个值
3. 后面两个参数是当前索引和当前数组，不做具体讲解
4. 代码讲解

   无初始值的情况
   let a = [1, 2, 3, 4]
     a.reduce((old, item) => {
       console.log(old, item);
       return 99
     })
   打印结果
   1 2
   99 3
   99 4
   
   有初始值的情况
     let a = [1, 2, 3, 4]
     a.reduce((old, item) => {
       console.log(old, item);
       return 99
     }, 0)
   打印结果
   0 1
   99 2
   99 3
   99 4
   
   old代表着return 这个回调函数的返回结果
   item代表数组的每一项

代码讲解参数

var total = [ 0, 1, 2, 3 ].reduce(
  ( prev, cur ) => prev + cur,
  0
);
 
// total  6

因为有初始值0，所以

第一次迭代   prev=初始值 0  cur取数组第一个0

第二次迭代   prev等于处理的逻辑结果prev + cur   0+0 = 0，cur此时取数组第二个值 1

第三次迭代   prev = 0+1 =1 ，cur 此时取数组第三个值= 2

第四次。。。prev= 1+2 =3， cur 此时取数组第四个值= 3

第五次。。。prev= 3+3 =6 ，cur迭代完了 

所以结果等于 6

个人理解： 

综上理解：我们可以知道其实就是一个prev逻辑处理结果 和 cur的遍历迭代 ，实现prev的结果返回 ，在这个逻辑里面可以做一些事情，比如累加啥的

还有个个人的理解，在整个reduce方法中，prev只有第一次在没有初始值的情况下，会接触到数组里面的项，其他时候都是作为一个和cur的逻辑处理的结果（prev等于return的结果，即函数返回值）

而cur则每次递增的遍历数组里面的每个item

常见使用：

去重：

普通去重可以使用【...new Set(arr)】,对于数组对象的去重，可以使用reduce

 
普通去重
 let arr = [1, 2, 6, 2, 1];
  let filterArr = arr.reduce((pre, cur, index, array) => {
    if (!pre.includes(cur)) {
      pre.push(cur)
    }
    return pre;
  }, [])
  console.log(filterArr); // [1,2,6]


数组对象去重
let a = [{
    id: 1
  }, {
    id: 2
  }, {
    id: 1
  }, {
    id: 4
  }]

去重函数
  function Set(arr) {
    let obj = {}
    let newArr = arr.reduce((prev, cur) => {
      obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur)
      return prev
    }, [])
    return newArr
  }
  console.log(Set(a));

累加：

  普通累加
  let a = [1, 2, 3, 1]
  let num = a.reduce((prev, cur) => prev + cur, 0)
  console.log(num);

数组对象累加：

  let a = [{
    cost: 1
  }, {
    cost: 2
  }, {
    cost: 1
  }, {
    cost: 4
  }]
  let obj = {}
  let num = a.reduce((prev, cur) => prev + cur.cost, 0)
  console.log(num);

统计出现次数：

function countArrayELem(array, elem) {
  return array.reduce((total, cur) => (total += cur == elem ? 1 : 0), 0);
}

let numbers = [1, 2, 3, 1, 5];
console.log(countArrayELem(numbers, 1)); //2

比较大小：

通常reduce通过不设置初始值。则按prev取数组第一个值，cur取数组第二个值，用  return old > item ? old : item  这种三元运算符来做

 let a = [1, 2, 3, 4]
  let c = a.reduce((old, item) => {
    return old > item ? old : item

  })
  console.log(c);