JavaScript中的函數式編程實踐
函數式編程語言在學術領域已經存在相當長一段時間了，但是從歷史上看，它們沒有豐富的工具和庫可供使用。隨著.NET平臺上的Haskell和F#函數式編程語言的出現，其變得更加流行。一些傳統的編程語言，例如C++和JavaScript，也引入了由函數式編程提供的一些構造和特性。
51CTO推薦專題：JavaScript函數式編程
在許多情況下，JavaScript的重復代碼導致了一些拙劣的編碼。如果使用函數式編程，就可以避免這些問題。此外，可以利用函數式編程風格編寫更加優美的回調。因為函數式編程采用了完全不同的組織程序的方式，所以那些習慣于采用命令式范例的程序員可能會發現函數式編程有點難學。
函數式編程概念
在那些通過描述“如何做”指定解決問題的方法的語言中，許多開發人員都知道如何進行編碼。例如，要編寫一個計算階乘的函數，我可以編寫一個循環來描述程序，或者使用遞歸來查找所有數字的乘積。在這兩種情況下，計算的過程都在程序中進行了詳細說明。清單1顯示了一個計算階乘的可能使用的C代碼。
- 清單 1. 過程風格的階乘
- int factorial (int n)
- {
- if (n <= 0)
- return 1;
- else
- return n * factorial (n-1);
- }
這類語言也叫做過程性編程語言，因為它們定義了解決問題的過程。函數式編程與這個原理有顯著不同。在函數式編程中，需要描述問題“是什么”。 函數式編程語言又叫做聲明性語言。同樣的計算階乘的程序可以寫成所有到n的數字的乘積。計算階乘的典型函數式程序看起來如清單2中的示例所示。
- 清單 2. 函數式風格的階乘
- factorial n, where n <= 0 := 1
- factorial n := foldr * 1 take n [1..]
第二個語句指明要得到從1開始的前n個數字的列表（take n [1..]），然后找出它們的乘積，1 為基元。這個定義與前面的示例不同，沒有循環或遞歸。它就像階乘函數的算術定義。一旦了解了庫函數（take 和 foldr）和標記（list notation [ ]）的意義，編寫代碼就很容易，而且可讀性也很好。只用三行Miranda代碼就可以編寫例程，根據參數，使用廣度優先或深度優先遍歷處理n叉樹的每個節點，而且元素可以是任何通用類型。
從歷史上看，函數式編程語言不太流行有各種原因。但是最近，有些函數式編程語言正在進入計算機行業。其中一個例子就是.NET平臺上的Haskell。其他情況下，現有的一些語言借用了函數式編程語言中的一些概念。
一些C++實現中的迭代器和continuation，以及JavaScript中提供的一些函數式構造（functional construct），就是這種借用的示例。但是，通過借用函數式構造，總的語言編程范例并沒有發生變化。JavaScript并沒因為函數式構造的添加就變成了函數式編程語言。
這里我們主要討論了JavaScript中的函數式構造的各種美妙之處，以及在日常編碼和工作中使用它們的方式。我們將從一些基本功能開始，然后用它們查看一些更有趣的應用。
#p#
匿名函數
在JavaScript中，可以編寫匿名函數或沒有名稱的函數。為什么需要這樣的函數？請繼續往下讀，但首先我們將學習如何編寫這樣一個函數。如果擁有以下JavaScript 函數：
- 清單 3. 典型的函數
- function sum(x,y,z) {
- return (x+y+z);
- }
然后對應的匿名函數看起來應當如下所示：
- 清單 4. 匿名函數
- function(x,y,z) {
- return (x+y+z);
- }
要使用它，則需要編寫以下代碼：
- 清單 5. 應用匿名函數
- var sum = function(x,y,z) {
- return (x+y+z);
- }(1,2,3);
- alert(sum);
使用函數作為值
也可以將函數作為值使用。還可以擁有一些所賦值是函數的變量。在***一個示例中，還可以執行以下操作：
- 清單 6. 使用函數賦值
- var sum = 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中所示方式使用它時，就不是這樣了。
#p#
將函數作為參數傳遞給其他函數
也可以將函數作為參數傳遞給其他函數。雖然這不是什么新概念，但是在后續的示例中大量的使用了這個概念。可以傳遞函數參數，如清單10所示。
- 清單 10. 將函數作為參數傳遞，并應用該函數
- var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); };
- var sum = function(x,y,z) {
- return x+y+z;
- };
- alert( passFunAndApply(sum,3,4,5) ); // 12
執行***一個alert語句輸出了一個大小為12的值。
使用函數式概念
前一節介紹了一些使用函數式風格的編程概念。所給的示例并沒有包含所有的概念，它們在重要性方面也沒有先后順序，只是一些與這個討論有關的概念而已。下面對JavaScript中的函數式風格作一快速總結：
◆函數并不總是需要名稱；
◆函數可以像其他值一樣分配給變量；
◆函數表達式可以編寫并放在括號中，留待以后應用；
◆函數可以作為參數傳遞給其他函數。
這一節將介紹一些有效使用這些概念編寫優美的JavaScript代碼的示例。
擴展數組排序
先來編寫一個排序方法，可以根據數組元素的日期對數據進行排序。用JavaScript編寫這個方法非常簡單。數據對象的排序方法接受一個可選參數，這個可選參數就是比較函數。在這里，需要使用清單11中的比較函數。
- 清單 11. 比較函數
- function (x,y) {
- return x.date – y.date;
- }
要得到需要的函數，請使用清單12的示例。
- 清單 12. 排序函數的擴展
- arr.sort( function (x,y) { return x.date – y.date; } );
其中 arr 是類型數組對象。排序函數會根據arr數組中對象的日期對所有對象進行排序。比較函數和它的定義一起被傳遞給排序函數，以完成排序操作。使用這個函數：
◆每個JavaScript對象都有一個date屬性。
◆JavaScript的數組類型的排序函數接受可選參數，可選參數是用來排序的比較函數。這與C庫中的qsort函數類似。
動態生成HTML的優美代碼
在這個示例中，將看到如何編寫優美的代碼，從數組動態地生成HTML。可以根據從數據中得到的值生成表格。或者，也可以用數組的內容生成排序和未排序的列表。也可以生成垂直或水平的菜單項目。清單13中的代碼風格通常被用來從數組生成動態HTML。
- 清單 13. 生成動態 HTML 的普通代碼
- var str=' ';
- for (var i=0;i<arr.length;i++) {
- var element=arr[i];
- str+=... HTML generation code...
- }
- document.write(str);
可以用清單14的代碼替換這個代碼。
- 清單 14. 生成動態 HTML 的通用方式
- Array.prototype.fold=function(templateFn) {
- var len=this.length;
- var str=' ';
- for (var i=0 ; i<len ; i++)
- str+=templateFn(this[i]);
- return str;
- }
- function templateInstance(element) {
- return ... HTML generation code ...
- }
- document.write(arr.fold(templateInstance));
這里使用的是Array類型的prototype屬性定義新函數fold。現在可以在后面定義的任何數組中使用該函數。
#p#
系列函數的應用
考慮以下這種情況：想用一組函數作為回調函數。為實現這一目的，將使用window.setTimeout函數，該函數有兩個參數。***個參數是在第二個參數表示的毫秒數之后被調用的函數。清單15顯示了完成此操作的一種方法。
- 清單 15. 在回調中調用一組函數
- window.setTimeout(function(){alert(‘First!’);alert(‘Second!’);}, 5000);
清單16顯示了完成此操作的更好的方式。
- 清單 16. 調用系列函數的更好的方式
- Function.prototype.sequence=function(g) {
- var f=this;
- return function() {
- f();g();
- }
- };
- function alertFrst() { alert(‘First!’); }
- function alertSec() { alert(‘Second!’); }
- setTimeout( alertFrst.sequence(alertSec), 5000);
在處理事件時，如果想在調用完一個回調之后再調用一個回調，也可以使用清單16中的代碼擴展。這可能是一個需要您自行完成的一個練習，現在您的興趣被點燃了吧。
結束語
在許多領域中都可以應用JavaScript中的函數式編程，以優美的方式完成日常活動。這篇文章中的示例只介紹了幾種情況。如果您找到了函數式編程的合適場景，并應用這些概念，那么您就會有更多的理解，并且可以增加您的優美程度。
【編輯推薦】
