js中的高階函數(shù)

其一，filter名為過濾，也就是說把不滿足條件的通通過濾掉，要注意它必須返回一個boolean值，表現(xiàn)形式為:要過濾的東西.filter(function(n){ return n>某莫某;})。

由此可見filter里面是一個回調(diào)函數(shù)，而回調(diào)函數(shù)里面的參數(shù)，則是我們過濾集合的每一個元素，而返回值呢，就是篩選條件。

說是過濾但并未改變原來的內(nèi)容，我們可以把過濾的內(nèi)容存到一個新的對象里面

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]+' ')
}

輸出結(jié)果為10 20 30 40

其二，map名為迭代器，可以作用與全部元素，對他們執(zhí)行相同的操作

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
});

輸出結(jié)果為：20 40 60 80

其三，reduce名為高級，包含四個參數(shù)

1、previousValue （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）2、currentValue （數(shù)組中當(dāng)前被處理的元素）

3、index （當(dāng)前元素在數(shù)組中的索引）

4、array （調(diào)用 reduce 的數(shù)組）

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

reduce每進(jìn)行一次都執(zhí)行preValue=return的值，初值值設(shè)為了0

其四，=>名為箭頭函數(shù)的應(yīng)用

所謂箭頭函數(shù)很好理解，表現(xiàn)為(參數(shù))=>返回值

所以上面那一大長串就可以簡化為：

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

聯(lián)合之前做的購物車案例，我們就可以改動一下，提升一下逼格

那么在獲取總價的時候就可以這么寫

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;
}