javascript函數(shù)式編程實例分析
本文實例講述了javascript函數(shù)式編程。分享給大家供大家參考。具體分析如下：
js像其他動態(tài)語言一樣是可以寫高階函數(shù)的，所謂高階函數(shù)是可以操作函數(shù)的函數(shù)。因為在js中函數(shù)是一個徹徹底底的對象，屬于第一類公民，這提供了函數(shù)式編程的先決條件。
下面給出一個例子代碼，出自一本js教程，功能是計算數(shù)組元素的平均值和標準差，先列出非函數(shù)式編程的一種寫法：
var data = [1,1,3,5,5];
var total = 0;
for(var i = 0;i < data.length;i++)
total += data[i];
var mean = tatal/data.length; //平均數(shù)為3
//計算標準差
total = 0;
for(var i = 0;i < data.length;i++){
var deviation = data[i] - mean;
tatal += deviation * deviation;
}
var stddev = Math,.sqrt(total/(data.length-1));//標準差為2
為了使用函數(shù)式編程，我們預先定義一些幫助函數(shù)(helper functions):
//將類數(shù)組對象轉換為真正的數(shù)組
function array(a,n){
return Array.prototype.slice.call(a,n||0);
}
//將函數(shù)實參傳遞至左側
function partial_left(f){
var args = arguments;
return function(){
var a = array(args,1);
a = a.concat(array(arguments));
return f.apply(this,a);
};
}
//將函數(shù)的實參傳遞至右側
function partial_right(f){
var args = arguments;
return function(){
var a = array(arguments);
a = a.concat(array(args,1));
return f.apply(this,a);
};
}
//該函數(shù)實參被用做模版，
//實參列表中的undefined值會被實際實參值填充。
function partial(f){
var args = arguments;
return function(){
var a = array(args,1);
var i = 0,j = 0;
for(;i<a.length;i++)
if(a[i] === undefined)
a[i] = arguments[j++];
a = a.concat(array(arguments,j));
return f.apply(this,a);
};
}
//返回一個函數(shù)類似于f(g())
function compose(f,g){
return function(){
return f.call(this,g.apply(this,arguments));
};
}
下面我們給出完全用函數(shù)式編程的js代碼：
var data = [1,1,3,5,5];
var sum = function(x,y){return x+y;};
var product = function(x,y){return x*y;};
var neg = partial(product,-1);
var square = partial(Math.pow,undefined,2);
var sqrt = partial(Math.pow,undefined,0.5);
var reciprocal = partial(Math.pow,undefined,-1);
//好吧，高潮來鳥 :)
var mean = product(reduce(data,sum),reciprocal(data.length));
var stddev = sqrt(product(reduce(map(data,compose(square,partial(sum,neg(mean)))),sum),reciprocal(sum(data.length,-1))));
除了reduce和map函數(shù)，其他函數(shù)前面都給出了。reduce函數(shù)類似與ruby中的inject函數(shù)：
ary = (1..10).to_a
ary.inject(0) {|sum,i|sum + i} //結果為55
js的寫法如下：
var ary = [1,2,3,4,5,6,7,8,9,10]
ary.reduce(function(sum,i){
return sum + i;
},0);
0為sum的初始值，如果省略則sum為數(shù)組第一個元素的值，這里可以省略。
map函數(shù)也很簡單，類似與對數(shù)組的每一個元素做操作，然后返回一個經(jīng)過操作后的數(shù)組，就以ruby代碼為例，js代碼與此類似：
a = (1..3).to_a; #數(shù)組[1,2,3]
a.map {|x| x*2} #返回新數(shù)組[2,4,6]
下面我們來分析下那一長串的代碼：）
sum和product定義了元素相加和相乘的函數(shù)；
neg也是一個函數(shù)功能等價于:product(-1,x),即對x值求負；
square函數(shù)等價于:Math.pow(x,2),即計算x的平方值，注意這里partial的第二個參數(shù)是undefined，這意味著這里的形參會被第一個實參填補；再說的明白點：square(x)功能等于Math.pow(x,2)。
sqrt函數(shù)和square類似，功能等價于:Math.pow(x,0.5)，相當于計算x的開二次方。
最后一個函數(shù)reciprocal也沒什么難度，等價于:Math.pow(x,-1)，即計算x的負一次方，相當于計算x的倒數(shù)。
下面就是如何把上面各種函數(shù)揉捏在一起鳥 ：）
先看平均值的計算，很簡單：就是先計算數(shù)組元素的和然后乘上數(shù)組長度的倒數(shù)，即數(shù)組和/數(shù)組長度。
最后來看貌似很難的標準差，我們最好由內向外看：
先看包含neg的那層：
//等價于函數(shù)sum(-1 * mean + x) partial(sum,neg(mean)
下面看compose函數(shù)：
//下面在源代碼上做了等價替換，可以再次等價于： //square(sum(-1*mean + x)),再次展開(我剝,我剝,我剝洋蔥...): //Math.pow(sum(-1*mean + x),2); compose(square,sum(-1*mean + x))
接下來看map函數(shù):
//很清楚吧??？即data中每一個元素都為一個x，將其傳入后面的函數(shù)，然后返回一個計算后的新數(shù)組，即新數(shù)組中的每個元素的值是data中的每個元素加上data負的平均數(shù)，然后對其結果計算2次方的結果。
map(data,Math.pow(sum(-1*mean + x),2))
再接著看map外面的reduce函數(shù)：
//將前面新數(shù)組的每個元素值加起來。 reduce(map(...),sum)
然后看一下reciprocal函數(shù)：
//等價于求(data.length-1)的倒數(shù) reciprocal(sum(data.length,-1))
再看外層的product函數(shù):
//等價于新數(shù)組元素的和除以(data.length-1) product(reduce(...),reciprocal(...))
最外層的sqrt表示對以上除法得出的結果求平方根；大家可以對照一下前面非函數(shù)編程的代碼，是一樣一樣滴 :) 看似蠻怕人的一大坨代碼，展開分析后難度立馬將至零。如果各位看官最后表示還是未看明白，那完全是本貓語言表達能力的問題，歡迎提問。
解釋完畢，打完收功，大功告成。
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
這篇文章主要介紹了JS?限時限次數(shù)點擊按鈕,實現(xiàn)方法很簡單需要用一個變量作為計數(shù),點擊一次，計數(shù)加一點擊函數(shù)內判斷計數(shù)變量設置定時恢復，對實例代碼感興趣的朋友一起看看吧2022-03-03
這篇文章主要為大家詳細介紹了小程序實現(xiàn)手寫板簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
微信小程序實現(xiàn)點擊按鈕修改view標簽背景顏色功能示例【附demo源碼下載】
這篇文章主要介紹了微信小程序實現(xiàn)點擊按鈕修改view標簽背景顏色功能,涉及微信小程序事件響應及數(shù)值運算實現(xiàn)動態(tài)設置view背景色樣式的相關操作技巧,需要的朋友可以參考下2017-12-12
js實現(xiàn)iframe動態(tài)調整高度的代碼
iframe,尤其是不帶邊框的iframe因為能和網(wǎng)頁無縫的結合從而不刷新頁面的情況下更新頁面的部分數(shù)據(jù)成為可能，可是iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設置高度的時候多了也不好，少了更是不行，現(xiàn)在，讓我來告訴大家一種iframe動態(tài)調整高度的方法，主要是以下JS函數(shù)：2008-01-01
JavaScript控制各種瀏覽器全屏模式的方法、屬性和事件介紹
瀏覽器全屏模式的啟動函數(shù)requestFullscreen仍然需要附帶各瀏覽器的js方言前綴，相信下面這段代碼需要你花大量的搜索才能湊齊：2014-04-04
本文是對js中字母大小寫轉換的實現(xiàn)方法進行了總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
Iceraven瀏覽器需要安裝Tampermonkey插件來安裝GF油猴腳本，本文給大家介紹手機安裝GreasyFork油猴js腳本的教程，安裝過程給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-12-12
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)換膚，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單滾動窗口，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Javascript實現(xiàn)的鼠標經(jīng)過時播放聲音
今天突然想起做一個當鼠標經(jīng)過<a/>時，會發(fā)出聲音2010-05-05