JavaScript函數(shù)式編程

一、引言

說到函數(shù)式編程，大家可能第一印象都是學(xué)院派的那些晦澀難懂的代碼，充滿了一大堆抽象的不知所云的符號，似乎只有大學(xué)里的計算機(jī)教授才會使用這些東西。在曾經(jīng)的某個時代可能確實如此，但是近年來隨著技術(shù)的發(fā)展，函數(shù)式編程已經(jīng)在實際生產(chǎn)中發(fā)揮巨大的作用了，越來越多的語言開始加入閉包，匿名函數(shù)等非常典型的函數(shù)式編程的特性，從某種程度上來講，函數(shù)式編程正在逐步“同化”命令式編程。

JavaScript 作為一種典型的多范式編程語言，這兩年隨著React的火熱，函數(shù)式編程的概念也開始流行起來，RxJS、cycleJS、lodashJS、underscoreJS等多種開源庫都使用了函數(shù)式的特性。所以下面介紹一些函數(shù)式編程的知識和概念。

二、純函數(shù)

如果你還記得一些初中的數(shù)學(xué)知識的話，函數(shù) f 的概念就是，對于輸入 x 產(chǎn)生一個輸出 y = f(x)。這便是一種最簡單的純函數(shù)。純函數(shù)的定義是，對于相同的輸入，永遠(yuǎn)會得到相同的輸出，而且沒有任何可觀察的副作用，也不依賴外部環(huán)境的狀態(tài)。

下面來舉個栗子，比如在Javascript中對于數(shù)組的操作，有些是純的，有些就不是純的：

var arr = [1,2,3,4,5]; 
 
// Array.slice是純函數(shù)，因為它沒有副作用，對于固定的輸入，輸出總是固定的 
// 可以，這很函數(shù)式 
xs.slice(0,3); 
//=> [1,2,3] 
xs.slice(0,3); 
//=> [1,2,3] 
 
// Array.splice是不純的，它有副作用，對于固定的輸入，輸出不是固定的 
// 這不函數(shù)式 
xs.splice(0,3); 
//=> [1,2,3] 
xs.splice(0,3); 
//=> [4,5] 
xs.splice(0,3); 
//=> [] 
 

在函數(shù)式編程中，我們想要的是 slice 這樣的純函數(shù)，而不是 splice這種每次調(diào)用后都會把數(shù)據(jù)弄得一團(tuán)亂的函數(shù)。

為什么函數(shù)式編程會排斥不純的函數(shù)呢?下面再看一個例子：

//不純的 
var min = 18; 
var checkage = age => age > min; 
 
//純的，這很函數(shù)式 
var checkage = age => age > 18; 

在不純的版本中，checkage 這個函數(shù)的行為不僅取決于輸入的參數(shù) age，還取決于一個外部的變量 min，換句話說，這個函數(shù)的行為需要由外部的系統(tǒng)環(huán)境決定。對于大型系統(tǒng)來說，這種對于外部狀態(tài)的依賴是造成系統(tǒng)復(fù)雜性大大提高的主要原因。

可以注意到，純的 checkage 把關(guān)鍵數(shù)字 18 硬編碼在函數(shù)內(nèi)部，擴(kuò)展性比較差，我們可以在后面的柯里化中看到如何用優(yōu)雅的函數(shù)式解決這種問題。

純函數(shù)不僅可以有效降低系統(tǒng)的復(fù)雜度，還有很多很棒的特性，比如可緩存性：

import _ from 'lodash'; 
var sin = _.memorize(x => Math.sin(x)); 
 
//第一次計算的時候會稍慢一點 
var a = sin(1); 
 
//第二次有了緩存，速度極快 
var b = sin(1); 

三、函數(shù)的柯里化

函數(shù)柯里化(curry)的定義很簡單：傳遞給函數(shù)一部分參數(shù)來調(diào)用它，讓它返回一個函數(shù)去處理剩下的參數(shù)。

比如對于加法函數(shù) var add = (x, y) =>　x + y ，我們可以這樣進(jìn)行柯里化：

//比較容易讀懂的ES5寫法 
 
var add = function(x){ 
 
  return function(y){ 
 
    return x + y 
 
  } 
 
} 
 
//ES6寫法，也是比較正統(tǒng)的函數(shù)式寫法 
 
var add = x => (y => x + y); 
 
//試試看 
 
var add2 = add(2); 
 
var add200 = add(200); 
 
add2(2); // =>4 
 
add200(50); // =>250 

對于加法這種極其簡單的函數(shù)來說，柯里化并沒有什么大用處。

還記得上面那個 checkage 的函數(shù)嗎?我們可以這樣柯里化它：

var checkage = min => (age => age > min); 
 
var checkage18 = checkage(18); 
 
checkage18(20); 
 
// =>true 

事實上柯里化是一種“預(yù)加載”函數(shù)的方法，通過傳遞較少的參數(shù)，得到一個已經(jīng)記住了這些參數(shù)的新函數(shù)，某種意義上講，這是一種對參數(shù)的“緩存”，是一種非常高效的編寫函數(shù)的方法：

import { curry } from 'lodash'; 
 
//首先柯里化兩個純函數(shù) 
 
var match = curry((reg, str) => str.match(reg)); 
 
var filter = curry((f, arr) => arr.filter(f)); 
 
//判斷字符串里有沒有空格 
 
var haveSpace = match(/\s+/g); 
 
haveSpace("ffffffff"); 
 
//=>null 
 
haveSpace("a b"); 
 
//=>[" "] 
 
filter(haveSpace, ["abcdefg", "Hello World"]); 
 
//=>["Hello world"] 

四、函數(shù)組合

學(xué)會了使用純函數(shù)以及如何把它柯里化之后，我們會很容易寫出這樣的“包菜式”代碼：

h(g(f(x))); 

雖然這也是函數(shù)式的代碼，但它依然存在某種意義上的“不優(yōu)雅”。為了解決函數(shù)嵌套的問題，我們需要用到“函數(shù)組合”：

//兩個函數(shù)的組合 
 
var compose = function(f, g) { 
    return function(x) { 
 
    return f(g(x)); 
 
  }; 
 
}; 
 
//或者 
 
var compose = (f, g) => (x => f(g(x))); 
 
var add1 = x => x + 1; 
 
var mul5 = x => x * 5; 
 
compose(mul5, add1)(2); 
 
// =>15 

我們定義的compose就像雙面膠一樣，可以把任何兩個純函數(shù)結(jié)合到一起。當(dāng)然你也可以擴(kuò)展出組合三個函數(shù)的“三面膠”，甚至“四面膠”“N面膠”。

這種靈活的組合可以讓我們像拼積木一樣來組合函數(shù)式的代碼：

var first = arr => arr[0]; 
 
var reverse = arr => arr.reverse(); 
 
var last = compose(first, reverse); 
 
last([1,2,3,4,5]); 
 
// =>5 

五、Point Free

有了柯里化和函數(shù)組合的基礎(chǔ)知識，下面介紹一下Point Free這種代碼風(fēng)格。

細(xì)心的話你可能會注意到，之前的代碼中我們總是喜歡把一些對象自帶的方法轉(zhuǎn)化成純函數(shù)：

var map = (f, arr) => arr.map(f); 
 
var toUpperCase = word => word.toUpperCase(); 

這種做法是有原因的。

Point Free這種模式現(xiàn)在還暫且沒有中文的翻譯，有興趣的話可以看看這里的英文解釋：

https://en.wikipedia.org/wiki/Tacit_programming

用中文解釋的話大概就是，不要命名轉(zhuǎn)瞬即逝的中間變量，比如：

//這不Piont free 
 
var f = str => str.toUpperCase().split(' '); 

這個函數(shù)中，我們使用了 str 作為我們的中間變量，但這個中間變量除了讓代碼變得長了一點以外是毫無意義的。下面改造一下這段代碼：

var toUpperCase = word => word.toUpperCase(); 
 
var split = x => (str => str.split(x)); 
 
var f = compose(split(' '), toUpperCase); 
 
f("abcd efgh"); 
 
// =>["ABCD", "EFGH"] 

這種風(fēng)格能夠幫助我們減少不必要的命名，讓代碼保持簡潔和通用。當(dāng)然，為了在一些函數(shù)中寫出Point Free的風(fēng)格，在代碼的其它地方必然是不那么Point Free的，這個地方需要自己取舍。

六、聲明式與命令式代碼

命令式代碼的意思就是，我們通過編寫一條又一條指令去讓計算機(jī)執(zhí)行一些動作，這其中一般都會涉及到很多繁雜的細(xì)節(jié)。

而聲明式就要優(yōu)雅很多了，我們通過寫表達(dá)式的方式來聲明我們想干什么，而不是通過一步一步的指示。

//命令式 
 
var CEOs = []; 
 
for(var i = 0; i < companies.length; i++){ 
 
  CEOs.push(companies[i].CEO) 
 
} 
 
//聲明式 
 
var CEOs = companies.map(c => c.CEO); 

命令式的寫法要先實例化一個數(shù)組，然后再對 companies 數(shù)組進(jìn)行for循環(huán)遍歷，手動命名、判斷、增加計數(shù)器，就好像你開了一輛零件全部暴露在外的汽車一樣，雖然很機(jī)械朋克風(fēng)，但這并不是優(yōu)雅的程序員應(yīng)該做的。

聲明式的寫法是一個表達(dá)式，如何進(jìn)行計數(shù)器迭代，返回的數(shù)組如何收集，這些細(xì)節(jié)都隱藏了起來。它指明的是做什么，而不是怎么做。除了更加清晰和簡潔之外，map 函數(shù)還可以進(jìn)一步獨立優(yōu)化，甚至用解釋器內(nèi)置的速度極快的 map 函數(shù)，這么一來我們主要的業(yè)務(wù)代碼就無須改動了。

函數(shù)式編程的一個明顯的好處就是這種聲明式的代碼，對于無副作用的純函數(shù)，我們完全可以不考慮函數(shù)內(nèi)部是如何實現(xiàn)的，專注于編寫業(yè)務(wù)代碼。優(yōu)化代碼時，目光只需要集中在這些穩(wěn)定堅固的函數(shù)內(nèi)部即可。

相反，不純的不函數(shù)式的代碼會產(chǎn)生副作用或者依賴外部系統(tǒng)環(huán)境，使用它們的時候總是要考慮這些不干凈的副作用。在復(fù)雜的系統(tǒng)中，這對于程序員的心智來說是極大的負(fù)擔(dān)。

實際的編程中，特別是前端的編程范疇里，“不依賴外部環(huán)境”這個條件是根本不可能的，我們總是不可避免地接觸到 DOM、AJAX 這些狀態(tài)隨時都在變化的東西。所以我們需要用更強(qiáng)大的技術(shù)來干這些臟活。

一、容器、Functor

如果你熟悉 jQuery 的話，應(yīng)該還記得，$(...) 返回的對象并不是一個原生的 DOM 對象，而是對于原生對象的一種封裝：

var foo = $('#foo'); 
 
foo == document.getElementById('foo'); 
 
//=> false 
 
foo[0] == document.getElementById('foo'); 
 
//=> true 

這在某種意義上就是一個“容器”(但它并不函數(shù)式)。

接下類我們會看到，容器為函數(shù)式編程里普通的變量、對象、函數(shù)提供了一層極其強(qiáng)大的外衣，賦予了它們一些很驚艷的特性，就好像 Tony Stark 的鋼鐵外衣，Dva 的機(jī)甲，明日香的2號機(jī)一樣。

下面我們就來寫一個最簡單的容器吧：

var Container = function(x) { 
 
this.__value = x; 
 
} 
 
Container.of = x => new Container(x); 
 
//試試看 
 
Container.of(1); 
 
//=> Container(1) 
 
Container.of('abcd'); 
 
//=> Container('abcd') 

我們調(diào)用 Container.of 把東西裝進(jìn)容器里之后，由于這一層外殼的阻擋，普通的函數(shù)就對他們不再起作用了，所以我們需要加一個接口來讓外部的函數(shù)也能作用到容器里面的值：

Container.prototype.map = function(f){ 
 
return Container.of(f(this.__value)) 
 
} 

我們可以這樣使用它：

Container.of(3) 
 
.map(x => x + 1) //=> Container(4) 
 
.map(x => 'Result is ' + x); //=> Container('Result is 4') 

沒錯!我們僅花了 7 行代碼就實現(xiàn)了很炫的鏈?zhǔn)秸{(diào)用，這也是我們的第一個 Functor。

Functor(函子)是實現(xiàn)了 map 并遵守一些特定規(guī)則的容器類型。

也就是說，如果我們要將普通函數(shù)應(yīng)用到一個被容器包裹的值，那么我們首先需要定義一個叫 Functor 的數(shù)據(jù)類型，在這個數(shù)據(jù)類型中需要定義如何使用 map 來應(yīng)用這個普通函數(shù)。

把東西裝進(jìn)一個容器，只留出一個接口 map 給容器外的函數(shù)，這么做有什么好處呢?

本質(zhì)上，F(xiàn)unctor 是一個對于函數(shù)調(diào)用的抽象，我們賦予容器自己去調(diào)用函數(shù)的能力。當(dāng) map 一個函數(shù)時，我們讓容器自己來運行這個函數(shù)，這樣容器就可以自由地選擇何時何地如何操作這個函數(shù)，以致于擁有惰性求值、錯誤處理、異步調(diào)用等等非常牛掰的特性。

舉個例子，我們現(xiàn)在為 map 函數(shù)添加一個檢查空值的特性，這個新的容器我們稱之為 Maybe(原型來自于Haskell)：

var Maybe = function(x) { 
 
this.__value = x; 
 
} 
 
Maybe.of = function(x) { 
 
return new Maybe(x); 
 
} 
 
Maybe.prototype.map = function(f) { 
 
return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value)); 
 
} 
 
Maybe.prototype.isNothing = function() { 
 
return (this.__value === null || this.__value === undefined); 
 
} 
 
//試試看 
 
import _ from 'lodash'; 
 
var add = _.curry(_.add); 
 
Maybe.of({name: "Stark"}) 
 
.map(_.prop("age")) 
 
.map(add(10)); 
 
//=> Maybe(null) 
 
Maybe.of({name: "Stark", age: 21}) 
 
.map(_.prop("age")) 
 
.map(add(10)); 
 
//=> Maybe(31) 

看了這些代碼，覺得鏈?zhǔn)秸{(diào)用總是要輸入一堆 .map(...) 很煩對吧?這個問題很好解決，還記得我們上一篇文章里介紹的柯里化嗎?

有了柯里化這個強(qiáng)大的工具，我們可以這樣寫：

import _ from 'lodash'; 
 
var compose = _.flowRight; 
 
var add = _.curry(_.add); 
 
// 創(chuàng)造一個柯里化的 map 
 
var map = _.curry((f, functor) => functor.map(f)); 
 
var doEverything = map(compose(add(10), _.property("age"))); 
 
var functor = Maybe.of({name: "Stark", age: 21}); 
 
doEverything(functor); 
 
//=> Maybe(31) 

二、錯誤處理、Either

現(xiàn)在我們的容器能做的事情太少了，它甚至連做簡單的錯誤處理都做不到，現(xiàn)在我們只能類似這樣處理錯誤：

try{ 
 
doSomething(); 
 
}catch(e){ 
 
// 錯誤處理 
 
} 

try/catch/throw 并不是“純”的，因為它從外部接管了我們的函數(shù)，并且在這個函數(shù)出錯時拋棄了它的返回值。這不是我們期望的函數(shù)式的行為。

如果你對 Promise 熟悉的話應(yīng)該還記得，Promise 是可以調(diào)用 catch 來集中處理錯誤的：

doSomething() 
 
.then(async1) 
 
.then(async2) 
 
.catch(e => console.log(e)); 

對于函數(shù)式編程我們也可以做同樣的操作，如果運行正確，那么就返回正確的結(jié)果;如果錯誤，就返回一個用于描述錯誤的結(jié)果。這個概念在 Haskell 中稱之為 Either 類，Left 和 Right 是它的兩個子類。我們用 JS 來實現(xiàn)一下：

// 這里是一樣的=。= 
 
var Left = function(x) { 
 
this.__value = x; 
 
} 
 
var Right = function(x) { 
 
this.__value = x; 
 
} 
 
// 這里也是一樣的=。= 
 
Left.of = function(x) { 
 
return new Left(x); 
 
} 
 
Right.of = function(x) { 
 
return new Right(x); 
 
} 
 
// 這里不同!!! 
 
Left.prototype.map = function(f) { 
 
return this; 
 
} 
 
Right.prototype.map = function(f) { 
 
return Right.of(f(this.__value)); 
 
} 

下面來看看 Left 和 Right 的區(qū)別吧：

Right.of("Hello").map(str => str + " World!"); 
 
// Right("Hello World!") 
 
Left.of("Hello").map(str => str + " World!"); 
 
// Left("Hello") 

Left 和 Right 唯一的區(qū)別就在于 map 方法的實現(xiàn)，Right.map 的行為和我們之前提到的 map 函數(shù)一樣。但是 Left.map 就很不同了：它不會對容器做任何事情，只是很簡單地把這個容器拿進(jìn)來又扔出去。這個特性意味著，Left 可以用來傳遞一個錯誤消息。

var getAge = user => user.age ? Right.of(user.age) : Left.of("ERROR!"); 
 
//試試 
 
getAge({name: 'stark', age: '21'}).map(age => 'Age is ' + age); 
 
//=> Right('Age is 21') 
 
getAge({name: 'stark'}).map(age => 'Age is ' + age); 
 
//=> Left('ERROR!') 

是的，Left 可以讓調(diào)用鏈中任意一環(huán)的錯誤立刻返回到調(diào)用鏈的尾部，這給我們錯誤處理帶來了很大的方便，再也不用一層又一層的try/catch。

Left 和 Right 是 Either 類的兩個子類，事實上 Either 并不只是用來做錯誤處理的，它表示了邏輯或，范疇學(xué)里的coproduct。但這些超出了我們的討論范圍。

三、IO

下面我們的程序要走出象牙塔，去接觸外面“骯臟”的世界了，在這個世界里，很多事情都是有副作用的或者依賴于外部環(huán)境的，比如下面這樣：

function readLocalStorage(){ 
 
  return window.localStorage; 
 
} 

這個函數(shù)顯然不是純函數(shù)，因為它強(qiáng)依賴外部的 window.localStorage 這個對象，它的返回值會隨著環(huán)境的變化而變化。為了讓它“純”起來，我們可以把它包裹在一個函數(shù)內(nèi)部，延遲執(zhí)行它：

function readLocalStorage(){ 
 
  return function(){ 
 
    return window.localStorage; 
 
  } 
} 

這樣 readLocalStorage 就變成了一個真正的純函數(shù)! OvO為機(jī)智的程序員鼓掌!

額……好吧……好像確實沒什么卵用……我們只是(像大多數(shù)拖延癥晚期患者那樣)把討厭做的事情暫時擱置了而已。為了能徹底解決這些討厭的事情，我們需要一個叫 IO 的新的 Functor：

import _ from 'lodash'; 
 
var compose = _.flowRight; 
 
var IO = function(f) { 
 
this.__value = f; 
 
} 
 
IO.of = x => new IO(_ => x); 
 
IO.prototype.map = function(f) { 
 
return new IO(compose(f, this.__value)) 
 
}; 

IO 跟前面那幾個 functor 不同的地方在于，它的 __value 是一個函數(shù)。它把不純的操作(比如 IO、網(wǎng)絡(luò)請求、DOM)包裹到一個函數(shù)內(nèi)，從而延遲這個操作的執(zhí)行。所以我們認(rèn)為，IO 包含的是被包裹的操作的返回值。

var io_document = new IO(_ => window.document); 
 
io_document.map(function(doc){ return doc.title }); 
 
//=> IO(document.title) 

注意我們這里雖然感覺上返回了一個實際的值 IO(document.title)，但事實上只是一個對象：{ __value: [Function] }，它并沒有執(zhí)行，而是簡單地把我們想要的操作存了起來，只有當(dāng)我們在真的需要這個值得時候，IO 才會真的開始求值，這個特性我們稱之為 惰性求值。(培提爾其烏斯：“這是怠惰啊!”)

是的，我們依然需要某種方法讓 IO 開始求值，并且把它返回給我們。它可能因為 map 的調(diào)用鏈積累了很多很多不純的操作，一旦開始求值，就可能會把本來很干凈的程序給“弄臟”。但是去直接執(zhí)行這些“臟”操作不同，我們把這些不純的操作帶來的復(fù)雜性和不可維護(hù)性推到了 IO 的調(diào)用者身上(嗯就是這么不負(fù)責(zé)任)。

下面我們來做稍微復(fù)雜點的事情，編寫一個函數(shù)，從當(dāng)前 url 中解析出對應(yīng)的參數(shù)。

import _ from 'lodash'; 
 
// 先來幾個基礎(chǔ)函數(shù)： 
 
// 字符串 
 
var split = _.curry((char, str) => str.split(char)); 
 
// 數(shù)組 
 
var first = arr => arr[0]; 
 
var last = arr => arr[arr.length - 1]; 
 
var filter = _.curry((f, arr) => arr.filter(f)); 
 
//注意這里的 x 既可以是數(shù)組，也可以是 functor 
 
var map = _.curry((f, x) => x.map(f)); 
 
// 判斷 
 
var eq = _.curry((x, y) => x == y); 
 
// 結(jié)合 
 
var compose = _.flowRight; 
 
var toPairs = compose(map(split('=')), split('&')); 
 
// toPairs('a=1&b=2') 
 
//=> [['a', '1'], ['b', '2']] 
 
var params = compose(toPairs, last, split('?')); 
 
// params('http://xxx.com?a=1&b=2') 
 
//=> [['a', '1'], ['b', '2']] 
 
// 這里會有些難懂=。= 慢慢看 
 
// 1.首先我們先對 url 調(diào)用 params 函數(shù)，得到類似[['a', '1'], ['b', '2']] 
 
// 這樣的數(shù)組; 
 
// 2.然后調(diào)用 filter(compose(eq(key), first))，這是一個過濾器，過濾的 
 
// 條件是 compose(eq(key), first) 為真，它的意思就是只留下首項為 key 
 
// 的數(shù)組; 
 
// 3.最后調(diào)用 Maybe.of，把它包裝起來。 
 
// 4.這一系列的調(diào)用是針對 IO 的，所以我們用 map 把這些調(diào)用封裝起來。 
 
var getParam = key => map(compose(Maybe.of, filter(compose(eq(key), first)), params)); 
 
// 創(chuàng)建充滿了洪荒之力的 IO!!! 
 
var url = new IO(_ => window.location.href); 
 
// 最終的調(diào)用函數(shù)!!! 
 
var findParam = getParam(url); 
 
// 上面的代碼都是很干凈的純函數(shù)，下面我們來對它求值，求值的過程是非純的。 
 
// 假設(shè)現(xiàn)在的 url 是 http://xxx.com?a=1&b=2 
 
// 調(diào)用 __value() 來運行它! 
 
findParam("a").__value(); 
 
//=> Maybe(['a', '1']) 

四、總結(jié)

如果你還能堅持看到這里的話，不管看沒看懂，已經(jīng)是勇士了。在這篇文章里，我們先后提到了 Maybe、Either、IO 這三種強(qiáng)大的 functor，在鏈?zhǔn)秸{(diào)用、惰性求值、錯誤捕獲、輸入輸出中都發(fā)揮著巨大的作用。事實上 functor 遠(yuǎn)不止這三種，但由于篇幅的問題就不再繼續(xù)介紹了(哼才不告訴你其實是因為我還沒看懂其它 functor 的原理)

但依然有問題困擾著我們：

1. 如何處理嵌套的 functor 呢?(比如 Maybe(IO(42)))
2. 如何處理一個由非純的或者異步的操作序列呢?