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