JavaScript函数式编程

简介

函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用。随着.NET平台上的Haskell的出现,函数式编程变得更加流行。一些传统的编程语言,例如C++和JavaScript,引入了由函数式编程提供的一些构造和特性。在许多情况下,JavaScript的重复代码导致了一些拙劣的编码。如果使用函数式编程,就可以避免这些问题。此外,可以利用函数式编程风格编写更加优美的回调。

函数式编程

函数式编程只描述在程序输入上执行的操作,不必使用临时变量保存中间结果。重点是捕捉“是什么以及为什么”,而不是“如何做”。与将重点放在执行连续命令上的过程性编程相比,函数式编程的重点是函数的定义而不是状态机(statemachine)的实现。

大型知识管理系统应用程序从使用函数式编程风格上受益颇多,因为函数式编程简化了开发。

因为函数式编程采用了完全不同的组织程序的方式,所以那些习惯于采用命令式范例的程序员可能会发现函数式编程有点难学。在这篇文章中,您将了解一些关于如何采用函数式风格,用JavaScript编写良好的、优美的代码的示例。我将讨论:

函数式编程概念,包括匿名函数、调用函数的不同方法,以及将函数作为参数传递给其他函数的方式。

函数式概念的运用,采用的示例包括:扩展数组排序;动态HTML生成的优美代码;系列函数的应用。

函数式编程概念

在那些通过描述“如何做”指定解决问题的方法的语言中,许多开发人员都知道如何进行编码。例如,要编写一个计算阶乘的函数,我可以编写一个循环来描述程序,或者使用递归来查找所有数字的乘积。在这两种情况下,计算的过程都在程序中进行了详细说明。清单1显示了一个计算阶乘的可能使用的C代码。

清单1.过程风格的阶乘

intfactorial(intn)

{

if(n<=0)

return1;

else

returnn*factorial(n-1);

}

这类语言也叫做过程性编程语言,因为它们定义了解决问题的过程。函数式编程与这个原理有显著不同。在函数式编程中,需要描述问题“是什么”。函数式编程语言又叫做声明性语言。同样的计算阶乘的程序可以写成所有到n的数字的乘积。计算阶乘的典型函数式程序看起来如清单2中的示例所示。

清单2.函数式风格的阶乘

factorialn,wheren<=0:=1

factorialn:=foldr*1taken[1..]

第二个语句指明要得到从1开始的前n个数字的列表(taken[1..]),然后找出它们的乘积,1为基元。这个定义与前面的示例不同,没有循环或递归。它就像阶乘函数的算术定义。一旦了解了库函数(take和foldr)和标记(listnotation[])的意义,编写代码就很容易,而且可读性也很好。

只用三行Miranda代码就可以编写例程,根据参数,使用广度优先或深度优先遍历处理n叉树的每个节点,而且元素可以是任何通用类型。

从历史上看,函数式编程语言不太流行有各种原因。但是最近,有些函数式编程语言正在进入计算机行业。其中一个例子就是.NET平台上的Haskell。其他情况下,现有的一些语言借用了函数式编程语言中的一些概念。一些C++实现中的迭代器和continuation,以及JavaScript中提供的一些函数式构造(functionalconstruct),就是这种借用的示例。但是,通过借用函数式构造,总的语言编程范例并没有发生变化。JavaScript并没因为函数式构造的添加就变成了函数式编程语言。

我现在要讨论JavaScript中的函数式构造的各种美妙之处,以及在日常编码和工作中使用它们的方式。我们将从一些基本功能开始,然后用它们查看一些更有趣的应用。

匿名函数

在JavaScript中,可以编写匿名函数或没有名称的函数。为什么需要这样的函数?请继续往下读,但首先我们将学习如何编写这样一个函数。如果拥有以下JavaScript函数:

清单3.典型的函数

functionsum(x,y,z){

return(x+y+z);

}

然后对应的匿名函数看起来应当如下所示:

清单4.匿名函数

function(x,y,z){

return(x+y+z);

}

要使用它,则需要编写以下代码:

清单5.应用匿名函数

varsum=function(x,y,z){

return(x+y+z);

}(1,2,3);

alert(sum);

使用函数作为值

也可以将函数作为值使用。还可以拥有一些所赋值是函数的变量。在最后一个示例中,还可以执行以下操作:

清单6.使用函数赋值

varsum=function(x,y,z){

return(x+y+z);

}

alert(sum(1,2,3));

在上面清单6的示例中,为变量sum赋的值是函数定义本身。这样,sum就成了一个函数,可以在任何地方调用。

调用函数的不同方法

JavaScript允许用两种方式调用函数,如清单7和8所示。

清单7.典型的函数应用

alert(“Hello,World!");

清单8.用函数作为表达式

(alert)(“Hello,World!");

所以也可以编写以下代码:

清单9.定义函数之后就可以立即使用它

(function(x,y,z){return(x+y+z)})(1,2,3);

可以在括号中编写函数表达式,然后传递给参数,对参数进行运算。虽然在清单8的示例中,有直接包含在括号中的函数名称,但是按清单9中所示方式使用它时,就不是这样了。

将函数作为参数传递给其他函数

也可以将函数作为参数传递给其他函数。虽然这不是什么新概念,但是在后续的示例中大量的使用了这个概念。可以传递函数参数,如清单10所示。

清单10.将函数作为参数传递,并应用该函数

varpassFunAndApply=function(fn,x,y,z){returnfn(x,y,z);};

varsum=function(x,y,z){

returnx+y+z;

};

alert(passFunAndApply(sum,3,4,5));//12

执行最后一个alert语句输出了一个大小为12的值。

使用函数式概念

前一节介绍了一些使用函数式风格的编程概念。所给的示例并没有包含所有的概念,它们在重要性方面也没有先后顺序,只是一些与这个讨论有关的概念而已。下面对JavaScript中的函数式风格作一快速总结:

函数并不总是需要名称。

函数可以像其他值一样分配给变量。

函数表达式可以编写并放在括号中,留待以后应用。

函数可以作为参数传递给其他函数。

这一节将介绍一些有效使用这些概念编写优美的JavaScript代码的示例。(使用JavaScript函数式风格,可以做许多超出这个讨论范围的事。)

扩展数组排序

先来编写一个排序方法,可以根据数组元素的日期对数据进行排序。用JavaScript编写这个方法非常简单。数据对象的排序方法接受一个可选参数,这个可选参数就是比较函数。在这里,需要使用清单11中的比较函数。

清单11.比较函数

function(x,y){

returnx.date–y.date;

}

要得到需要的函数,请使用清单12的示例。

清单12.排序函数的扩展

arr.sort(function(x,y){returnx.date–y.date;});

其中arr是类型数组对象。排序函数会根据arr数组中对象的日期对所有对象进行排序。比较函数和它的定义一起被传递给排序函数,以完成排序操作。使用这个函数:

每个JavaScript对象都有一个date属性。

JavaScript的数组类型的排序函数接受可选参数,可选参数是用来排序的比较函数。这与C库中的qsort函数类似。

动态生成HTML的优美代码

在这个示例中,将看到如何编写优美的代码,从数组动态地生成HTML。可以根据从数据中得到的值生成表格。或者,也可以用数组的内容生成排序和未排序的列表。也可以生成垂直或水平的菜单项目。

清单13中的代码风格通常被用来从数组生成动态HTML。

清单13.生成动态HTML的普通代码

varstr='';

for(vari=0;i<arr.length;i++){

varelement=arr[i];

str+=...HTMLgenerationcode...

}

document.write(str);

可以用清单14的代码替换这个代码。

清单14.生成动态HTML的通用方式

Array.prototype.fold=function(templateFn){

varlen=this.length;

varstr='';

for(vari=0;i<len;i++)

str+=templateFn(this[i]);

returnstr;

}

functiontemplateInstance(element){

return...HTMLgenerationcode...

}

document.write(arr.fold(templateInstance));

我使用Array类型的prototype属性定义新函数fold。现在可以在后面定义的任何数组中使用该函数。

系列函数的应用

考虑以下这种情况:想用一组函数作为回调函数。为实现这一目的,将使用window.setTimeout函数,该函数有两个参数。第一个参数是在第二个参数表示的毫秒数之后被调用的函数。清单15显示了完成此操作的一种方法。

清单15.在回调中调用一组函数

window.setTimeout(function(){alert(‘First!’);alert(‘Second!’);},5000);

清单16显示了完成此操作的更好的方式。

清单16.调用系列函数的更好的方式

Function.prototype.sequence=function(g){

varf=this;

returnfunction(){

f();g();

}

};

functionalertFrst(){alert(‘First!’);}

functionalertSec(){alert(‘Second!’);}

setTimeout(alertFrst.sequence(alertSec),5000);

在处理事件时,如果想在调用完一个回调之后再调用一个回调,也可以使用清单16中的代码扩展。这可能是一个需要您自行完成的一个练习,现在您的兴趣被点燃了吧。

相关推荐