首頁  >  文章  >  web前端  >  javascript之典型高階函數應用介紹_javascript技巧

javascript之典型高階函數應用介紹_javascript技巧

WBOY
WBOY原創
2016-05-16 17:43:581096瀏覽

緣由
雖然以前也使用過javascript語言,但終究是為了配合後端寫的一些零零散散的“代碼段”,更不能說是javascript項目了。很榮幸的是上個月剛到公司剛好碰上專案開始推倒重寫,我們team從頭開始做架構和實現,目的很清楚,為了改進和超越前面的版本。這是個真正意義上的javascript“專案”,當然服務端不是我們team來負責啦。這也是我真正開始全職使用javascript來程式設計。由於之前在學校對形式化方法這門課程比較感興趣,而javascript又是函數式語言,因此我想把更多functional的東西用javascript來表現一下。

幾個函數
這幾個方法都是javascript 1.6 陣列新增的方法。是很典型的functional 函數,當然也很實用。以下是functional的定義並非來自javascript。

filter:接受一個集合Xs(X表示類型,s表示集合),一個謂詞,這個謂詞是從X到bool的映射(函數)。然後過慮這個集合,並傳回謂詞為true的元素所組成的集合。以下是簡單的實作:

複製程式碼 程式碼如下:

function filter(arr,leback ){
var i,out=[];
for(i=0;iif(callback(arr[i]))
out.push (arr[i]);
}
return out;
}

再加一個簡單的檢定:
複製代碼 代碼如下:

var arr = [1,2,3,4,5,6,7,8,9,10];
var even = function(item){
if(typeof item !== "number") return false;
return !(item & 1);
};
var filtered = filter(arr,even);
console.log(filtered);

結果:
2,4,6,8,10
map:接受一個集合Xs,一個函數f,然後把Xs集合中每一個元素按照順序使用f映射,並返回集合f x1, f x2, f x3 ... f xn。實作如下:
複製程式碼 程式碼如下:

function map(arrcallback){ var i,l= arr && arr.length || 0,out = new Array(l);
for(i=0;iout[i]=callback(arr [i]);
return out;
}

測試一下:

複製代碼 程式碼如下:
var arr = [1,2,3,4,5,6,7,8,9,10];
var addTen = function(item) {
return item 10;
};
var mapAdded = map(arr,addTen);
console.log(mapAdded);

結果:
結果:
11,12,13,14,15,16,17,18,19,20
另外還有forEach,every和some三個函數在javascript 1.6中出現。但在使用過程中感覺還是缺少一個強而有力的函數,它就是折疊函數(fold)。正所謂map-reduce,有了map而沒有"reduce"豈不是很掃興?下面就來看看這個」reduce「。

Reduce的實作
上面說的reduce其實也就是折疊函數(fold)。它接受一個Xs集合,一個二元運算子f。然後將f插入到集合中的每兩個相鄰元素之間。舉個例子,fold plus [1,2,3,4] 意即 1 2 3 4。為了更精確,通常需要一個」起始元素「作為f最開始時的第二個參數。例如fold plus [1,2,3,4] 意即(1 (2 (3 (4 0))))。以下是實作:
複製程式碼 程式碼如下:

function fold(arr,callback,b){
var i,x;
if(b) x=b,i= 0;
else x=arr[0],i=1;
for(;ix=callback(arr[i],x);
return x;
}

測試:
複製程式碼


程式碼🎜>
var arr = [1,2,3,4,5,6,7,8,9,10];
var plus = function(a,b){
return a b;
};
var foldPlus = fold(arr,plus,0);
console.log(foldPlus);
結果:
55

這個函數在ECMAScript 5中名字就叫reduce,而函數式裡面通常稱做fold而已,這是很形象的名字。
總結
其實上面在實作這些functional函數的時候寫風格並不是函數式的,因為javascript 語言有具有循環語句。如果沒有循環語句呢?留給下一次探索吧。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn