详解数组中的reduce的用法

前言:在介绍之前，先看下reduce的参数，reduce是数组的方法, 里面的参数（回调函数，初始值），

参数: reduce（（Accumulator,Current,CurrentIndex,SourceArray）=>{},init）

• Accumulator：累加器

• Current：数组中的每一项
• CurrentIndex: 当前被执行的数组元素索引
• SourceArray：原数组，也就是调用reduce方法的数组
• init:代表一个初始值

作用:计算数组中的和；

1. 当有初始值的情况

有初始值，他会将初始值赋值给累加器，当前执行的数组元素就会从第一项开始

  var arr = [10, 20, 30, 40, 50];
    var cc = arr.reduce((add, val) => {
      return add + val

    }, 10);
    console.log(cc);//160

add（累加器的值）    val（数值中项的值）        retun

10        10          20

20         20         40 

40        30          70 

70         40        110 

110      50         160 

核心思路:每次进行累加后就会把值赋值给累加器，注意return的结果。

解析： 第一次进行return  ，10（初始值）+10(数组中的第一项),通过reurun返回给add累加器，完成第一次的累加，  这是第一次进行遍历，这时候累加器的值是20，然后通过与数组中的第二项进行相加，20+20 然后通过return 返回给累加器，相当于赋值给累加器，一致这样循环下去。直到数组中的所有项加完为止。

2. 当没有初始值的情况

没有初始值，他会将数组中的第一项赋值给累加器，从数组中的第二项开始加。

var arr = [10, 20, 30, 40, 50];
    var cc = arr.reduce((add, val) => {
      return add + val

    });
    console.log(cc); //150

add（累加器的值）     val (数值中项的值)       retun

10        20       30

30       30        60 

60      40        100

100    150       150

解析：可以看出数组中没有初始值，那么把数组中的第一项作为初始值赋值给累加器，从第二项开始进行相加，  通过return第一次返回给累加器的值是: 10（第一项当作累加器的初始值）+20(数组中的第二项)=30， 那么第二次相加，累加器的初始值为30+30数组中的第三型=60（通过return返回给累加器的值），第三次：累加器的值：60  第四项的值:40      return 给累加器的值为：60+40=100，第四次： 累加器的值为：100 第五项的值为50   100+50=150  知道数组的数据遍历完为止。

3.小案例

1.计算商品的价格

   var arr = [{
        name: '苹果',
        price: 5,
      },
      {
        name: '橘子',
        price: 3,
      },
      {
        name: '香蕉',
        price: 6,
      },
      {
        name: '菠萝',
        price: 10,
      }
    ]

实现的代码:

  var total = arr.reduce((sum, obj) => {
      sum = sum + obj.price
      return sum
    }, 0)
    console.log(total); //24

思路: 先判断数组中有没有初始值， 为0，赋值给累加器为0，obj代表是数组中的每一项，开始第一次的遍历sum（5）=sum(0)+obj.price(5)(数组中的第一项的price值)， 然后通过return把5返回给 累加器，结束第一次遍历，  开始第二次的遍历，sum（8）=5+3（数组中的第二项obj.price的值3），然后return给sum 完成第二次的累加，开始第三次遍历，sum（14）=8+6（数组中的第三项obj.price的值6），继续通过return返回给sum，开始第四次遍历sum（14）=14+10（数组中的第三项obj.price的值10）直到数组遍历完，返回的是一个数值。  console.log(total); //24

2.计算商品的总价

  var arr = [{
        name: '苹果',
        total: 5,
        price: 12
      },
      {
        name: '橘子',
        total: 5,
        price: 13
      },
      {
        name: '香蕉',
        total: 5,
        price: 10
      },
      {
        name: '菠萝',
        total: 5,
        price: 10
      },
    ]
    var cc = arr.reduce((sum, obj) => {
      sum = sum + obj.total * obj.price
      return sum
    }, 0)
    console.log(cc);

解析:与上面的区别是把数值中的两项进行相乘，然后进行累加，计算出来的结果是225。