javascript中数组方法reduce的使用

​
    reduce()方法遍历数组时使用，它和for循环以及forEach遍历不一样，reduce迭代数组然后把数组元素累积到一起，是一个累加器。

语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

    reduce的第一个参数是回调函数，回调函数需要两个参数total和currentValue，total就是累计值也可以理解为上次回调返回的值，没有执行回调时total就是初始值initialValue；第二个参数就是初始值，是可选的。

有无初始值的情况

const arr = [1,2,3,4,5]​const sum = arr.reduce((total,current,index,array) => {  console.log(total,current,index)  return total + current}) //这里没有初始值​console.log('arr--',arr)console.log('sum--',sum)

 

执行结果

可以看出没有初始值时reduce是从第一个元素开始遍历，total是数组的第一个元素，并且遍历次数是 数组长度-1

const arr = [1,2,3,4,5]​const sum = arr.reduce((total,current,index,array) => {  console.log(total,current,index)  return total + current},0) //这里设置初始值0​console.log('arr--',arr)console.log('sum--',sum)

执行结果

有初始值的话reduce是从初始值开始遍历，total为初始值0，遍历次数为数组长度。

    reduce的一般用法就是上面例子求和或者求积，不过reduce还有高级一点的用法。

（1）计算数组中元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];​let nameNum = names.reduce((pre,cur)=>{  if(cur in pre){    pre[cur]++  }else{    pre[cur] = 1   }  return pre},{})console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

（2）转换数组维度

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]const newArr = function(arr){   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])}console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

（3）数组去重

let arr = [1,2,3,4,4,1]let newArr = arr.reduce((pre,cur)=>{    if(!pre.includes(cur)){      return pre.concat(cur)    }else{      return pre    }},[])console.log(newArr);// [1, 2, 3, 4]

（4）对象里的属性求和

const result = [    {        subject: 'math',        score: 10    },    {        subject: 'chinese',        score: 20    },    {        subject: 'english',        score: 30    }];​const sum = result.reduce((prev, cur) => {    return cur.score + prev;}, 0);console.log(sum) //60

个人公众号：

https://mp.weixin.qq.com/s?__biz=MzI2NTE3MTE2OQ==&tempkey=MTAzMF9wUHVRWGtma251MEtqT3NJa21SWTVZcHMwb25FeVJVc2dBN09xT2lMTTFhSVVYa0dyVnJHNHBGeXY4NFI5UHY1bXZDUUhzSUFDY0lLNUl6ODYwcl9Hc1NnbVdvNmtiVkQ0S2NTRHhzZmxaVjZTb1FYd2UxdnBpSy0yVzh2cjNTVWw1a2FwaHpjdGN6MndLWGpGNlpINVBZRVNfNmR1by1VZHB1SUd3fn4%3D&chksm=72b93ebb45ceb7ad4faaef88c1820d00d3e32613511a5cc2d9df9de1cef40c30c028f60beff4#rd