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函数可以放在很多场景使用，做一些数组的变换，具体如下所示：
- 累加、类乘
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
- 二维数组转一位数组
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]
- 数组去重
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"]
- 统计数组元素出现的次数
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的用法以及拓展，如果觉得有帮助，欢迎收藏、评论、关注~
