reduce()
1、语法
arr.reduce((pre, cur, index, arr) => {
pre // 上一次调用的返回值，或者是初始值initialValue
cur // 数组当前处理的元素
index // 数组当前处理元素的下标（索引）
arr // 当前调用reduce的数组
initialValue // 第一次循环调用的初始值 pre
}, initialValue)
2、详解initialValue参数
const arr = [1, 2, 3, 4]
const sum = arr.reduce((pre, cur, index) => {
console.log(pre, cur, index)
return pre + cur
})
console.log(arr, sum)
打印结果
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
从这段代码可以看出，reduce遍历数组是从index=1开始的，pre的第一次的值是数组的第一个值，数组长度是4，遍历了3次。
再看：
const arr = [1, 2, 3, 4]
const sum = arr.reduce((pre, cur, index) => {
console.log(pre, cur, index)
return pre + cur
}, 0)
console.log(arr, sum)
打印结果
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
这段代码是从index=0开始遍历的，pre的第一次的值是初始值0，共遍历了4次。
得出结论：
如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。
注意：
当数组为空的时候，不提供initialValue会报错
const arr = []
const sum = arr.reduce((pre, cur, index) => {
console.log(pre, cur, index)
return pre + cur
})
// Uncaught TypeError: Reduce of empty array with no initial value
提供了初始值就不会
const arr = []
const sum = arr.reduce((pre, cur, index) => {
console.log(pre, cur, index)
return pre + cur
}, 0)
console.log(arr, sum) // [] 0
3、reduce用法
1.求和、求积
const arr = [1, 2, 3, 4]
const sum = arr.reduce((pre, cur) => pre + cur); // 求和 10
const mul = arr.reduce((pre, cur) => pre * cur); // 求积 24
2.计算数组中元素出现个数
const arr = ["lin", "chen", "wei", "lin", "hui"]
const num = arr.reduce((pre, cur) => {
if(cur in pre){
pre[cur] ++
}else{
pre[cur] = 1
}
return pre
}, {})
console.log(num) // {lin: 2, chen: 1, wei: 1,hui: 1}
3.数组去重
const arr = [1,1,2,3,4,5,6,6,6]
const newArr = arr.reduce((pre, cur) => {
if(!pre.includes(cur)){
pre.push(cur)
}
return pre
}, [])
console.log(newArr) // [1, 2, 3, 4, 5, 6]
4.多维数组转一维
const arr = [[0, 1], [2, 3], [4, [5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>{
if(Array.isArray(cur)){
pre = pre.concat(newArr(cur))
}else{
pre.push(cur)
}
return pre
},[])
}
console.log(newArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7]
