1.用法概述
reduce()对数组的每个元素执行相同的回调函数。每一次执行将先前元素的计算结果作为参数传入，最后将其结果计算汇总为单个返回值。reduce()可用于计算数组所有元素的总和或数组去重。
2.语法
reduce(callbackFun,initialValue?)
或reduce((previousValue,currentValue,currentIndex,array) => { } , initialValue?)
或reduce(function(previousValue,currentValue,currentIndex,array) { } , initialValue?)
1）参数
- callbackFun——数组中每个元素执行的箭头函数，该箭头函数有四个参数。
箭头函数 (previousValue,currentValue,currentIndex,array)
1).previousValue——必需。若索引下标为0,上一个被迭代的数组元素;否则为之前的迭代结果
2).currentValue——可选。当前被迭代的数组元素
3).currentIndex——可选。当前被迭代的数组元素索引
4).array——被迭代的数组
- initialValue——可选，初始值。若不填initialValue，其初始值是arr[0]，此时从索引为1的元素开始迭代；若填写InitialValue，则从索引为0的数组元素开始迭代
2）返回值
返回使用回调函数遍历整个数组后的结果。
3.案例用法
一、计算数组所有元素的总和
//无initialValue初始值
const p1 = [1,2,3,4,5,6];
const p2 = p1.reduce((previousValue, currentValue, currentIndex, array) => previousValue + currentValue );
console.log(p2); //21
//有initialValue初始值
const p1 = [1,2,3,4,5,6];
const p2 = p1.reduce((previousValue, currentValue, currentIndex, array) => previousValue + currentValue, 10);
console.log(p2); //31
二、计算数组中每个元素出现的次数
//分析：
//0.initialValue {} cur:'Alice' initialValue['Alice'] = 1 => return {'Alice':1}
// 1.initialValue {'Alice':1} cur:'Bob' initialValue['Bob'] ? initialValue['Bob'] = 1 => return {'Alice':1,"Bob":1}
// 2.initialValue {'Alice':1,"Bob":1} cur:'Tiff' initialValue['Tiff'] ? initialValue['Bob'] = 1 => return {'Alice':1,"Bob":1,"Tiff":1}
// 3.initialValue {'Alice':1,"Bob":1,"Tiff":1} cur:'Bruce' initialValue['Bruce'] ? initialValue['Bruce'] = 1 => return {'Alice':1,"Bob":1,"Tiff":1,"Bruce":1}
// 4.initialValue {'Alice':1,"Bob":1,"Tiff":1,"Bruce":1} cur:'Alice' initialValue['Alice'] ? initialValue['Alice']++ => return {'Alice':2,"Bob":1,"Tiff":1,"Bruce":1}
<!--写法1-->
const arr = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
const account = arr.reduce((accumulator, cur) => {
if (cur in accumulator) {
accumulator[cur]++
} else {
accumulator[cur] = 1
}
return accumulator
}, {})
console.log(account) //{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }
<!--写法2-->
const account = arr.reduce((accumulator, cur) => {
accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1
return accumulator
}, {})
console.log(account) //{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }
<!--写法3-->
const arr = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
const func1 = (arr)=>{
return arr.reduce((accumulator,cur)=>{
accumulator.set(cur,accumulator.has(cur) ? accumulator.get(cur)+1 : 1)
return accumulator
},new Map())
}
console.log(func1(arr)) //{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }
三、数组去重：对数组arr中所有相同的元素进行去重操作
<!--写法1-->
const arr =[1,2,3,6,6,5,1,2,9,0]
const newArr = arr.reduce((pre,cur)=>{
pre.includes(cur) ? null : pre.push(cur)
return pre
},[])
console.log(newArr); //[1,2,3,6,5,9,0]
<!--写法2-->
const arr =[1,2,3,6,6,5,1,2,9,0]
const newArr = arr.reduce((pre,cur)=>{
pre.indexOf(cur)===-1 ? pre.push(cur) : null
return pre
},[])
console.log(newArr); //[1,2,3,6,5,9,0]
小结：
reduce()功能很强大，可以替换实现filter()、map()方法等。
