js-reduce函数的使用

前言：

前端在实际开发中经常要处理各种数据，常用一些forEach，map，filter方法等，偶尔也使用一下reduce函数，但通常都是直接拷贝来用，并不是很理解这个函数，这次认真学习一下吧。

介绍：

reduce方法接收一个回调函数作为累加器，会在数组的每个元素上执行用户提供的回调函数，最终计算为一个值。对于空数组则不会执行。

语法：

array.reduce(function(prev, cur, curIndex, arr), init)

参数	描述
function(prev, cur, curIndex, arr)	必传。用于执行每个数组元素的回调函数 参数 描述 prev（必传） 初始值，或者上一次调用回调函数的返回值。 第一次调用时，若指定了初始值init，则值为init，否则为arr[0] cur（必传） 当前正在处理元素。 第一次调用时，若指定了初始值init，则值为arr[0]，否则为arr[1] curIndex（可选） 当前元素的索引。 若指定了初始值init，则起始值为0，否则从索引1开始 arr（可选） 当前元素所属的数组对象
init	可选。传递给函数的初始值

举例：

1、数组求和

forEach方法求和

getSum() {
    //forEach方法求和
    let array = [2, 5, 8]
    let sum = 0
    array.forEach(item => {
      sum += item
    });
    console.log(sum); //15
},

reduce函数解析：

初始值init传了0，所以回调函数

第一次执行时，prev等于init的值0，cur等于array[0]的值2，此时返回值0+2=2，

第二次执行时，prev等于上一次调用回调函数的返回值2，cur等于5，此时返回值2+5=7

第三次执行时，prev等于上一次调用回调函数的返回值7，cur等于8，此时返回值7+8=15

getSum() {
    //reduce方法求和
    let array = [2, 5, 8]
    let sum = 0
    sum = array.reduce((prev,cur) => {
      return prev + cur
    }, 0)
    console.log(sum); //15
},

 如果初始值不传，那么回调函数

第一次执行时，prev等于array[0]的值2，cur等于array[1]的值5，此时返回值2+5=7，

第二次执行时，prev等于上一次调用回调函数的返回值7，cur等于8，此时返回值7+8=15

getSum() {
    //reduce方法求和
    let array = [2, 5, 8]
    let sum = 0
    sum = array.reduce((prev,cur) => {
      console.log('prev:',prev,  'cur:',cur)
      return prev + cur
    })
    console.log(sum); //15
},

2、扁平二维数组

handle() {
    let array = [
      [ 1,4,8 ],
      [ 12,44,45 ],
      [ 34,67,88 ],
    ]
    let temp = array.reduce((prev,cur) => prev.concat(cur), [])
    console.log(temp); // [1, 4, 8, 12, 44, 45, 34, 67, 88]
},

3、数组去重

在实际项目中，对于简单的数据处理，我更倾向于使用map之类的方法。reduc也可以用于数组去重，浅浅分析一下。

handleRepeat() {
    let array = [
      { name:'李白', age: 18, school: '清华' },
      { name:'杜甫', age: 19, school: '北大' },
      { name:'王维', age: 17, school: '复旦' },
      { name:'白居易', age: 18, school: '清华' },
    ]
    let tempobj = {};
    array = array.reduce((prev,cur) => {
      tempobj[cur.age] ? '' : tempobj[cur.age] = true && prev.push(cur)
      return prev
    },[])
    console.log(tempobj);
    console.log(array);
},

 

总结：

reduce(callback,initiaValue)会传入两个变量，回调函数(callback)和初始值(init)。

callback函数有四个传入参数，prev和cur，index和array。 Prev和 cur 是必传的。

当传入初始值（init）后,第一个 prev 是初始值 init，cur 将是数组中的第一个元素。

没传初始值时，prev是从数组中第一个元素开始的，cur 是数组第二个元素。