reduce的介绍
一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce的方法就是其中之一。
reduce方法将会对数组元素从左到右依次执行reducer函数,然后返回一个累计的值。举个形象的例子:你要组装一台电脑,买了主板、CPU、显卡、内存、硬盘、电源...这些零件是组装电脑的必要条件。
装的过程可以简单概括为拆掉每个零件的包装,再装到一起。类比一下reduce函数就可以明白了,那些零件就相当于要执行reduce方法的数组,对每个零件执行拆除包装的加工程序,就是对数组的每个元素执行reducer函数,把这些零件装到一起,就相当于reduce方法的任务,最终组装好的电脑相当于reduce方法的返回值。
reduce方法接收两个参数,第一个参数是回调函数reducer,第二个参数是初始值。reducer函数接收四个参数:
- total:MDN上解释为累计器,但我觉得不恰当,按我的理解它应该是截至当前元素,之前所有的数组元素被 reducer函数处理累计的结果
- CurrentValue:当前被执行的数组元素
- CurrentIndex: 当前被执行的数组元素索引
- SourceArray:原数组,也就是调用reduce方法的数组
经典应用场景:数组求和
<template>
<div>
<p>请选择你要购买的书籍</p>
<ul>
<li v-for="(item, idx) in arr" :key="idx">
<span>{{ item.name }}</span>
<button @click="add(idx)">买书</button>
</li>
</ul>
<table border="1" width="500" cellspacing="0">
<tr>
<th>序号</th>
<th>书名</th>
<th>单价</th>
<th>数量</th>
<th>合计</th>
</tr>
<tr v-for="(item, idx) in arr" :key="idx">
<td>{{ idx + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.count }}</td>
<td>{{ item.price * item.count }}</td>
</tr>
</table>
<p>总价格为:{{ summation }}</p>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "水浒传",
price: 107,
count: 0,
},
{
name: "西游记",
price: 192,
count: 0,
},
{
name: "三国演义",
price: 219,
count: 0,
},
{
name: "红楼梦",
price: 178,
count: 0,
},
],
};
},
methods: {
add(idx) {
console.log(this.arr[idx].count++);
},
// 计算属性 求总和
},
computed: {
summation() {
return this.arr.reduce((sum, obj) => {
return (sum += obj.price * obj.count);
}, 0);
},
},
};
</script>