javascript函数式编程实例分析

这篇文章主要介绍了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程序设计有所帮助。