Vue从零开始总结18

js中的高阶函数

其一，filter名为过滤，也就是说把不满足条件的通通过滤掉，要注意它必须返回一个boolean值，表现形式为:要过滤的东西.filter(function(n){ return n>某莫某;})。

由此可见filter里面是一个回调函数，而回调函数里面的参数，则是我们过滤集合的每一个元素，而返回值呢，就是筛选条件。

说是过滤但并未改变原来的内容，我们可以把过滤的内容存到一个新的对象里面

const nums=[10,20,30,40,50,60,70,80,90,100];
let newnums=nums.filter(function (n){
 return n<50;
});
for (const i in newnums) {
 document.write(newnums[i]+' ')
}

输出结果为10 20 30 40

其二，map名为迭代器，可以作用与全部元素，对他们执行相同的操作

const nums=[10,20,30,40,50,60,70,80,90,100];
let newnums=nums.filter(function (n){
 return n<50;
}).map(function (n){
 return n*2
});

输出结果为：20 40 60 80

其三，reduce名为高级，包含四个参数

1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）2、currentValue （数组中当前被处理的元素）

3、index （当前元素在数组中的索引）

4、array （调用 reduce 的数组）

let total=nums.filter(function (n){
return n<50;
}).map(function (n){
return n*2;
}).reduce(function (preValue,cur){
return preValue+cur;
},0);

reduce每进行一次都执行preValue=return的值，初值值设为了0

其四，=>名为箭头函数的应用

所谓箭头函数很好理解，表现为(参数)=>返回值

所以上面那一大长串就可以简化为：

let total2=nums.filter(n=>n<50).map(n=>n*2).reduce((pre,cur)=>pre+cur);

联合之前做的购物车案例，我们就可以改动一下，提升一下逼格

那么在获取总价的时候就可以这么写

priceTotal(){
 let total=this.books.reduce((pre,cur)=>(pre+cur.price*cur.count),0);
 return total;
}

或者

priceTotal(){
 let total=this.books.reduce(function (pre,cur){ return pre+cur.price*cur.count},0);
 return total;
}