reduce函数让初学者头疼！有两大难点，一方面参数怎么搞一个函数？另一方面函数里为什么还有好多参数，它们都是干什么的？

reduce字面意思是“减少”，在这里将它理解成“归纳”“归并”最为合适。

reduce 的语法

首先reduce的语法如下：

arr.reudce( callback , [ initalValue ])

reduce作为数组的方法，它可以将数组的每一个元素都执行一次回调函数，也就是通过这个函数，让每一个元素都能获得变化。通过reduce方法的使用，可以让数组的每一项都执行回调函数。

callback回调函数中还有四个参数，分别为：

• previousValue 代表上一次调用回调返回的数值（如果第一项调用就是初始值）
• currentValue 当前数组中被处理的元素
• index 当前被处理元素的下标
• array 调用reduce方法的原始数组

initalValue就是第一次调用callback的初始参数

分析两大参数

let arr = [1,3,5,7];
let sum = arr.reduce(function(prev,current,index,arr){
  console.log(prev,current,index)
  /*
        1 3 1 
        4 5 2
        9 7 3
      */
  return prev+current
})
console.log(sum)  // 16

根据以上的过程，可以清楚的分析到各个参数所代表的含义。

当reduce传入回调时，初始的prev值为数组第一个元素，而current当前值和index索引值，默认从arr[1] 开始执行。

到下一个元素执行回调时，prev就变成为前一次返回的（prev+current），current和index则继续向下获取。

那么，就有一个疑问，为什么一个长度为四的数组，只执行了三个元素的回调？第二个参数initalValue用什么用途？

所以引出了第二个参数initalValue。当添加上initalValue参数后，就能得到以下的结果。

let arr = [1,3,5,7];
let sum = arr.reduce(function(prev,current,index,arr){
	console.log(prev,current,index)
  /*
        10 1 0
        11 3 1 
        14 5 2
        19 7 3
      */
  return prev+current
},10)
console.log(sum)  // 26

可以观察到，这次执行了四次，index也从0遍历到了3。原来，第一次的prev就是我们传入的initalValue的数值。

一些适用场景

reduce函数可以放在很多场景使用，做一些数组的变换，具体如下所示：

1. 累加、类乘

let arr = [1,3,5,7];
let sum = arr.reduce(function(prev,current,index,arr){
  return prev+current
},0)

let mul = arr.reduce(function(prev,current,index,arr){
  return prev*current
},1)
console.log(mul)  // 105

2. 二维数组转一位数组

let arr = [[1,2,3],[4,5],[6,7,8],9]
let newArr = arr.reduce(function(a,b){
  return a.concat(b)
})
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

3. 数组去重

let arr = ['apple','pear','lemon','pear']
let newArr = arr.reduce(function(prev,current){
  if( !prev.includes(current)){
    return prev.concat(current)  
  }else{
    return prev
  }
},[])
console.log(newArr) // ["apple", "pear", "lemon"]

4. 统计数组元素出现的次数

let arr = [1,2,3,4,5,1,2,3,5,7,8]
let count = arr.reduce(function(prev,current){
  if(prev[current] == undefined){
    prev[current] = 1
  }else{
    prev[current]++
  }
  return prev
},{})
console.log(count) // {1: 2, 2: 2, 3: 2, 4: 1, 5: 2, 7: 1, 8: 1}

以上就是reduce的用法以及拓展，如果觉得有帮助，欢迎收藏、评论、关注~