reduce方法的使用

一、reduce方法的使用

 利用reduce方法遍历数组的每一个元素，reduce()调用结果最后返回一个最终值（最后一次return值）。

```js

    var arr = [

       {name: 'Vuejs入门', price: 99, count: 3},

       {name: 'Vuejs底层', price: 89, count: 1},

       {name: 'Vuejs从入门到放弃', price: 19, count: 5},

    ]

    //数组名.reduce(回调函数，pre的初始值)

    arr.reduce(function(pre, current){

        // reduce这个方法被调用时，会遍历arr这个数组的每一个元素，每遍历一个元素，就执行一次这里的代码

        // current表示当前正在遍历的这个元素

        // pre 是上一次的这个函数return的值

        // ！！！因为第一次遍历没有上一个return值，所以，交给了第二个参数，设置pre的初始值

        console.log(pre, current)

        return 10

    },0)

    //！！！并且reduce方法最终会返回最后一次的return值

```

 

上面代码的输出结果：

```

0 {name: "Vuejs入门", price: 99, count: 3}

10 {name: "Vuejs底层", price: 89, count: 1}

10 {name: "Vuejs从入门到放弃", price: 19, count: 5}

```

 

理解了上面的案例之后，就可以提一个需求：计算上面购物车的总价（每一个 price*count 的和），

```js

    //reduce方法最终会返回最后一次的return值

    var a = arr.reduce(function(pre, current){

        console.log(pre, current)

        // var total = 当前这次的 price*count + 上一次的total

        var total = current.price*current.count + pre

        return total

    },0)

    alert(a)   //这个a就是上面购物车的总价

```

备注：上面这个reduce()方法和Vue本身没有关系，纯粹是一个js数组的方法。