数组方法reduce的详解与使用场景

数组方法reduce的详解与使用场景

语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数：

• callback

  执行数组中每个值的函数(如果没有提供 initialValue,则从数组的第二个值开始)，函数包含四个参数：

  1. accumulator:累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或者是initialValue
  2. currentValue:数组中正在处理的元素。
  3. index: 数组中正在处理的当前元素的索引(可选)。 如果提供了initialValue，则起始索引号为0，否则从索引1起始
  4. array:调用reduce()的数组(可选)

• initialValue(可选)

  作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

reduce()的运行过程

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array)=>{
  return accumulator + currentValue;
});

由于没有设置初始值initialValue,所以使用数组的第一个值作为accumulator的初始值,因此只调用四次,起始索引从1开始

callback	accumulator	currentValue	currentIndex	array	return value
第一次调用	0	1	1	[0, 1, 2, 3, 4]	1
第二次调用	1	2	2	[0, 1, 2, 3, 4]	3
第三次调用	3	3	3	[0, 1, 2, 3, 4]	6
第四次调用	6	4	4	[0, 1, 2, 3, 4]	10

---

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array)=>{
  return accumulator + currentValue;
},10);

由于设置了初始值initialValue=10,所以将initialValue的值作为accumulator的初始值,因此调用了五次,起始索引从0开始

callback	accumulator	currentValue	currentIndex	array	return value
第一次调用	10	0	0	[0, 1, 2, 3, 4]	10
第二次调用	10	1	1	[0, 1, 2, 3, 4]	11
第三次调用	11	2	2	[0, 1, 2, 3, 4]	13
第四次调用	13	3	3	[0, 1, 2, 3, 4]	16
第五次调用	16	4	4	[0, 1, 2, 3, 4]	20

常见的使用场景

1. 数组求和

let arr = [1,2,3,4,5]
let newArr = arr.reduce((pre,cur)=>{
    return pre+cur
}) 
console.log(newArr) //15

let arrObj = [
    {num:1},
    {num:2},
    {num:3}
]
let newArr = arrObj.reduce((pre,cur)=>{
    return pre +cur.num
},0)
console.log(newArr) //6

2. 数组去重

let arr = [1,2,3,4,5,2,5,4,4]
let newArr = arr.reduce((pre,cur)=>{
    if(pre.indexOf(cur) === -1){
    	pre.push(cur)
    }
    return pre
},[])
console.log(newArr)// [1, 2, 3, 4, 5]

3. 二维数组转一维数组

let arrS = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
]
let newArr = arrS.reduce((pre,cur)=>{
    //return pre.concat(cur)
    return [...pre,...cur]   
},[])
console.log(newArr)// [1, 2, 3, 4, 5, 6, 7, 8, 9]

4. 计算数组中每个元素出现的次数

let arr = ['c','a','b','c','b','c']
let newArr = arr.reduce((pre,cur)=>{
    if(cur in pre){
        pre[cur]++;
    }else{
        pre[cur] =1
    }
    return pre
},{})
console.log(newArr)// {c: 3, a: 1, b: 2}