【javascript专题】 高逼格的数组方法reduce解析及运用

447 阅读2分钟

本文章要讲述数组方法中一个比较难理解的方法:reduce

首先,我们搬出reduce方法的模型:

array.reduce((pre,cur,index,arr)=>{},init)

接着,重点理解以下模型中每个参数的特点:

1.arr:为要操作的原数组

2.pre:指的是上一次调用函数的返回值,再有初始值init的情况下,pre第一次进入reduce函数调用的值为init3.cur:指的是当次调用函数所操作的当前元素。在第一次进入函数时,如果有init,则cur的索引为0,如果没有init,则pre代替init,那么cur的索引为14.index:指的是当前操作元素cur的索引值。

5.init:第一次进入reduce函数时的初始值,它如何使用极为关键。

通常来讲,使用reduce方法最终要的两个参数就是pre和cur

那么我们先来用最简单的案例讲述reduce方法如何使用? 数组求和,代码如下:

    const arr = [1,2,3,4]

    const res = arr.reduce((pre,cur)=>{

      return pre+cur

    },)  //此次不设置初始值,第一次进入reduce函数时,pre的值为索引0的1,cur的索引为1。

    console.log(res) //输出 10

那么如果init设置为2呢

    const arr = [1,2,3,4]

    const res = arr.reduce((pre,cur)=>{

      return pre+cur

    },2)  //此次设置初始值,第一次进入reduce函数时,pre的值2,cur的索引为0。

    console.log(res) //输出 12

接下来用一个统计人名的案例来加深一下对reduce方法的理解


    let person = ["jack","Daivd","nick","mike","nick"]

    let data = person.reduce((pre,cur)=>{

      //当pre对象返回后当中已经包含"cur"的key。将它对应的value加一

      if(cur in pre){

        pre[cur]++

      }

      //没有的话就在pre对象里加上cur的key并添加它的value为1

      else{

        pre[cur] = 1

      }

      return pre //注意:reduce函数中必须要有返回值,否则下一次调用时没有pre,立刻报错

    }, {})//把初始值设置成{},方便统计人名。

    console.log(data) //输出 {jack: 1, Daivd: 1, nick: 2