這篇文章主要介紹了javascript函數式編程,實例分析了javascript函數式編程的相關使用技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了javascript函數式編程。分享給大家供大家參考。具體分析如下：

js像其他動態語言一樣是可以寫高階函數的，所謂高階函數是可以操作函數的函數。因為在js中函數是一個徹徹底底的對象，屬于第一類公民，這提供了函數式編程的先決條件。

下面給出一個例子代碼，出自一本js教程，功能是計算數組元素的平均值和標準差，先列出非函數式編程的一種寫法：

1. var data = [1,1,3,5,5]; 
2. var total = 0; 
3. for(var i = 0;i < data.length;i++) 
4. total += data[i]; 
5. var mean = tatal/data.length; //平均數為3 
6. //計算標準差 
7. total = 0; 
8. for(var i = 0;i < data.length;i++){ 
9. var deviation = data[i] - mean; 
10. tatal += deviation * deviation; 
11. } 
12. var stddev = Math,.sqrt(total/(data.length-1));//標準差為2 

為了使用函數式編程，我們預先定義一些幫助函數(helper functions):

1. //將類數組對象轉換為真正的數組 
2. function array(a,n){ 
3. return Array.prototype.slice.call(a,n||0); 
4. } 
5. //將函數實參傳遞至左側 
6. function partial_left(f){ 
7. var args = arguments; 
8. return function(){ 
9. var a = array(args,1); 
10. a = a.concat(array(arguments)); 
11. return f.apply(this,a); 
12. }; 
13. } 
14. //將函數的實參傳遞至右側 
15. function partial_right(f){ 
16. var args = arguments; 
17. return function(){ 
18. var a = array(arguments); 
19. a = a.concat(array(args,1)); 
20. return f.apply(this,a); 
21. }; 
22. } 
23. //該函數實參被用做模版， 
24. //實參列表中的undefined值會被實際實參值填充。 
25. function partial(f){ 
26. var args = arguments; 
27. return function(){ 
28. var a = array(args,1); 
29. var i = 0,j = 0; 
30. for(;i<a.length;i++) 
31. if(a[i] === undefined) 
32. a[i] = arguments[j++]; 
33. a = a.concat(array(arguments,j)); 
34. return f.apply(this,a); 
35. }; 
36. } 
37. //返回一個函數類似于f(g()) 
38. function compose(f,g){ 
39. return function(){ 
40. return f.call(this,g.apply(this,arguments)); 
41. }; 
42. } 

下面我們給出完全用函數式編程的js代碼：

1. var data = [1,1,3,5,5]; 
2. var sum = function(x,y){return x+y;}; 
3. var product = function(x,y){return x*y;}; 
4. var neg = partial(product,-1); 
5. var square = partial(Math.pow,undefined,2); 
6. var sqrt = partial(Math.pow,undefined,0.5); 
7. var reciprocal = partial(Math.pow,undefined,-1); 
8. //好吧，高潮來鳥 :) 
9. var mean = product(reduce(data,sum),reciprocal(data.length)); 
10. var stddev = sqrt(product(reduce(map(data,compose(square,partial(sum,neg(mean)))),sum),reciprocal(sum(data.length,-1)))); 

除了reduce和map函數，其他函數前面都給出了。reduce函數類似與ruby中的inject函數：

1. ary = (1..10).to_a 
2. ary.inject(0) {|sum,i|sum + i} //結果為55 

js的寫法如下：

1. var ary = [1,2,3,4,5,6,7,8,9,10] 
2. ary.reduce(function(sum,i){ 
3. return sum + i; 
4. },0); 

0為sum的初始值，如果省略則sum為數組第一個元素的值，這里可以省略。

map函數也很簡單，類似與對數組的每一個元素做操作，然后返回一個經過操作后的數組，就以ruby代碼為例，js代碼與此類似：

1. a = (1..3).to_a; #數組[1,2,3] 
2. a.map {|x| x*2} #返回新數組[2,4,6] 

下面我們來分析下那一長串的代碼：)

sum和product定義了元素相加和相乘的函數;

neg也是一個函數功能等價于:product(-1,x),即對x值求負;

square函數等價于:Math.pow(x,2),即計算x的平方值，注意這里partial的第二個參數是undefined，這意味著這里的形參會被第一個實參填補;再說的明白點：square(x)功能等于Math.pow(x,2)。

sqrt函數和square類似，功能等價于:Math.pow(x,0.5)，相當于計算x的開二次方。

最后一個函數reciprocal也沒什么難度，等價于:Math.pow(x,-1)，即計算x的負一次方，相當于計算x的倒數。

下面就是如何把上面各種函數揉捏在一起鳥 ：)

先看平均值的計算，很簡單：就是先計算數組元素的和然后乘上數組長度的倒數，即數組和/數組長度。

最后來看貌似很難的標準差，我們最好由內向外看：

先看包含neg的那層：

1. //等價于函數sum(-1 * mean + x) 
2. partial(sum,neg(mean) 

下面看compose函數：

1. //下面在源代碼上做了等價替換，可以再次等價于： 
2. //square(sum(-1*mean + x)),再次展開(我剝,我剝,我剝洋蔥...): 
3. //Math.pow(sum(-1*mean + x),2); 
4. compose(square,sum(-1*mean + x)) 

接下來看map函數:

//很清楚吧!?即data中每一個元素都為一個x，將其傳入后面的函數，然后返回一個計算后的新數組，即新數組中的每個元素的值是data中的每個元素加上data負的平均數，然后對其結果計算2次方的結果。

1. map(data,Math.pow(sum(-1*mean + x),2)) 

再接著看map外面的reduce函數：

1. //將前面新數組的每個元素值加起來。 
2. reduce(map(...),sum) 

然后看一下reciprocal函數：

1. //等價于求(data.length-1)的倒數 
2. reciprocal(sum(data.length,-1)) 

再看外層的product函數:

1. //等價于新數組元素的和除以(data.length-1) 
2. product(reduce(...),reciprocal(...)) 

最外層的sqrt表示對以上除法得出的結果求平方根;大家可以對照一下前面非函數編程的代碼，是一樣一樣滴 :) 看似蠻怕人的一大坨代碼，展開分析后難度立馬將至零。如果各位看官最后表示還是未看明白，那完全是本貓語言表達能力的問題，歡迎提問。

解釋完畢，打完收功，大功告成。

希望本文所述對大家的javascript程序設計有所幫助。