首頁 > web前端 > js教程 > javascript函數式程式設計實例分析_javascript技巧

javascript函數式程式設計實例分析_javascript技巧

WBOY
發布: 2016-05-16 16:02:17
原創
1279 人瀏覽過

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

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

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

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; //平均数为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
登入後複製

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

//将类数组对象转换为真正的数组
function array(a,n){
 return Array.prototype.slice.call(a,n||0);
}
//将函数实参传递至左侧
function partial_left(f){
 var args = arguments;
 return function(){
  var a = array(args,1);
  a = a.concat(array(arguments));
  return f.apply(this,a);
 };
}
//将函数的实参传递至右侧
function partial_right(f){
 var args = arguments;
 return function(){
  var a = array(arguments);
  a = a.concat(array(args,1));
  return f.apply(this,a);
 };
}
//该函数实参被用做模版,
//实参列表中的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);
 };
}
//返回一个函数类似于f(g())
function compose(f,g){
 return function(){
  return f.call(this,g.apply(this,arguments));
 };
}
登入後複製

下面我們給出完全用函數式程式設計的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函數,其他函數前面都給了。 reduce函數類似與ruby中的inject函數:

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為陣列第一個元素的值,這裡可以省略。

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

a = (1..3).to_a; #数组[1,2,3]
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的那一層:

//等价于函数sum(-1 * mean + x)
partial(sum,neg(mean)
登入後複製

下面看compose函數:

//下面在源代码上做了等价替换,可以再次等价于:
//square(sum(-1*mean + x)),再次展开(我剥,我剥,我剥洋葱...):
//Math.pow(sum(-1*mean + x),2);
compose(square,sum(-1*mean + x))
登入後複製

接下來看map函數:

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

map(data,Math.pow(sum(-1*mean + x),2))
登入後複製

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

//将前面新数组的每个元素值加起来。
reduce(map(...),sum)
登入後複製

然後看一下reciprocal函數:

//等价于求(data.length-1)的倒数
reciprocal(sum(data.length,-1))
登入後複製

再看外層的product函數:

//等价于新数组元素的和除以(data.length-1)
product(reduce(...),reciprocal(...))
登入後複製

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板