javascript函數(shù)式編程實(shí)例分析
本文實(shí)例講述了javascript函數(shù)式編程。分享給大家供大家參考。具體分析如下：
js像其他動(dòng)態(tài)語言一樣是可以寫高階函數(shù)的，所謂高階函數(shù)是可以操作函數(shù)的函數(shù)。因?yàn)樵趈s中函數(shù)是一個(gè)徹徹底底的對象，屬于第一類公民，這提供了函數(shù)式編程的先決條件。
下面給出一個(gè)例子代碼，出自一本js教程，功能是計(jì)算數(shù)組元素的平均值和標(biāo)準(zhǔn)差，先列出非函數(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
//計(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):
//將類數(shù)組對象轉(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ù)類似于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} //結(jié)果為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ù)組第一個(gè)元素的值，這里可以省略。
map函數(shù)也很簡單，類似與對數(shù)組的每一個(gè)元素做操作，然后返回一個(gè)經(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也是一個(gè)函數(shù)功能等價(jià)于:product(-1,x),即對x值求負(fù)；
square函數(shù)等價(jià)于:Math.pow(x,2),即計(jì)算x的平方值，注意這里partial的第二個(gè)參數(shù)是undefined，這意味著這里的形參會(huì)被第一個(gè)實(shí)參填補(bǔ)；再說的明白點(diǎn)：square(x)功能等于Math.pow(x,2)。
sqrt函數(shù)和square類似，功能等價(jià)于:Math.pow(x,0.5)，相當(dāng)于計(jì)算x的開二次方。
最后一個(gè)函數(shù)reciprocal也沒什么難度，等價(jià)于:Math.pow(x,-1)，即計(jì)算x的負(fù)一次方，相當(dāng)于計(jì)算x的倒數(shù)。
下面就是如何把上面各種函數(shù)揉捏在一起鳥 ：）
先看平均值的計(jì)算，很簡單：就是先計(jì)算數(shù)組元素的和然后乘上數(shù)組長度的倒數(shù)，即數(shù)組和/數(shù)組長度。
最后來看貌似很難的標(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)),再次展開(我剝,我剝,我剝洋蔥...): //Math.pow(sum(-1*mean + x),2); compose(square,sum(-1*mean + x))
接下來看map函數(shù):
//很清楚吧?。考磀ata中每一個(gè)元素都為一個(gè)x，將其傳入后面的函數(shù)，然后返回一個(gè)計(jì)算后的新數(shù)組，即新數(shù)組中的每個(gè)元素的值是data中的每個(gè)元素加上data負(fù)的平均數(shù)，然后對其結(jié)果計(jì)算2次方的結(jié)果。
map(data,Math.pow(sum(-1*mean + x),2))
再接著看map外面的reduce函數(shù)：
//將前面新數(shù)組的每個(gè)元素值加起來。 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表示對以上除法得出的結(jié)果求平方根；大家可以對照一下前面非函數(shù)編程的代碼，是一樣一樣滴 :) 看似蠻怕人的一大坨代碼，展開分析后難度立馬將至零。如果各位看官最后表示還是未看明白，那完全是本貓語言表達(dá)能力的問題，歡迎提問。
解釋完畢，打完收功，大功告成。
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
用js有很久了，但都沒有深究過js的數(shù)組形式。偶爾用用也就是簡單的string.split(char)。對于字符的處理很多情況下需要用到數(shù)組2013-03-03
第一種就是利用ajax方式，第二種是，動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，設(shè)置其src屬性，通過把script標(biāo)簽插入到頁面head來加載js，感興趣的朋友可以了解下2013-08-08
TensorFlow.js 微信小程序插件開始支持模型緩存的方法
這篇文章主要介紹了TensorFlow.js 微信小程序插件開始支持模型緩存的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JavaScript-html標(biāo)題滾動(dòng)效果的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狫avaScript-html標(biāo)題滾動(dòng)效果的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
JS驗(yàn)證input輸入框（字母，數(shù)字，符號，中文）
本文主要介紹了JS驗(yàn)證input輸入框（字母，數(shù)字，符號，中文）的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了原生JS生成指定位數(shù)的驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
本文整理了一些常用的web打印及局部打印的方法以備不時(shí)之需，感興趣的朋友可以學(xué)習(xí)下2013-05-05
js獲取光標(biāo)位置和設(shè)置文本框光標(biāo)位置示例代碼
本實(shí)例描述了如何用Javascript來控制和獲取文本框/文本域的鼠標(biāo)光標(biāo)位置，以下代碼兼容IE和Chrome，F(xiàn)irefox，大家參考使用吧2014-01-01
JS實(shí)現(xiàn)頭像循環(huán)滾動(dòng)示例
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頭像循環(huán)滾動(dòng)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Three.js開發(fā)實(shí)現(xiàn)3D地圖的實(shí)踐過程總結(jié)
這篇文章主要給大家介紹了關(guān)于利用Three.js開發(fā)實(shí)現(xiàn)3D地圖的實(shí)踐過程，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11