探索函數(shù)式編程，通過(guò)它讓你的程序更具有可讀性和易于調(diào)試

當(dāng) Brendan Eich 在 1995 年創(chuàng)造 JavaScript 時(shí)，他原本打算將 Scheme 移植到瀏覽器里 。Scheme 作為 Lisp 的方言，是一種函數(shù)式編程語(yǔ)言。而當(dāng) Eich 被告知新的語(yǔ)言應(yīng)該是一種可以與 Java 相比的腳本語(yǔ)言后，他最終確立了一種擁有 C 風(fēng)格語(yǔ)法的語(yǔ)言(也和 Java 一樣)，但將函數(shù)視作一等公民。而 Java 直到版本 8 才從技術(shù)上將函數(shù)視為一等公民，雖然你可以用匿名類來(lái)模擬它。這個(gè)特性允許 JavaScript 通過(guò)函數(shù)式范式編程。

JavaScript 是一個(gè)多范式語(yǔ)言，允許你自由地混合和使用面向?qū)ο笫?、過(guò)程式和函數(shù)式的編程范式。最近，函數(shù)式編程越來(lái)越火熱。在諸如 Angular 和 React 這樣的框架中，通過(guò)使用不可變數(shù)據(jù)結(jié)構(gòu)可以切實(shí)提高性能。不可變是函數(shù)式編程的核心原則，它以及純函數(shù)使得編寫和調(diào)試程序變得更加容易。使用函數(shù)來(lái)代替程序的循環(huán)可以提高程序的可讀性并使它更加優(yōu)雅。總之，函數(shù)式編程擁有很多優(yōu)點(diǎn)。

什么不是函數(shù)式編程

在討論什么是函數(shù)式編程前，讓我們先排除那些不屬于函數(shù)式編程的東西。實(shí)際上它們是你需要丟棄的語(yǔ)言組件(再見(jiàn)，老朋友)：

• 循環(huán)：
  • while
  • do...while
  • for
  • for...of
  • for...in
• 用 var 或者 let 來(lái)聲明變量
• 沒(méi)有返回值的函數(shù)
• 改變對(duì)象的屬性 (比如: o.x = 5;)
• 改變數(shù)組本身的方法：
  • copyWithin
  • fill
  • pop
  • push
  • reverse
  • shift
  • sort
  • splice
  • unshift
• 改變映射本身的方法：
  • clear
  • delete
  • set
• 改變集合本身的方法：
  • add
  • clear
  • delete

脫離這些特性應(yīng)該如何編寫程序呢?這是我們將在后面探索的問(wèn)題。

純函數(shù)

你的程序中包含函數(shù)不一定意味著你正在進(jìn)行函數(shù)式編程。函數(shù)式范式將純函數(shù)pure function和非純函數(shù)impure function區(qū)分開(kāi)。鼓勵(lì)你編寫純函數(shù)。純函數(shù)必須滿足下面的兩個(gè)屬性：

• 引用透明：函數(shù)在傳入相同的參數(shù)后永遠(yuǎn)返回相同的返回值。這意味著該函數(shù)不依賴于任何可變狀態(tài)。
• 無(wú)副作用：函數(shù)不能導(dǎo)致任何副作用。副作用可能包括 I/O(比如向終端或者日志文件寫入)，改變一個(gè)不可變的對(duì)象，對(duì)變量重新賦值等等。

我們來(lái)看一些例子。首先，multiply 就是一個(gè)純函數(shù)的例子，它在傳入相同的參數(shù)后永遠(yuǎn)返回相同的返回值，并且不會(huì)導(dǎo)致副作用。

function multiply(a, b) { return a * b;} 

下面是非純函數(shù)的例子。canRide 函數(shù)依賴捕獲的 heightRequirement 變量。被捕獲的變量不一定導(dǎo)致一個(gè)函數(shù)是非純函數(shù)，除非它是一個(gè)可變的變量(或者可以被重新賦值)。這種情況下使用 let 來(lái)聲明這個(gè)變量，意味著可以對(duì)它重新賦值。multiply 函數(shù)是非純函數(shù)，因?yàn)樗鼤?huì)導(dǎo)致在 console 上輸出。

let heightRequirement = 46; 
// Impure because it relies on a mutable (reassignable) variable. 
function canRide(height) { 
  return height >= heightRequirement; 
} 
// Impure because it causes a side-effect by logging to the console. 
function multiply(a, b) { 
  console.log('Arguments: ', a, b); 
  return a * b; 
} 

下面的列表包含著 JavaScript 內(nèi)置的非純函數(shù)。你可以指出它們不滿足兩個(gè)屬性中的哪個(gè)嗎?

• console.log
• element.addEventListener
• Math.random
• Date.now
• $.ajax (這里 $ 代表你使用的 Ajax 庫(kù))

理想的程序中所有的函數(shù)都是純函數(shù)，但是從上面的函數(shù)列表可以看出，任何有意義的程序都將包含非純函數(shù)。大多時(shí)候我們需要進(jìn)行 AJAX 調(diào)用，檢查當(dāng)前日期或者獲取一個(gè)隨機(jī)數(shù)。一個(gè)好的經(jīng)驗(yàn)法則是遵循 80/20 規(guī)則：函數(shù)中有 80% 應(yīng)該是純函數(shù)，剩下的 20% 的必要性將不可避免地是非純函數(shù)。

使用純函數(shù)有幾個(gè)優(yōu)點(diǎn)：

• 它們很容易導(dǎo)出和調(diào)試，因?yàn)樗鼈儾灰蕾囉诳勺兊臓顟B(tài)。
• 返回值可以被緩存或者“記憶”來(lái)避免以后重復(fù)計(jì)算。
• 它們很容易測(cè)試，因?yàn)闆](méi)有需要模擬(mock)的依賴(比如日志，AJAX，數(shù)據(jù)庫(kù)等等)。

你編寫或者使用的函數(shù)返回空(換句話說(shuō)它沒(méi)有返回值)，那代表它是非純函數(shù)。

不變性

讓我們回到捕獲變量的概念上。來(lái)看看 canRide 函數(shù)。我們認(rèn)為它是一個(gè)非純函數(shù)，因?yàn)?heightRequirement 變量可以被重新賦值。下面是一個(gè)構(gòu)造出來(lái)的例子來(lái)說(shuō)明如何用不可預(yù)測(cè)的值來(lái)對(duì)它重新賦值。

let heightRequirement = 46; 
function canRide(height) { 
  return height >= heightRequirement; 
} 
// Every half second, set heightRequirement to a random number between 0 and 200. 
setInterval(() => heightRequirement = Math.floor(Math.random() * 201), 500); 
const mySonsHeight = 47; 
// Every half second, check if my son can ride. 
// Sometimes it will be true and sometimes it will be false. 
setInterval(() => console.log(canRide(mySonsHeight)), 500); 

我要再次強(qiáng)調(diào)被捕獲的變量不一定會(huì)使函數(shù)成為非純函數(shù)。我們可以通過(guò)只是簡(jiǎn)單地改變 heightRequirement 的聲明方式來(lái)使 canRide 函數(shù)成為純函數(shù)。

const heightRequirement = 46; 
function canRide(height) { 
  return height >= heightRequirement; 
} 

通過(guò)用 const 來(lái)聲明變量意味著它不能被再次賦值。如果嘗試對(duì)它重新賦值，運(yùn)行時(shí)引擎將拋出錯(cuò)誤;那么，如果用對(duì)象來(lái)代替數(shù)字來(lái)存儲(chǔ)所有的“常量”怎么樣?

const constants = { 
  heightRequirement: 46, 
  // ... other constants go here 
}; 
function canRide(height) { 
  return height >= constants.heightRequirement; 
} 

我們用了 const ，所以這個(gè)變量不能被重新賦值，但是還有一個(gè)問(wèn)題：這個(gè)對(duì)象可以被改變。下面的代碼展示了，為了真正使其不可變，你不僅需要防止它被重新賦值，你也需要不可變的數(shù)據(jù)結(jié)構(gòu)。JavaScript 語(yǔ)言提供了 Object.freeze 方法來(lái)阻止對(duì)象被改變。

'use strict'; 
// CASE 1: 對(duì)象的屬性是可變的，并且變量可以被再次賦值。 
let o1 = { foo: 'bar' }; 
// 改變對(duì)象的屬性 
o1.foo = 'something different'; 
// 對(duì)變量再次賦值 
o1 = { message: "I'm a completely new object" }; 
// CASE 2: 對(duì)象的屬性還是可變的，但是變量不能被再次賦值。 
const o2 = { foo: 'baz' }; 
// 仍然能改變對(duì)象 
o2.foo = 'Something different, yet again'; 
// 不能對(duì)變量再次賦值 
// o2 = { message: 'I will cause an error if you uncomment me' }; // Error! 
// CASE 3: 對(duì)象的屬性是不可變的，但是變量可以被再次賦值。 
let o3 = Object.freeze({ foo: "Can't mutate me" }); 
// 不能改變對(duì)象的屬性 
// o3.foo = 'Come on, uncomment me. I dare ya!'; // Error! 
// 還是可以對(duì)變量再次賦值 
o3 = { message: "I'm some other object, and I'm even mutable -- so take that!" }; 
// CASE 4: 對(duì)象的屬性是不可變的，并且變量不能被再次賦值。這是我們想要的?。。。。。。?！ 
const o4 = Object.freeze({ foo: 'never going to change me' }); 
// 不能改變對(duì)象的屬性 
// o4.foo = 'talk to the hand' // Error! 
// 不能對(duì)變量再次賦值 
// o4 = { message: "ain't gonna happen, sorry" }; // Error 

不變性適用于所有的數(shù)據(jù)結(jié)構(gòu)，包括數(shù)組、映射和集合。它意味著不能調(diào)用例如 Array.prototype.push 等會(huì)導(dǎo)致本身改變的方法，因?yàn)樗鼤?huì)改變已經(jīng)存在的數(shù)組。可以通過(guò)創(chuàng)建一個(gè)含有原來(lái)元素和新加元素的新數(shù)組，而不是將新元素加入一個(gè)已經(jīng)存在的數(shù)組。其實(shí)所有會(huì)導(dǎo)致數(shù)組本身被修改的方法都可以通過(guò)一個(gè)返回修改好的新數(shù)組的函數(shù)代替。

'use strict'; 
const a = Object.freeze([4, 5, 6]); 
// Instead of: a.push(7, 8, 9); 
const b = a.concat(7, 8, 9); 
// Instead of: a.pop(); 
const c = a.slice(0, -1); 
// Instead of: a.unshift(1, 2, 3); 
const d = [1, 2, 3].concat(a); 
// Instead of: a.shift(); 
const e = a.slice(1); 
// Instead of: a.sort(myCompareFunction); 
const f = R.sort(myCompareFunction, a); // R = Ramda 
// Instead of: a.reverse(); 
const g = R.reverse(a); // R = Ramda 
// 留給讀者的練習(xí): 
// copyWithin 
// fill 
// splice 

映射 和 集合 也很相似。可以通過(guò)返回一個(gè)新的修改好的映射或者集合來(lái)代替使用會(huì)修改其本身的函數(shù)。

const map = new Map([ 
  [1, 'one'], 
  [2, 'two'], 
  [3, 'three'] 
]); 
// Instead of: map.set(4, 'four'); 
const map2 = new Map([...map, [4, 'four']]); 
// Instead of: map.delete(1); 
const map3 = new Map([...map].filter(([key]) => key !== 1)); 
// Instead of: map.clear(); 
const map4 = new Map(); 

const set = new Set(['A', 'B', 'C']); 
// Instead of: set.add('D'); 
const set2 = new Set([...set, 'D']); 
// Instead of: set.delete('B'); 
const set3 = new Set([...set].filter(key => key !== 'B')); 
// Instead of: set.clear(); 
const set4 = new Set(); 

我想提一句如果你在使用 TypeScript(我非常喜歡 TypeScript)，你可以用 Readonly<T>、ReadonlyArray<T>、ReadonlyMap<K, V> 和 ReadonlySet<T> 接口來(lái)在編譯期檢查你是否嘗試更改這些對(duì)象，有則拋出編譯錯(cuò)誤。如果在對(duì)一個(gè)對(duì)象字面量或者數(shù)組調(diào)用 Object.freeze，編譯器會(huì)自動(dòng)推斷它是只讀的。由于映射和集合在其內(nèi)部表達(dá)，所以在這些數(shù)據(jù)結(jié)構(gòu)上調(diào)用 Object.freeze 不起作用。但是你可以輕松地告訴編譯器它們是只讀的變量。

TypeScript 只讀接口

好，所以我們可以通過(guò)創(chuàng)建新的對(duì)象來(lái)代替修改原來(lái)的對(duì)象，但是這樣不會(huì)導(dǎo)致性能損失嗎?當(dāng)然會(huì)。確保在你自己的應(yīng)用中做了性能測(cè)試。如果你需要提高性能，可以考慮使用 Immutable.js。Immutable.js 用持久的數(shù)據(jù)結(jié)構(gòu) 實(shí)現(xiàn)了鏈表、堆棧、映射、集合和其他數(shù)據(jù)結(jié)構(gòu)。使用了如同 Clojure 和 Scala 這樣的函數(shù)式語(yǔ)言中相同的技術(shù)。

// Use in place of `[]`. 
const list1 = Immutable.List(['A', 'B', 'C']); 
const list2 = list1.push('D', 'E'); 
console.log([...list1]); // ['A', 'B', 'C'] 
console.log([...list2]); // ['A', 'B', 'C', 'D', 'E'] 
// Use in place of `new Map()` 
const map1 = Immutable.Map([ 
  ['one', 1], 
  ['two', 2], 
  ['three', 3] 
]); 
const map2 = map1.set('four', 4); 
console.log([...map1]); // [['one', 1], ['two', 2], ['three', 3]] 
console.log([...map2]); // [['one', 1], ['two', 2], ['three', 3], ['four', 4]] 
// Use in place of `new Set()` 
const set1 = Immutable.Set([1, 2, 3, 3, 3, 3, 3, 4]); 
const set2 = set1.add(5); 
console.log([...set1]); // [1, 2, 3, 4] 
console.log([...set2]); // [1, 2, 3, 4, 5] 

函數(shù)組合

記不記得在中學(xué)時(shí)我們學(xué)過(guò)一些像 (f ° g)(x) 的東西?你那時(shí)可能想，“我什么時(shí)候會(huì)用到這些?”，好了，現(xiàn)在就用到了。你準(zhǔn)備好了嗎?f ° g讀作 “函數(shù) f 和函數(shù) g 組合”。對(duì)它的理解有兩種等價(jià)的方式，如等式所示： (f ° g)(x) = f(g(x))。你可以認(rèn)為 f ° g 是一個(gè)單獨(dú)的函數(shù)，或者視作將調(diào)用函數(shù) g 的結(jié)果作為參數(shù)傳給函數(shù) f。注意這些函數(shù)是從右向左依次調(diào)用的，先執(zhí)行 g，接下來(lái)執(zhí)行 f。

關(guān)于函數(shù)組合的幾個(gè)要點(diǎn):

1. 我們可以組合任意數(shù)量的函數(shù)(不僅限于 2 個(gè))。
2. 組合函數(shù)的一個(gè)方式是簡(jiǎn)單地把一個(gè)函數(shù)的輸出作為下一個(gè)函數(shù)的輸入(比如 f(g(x)))。

// h(x) = x + 1 
// number -> number 
function h(x) { 
  return x + 1; 
} 
// g(x) = x^2 
// number -> number 
function g(x) { 
  return x * x; 
} 
// f(x) = convert x to string 
// number -> string 
function f(x) { 
  return x.toString(); 
} 
// y = (f ° g ° h)(1) 
const y = f(g(h(1))); 
console.log(y); // '4' 

Ramda 和 lodash 之類的庫(kù)提供了更優(yōu)雅的方式來(lái)組合函數(shù)。我們可以在更多的在數(shù)學(xué)意義上處理函數(shù)組合，而不是簡(jiǎn)單地將一個(gè)函數(shù)的返回值傳遞給下一個(gè)函數(shù)。我們可以創(chuàng)建一個(gè)由這些函數(shù)組成的單一復(fù)合函數(shù)(就是 (f ° g)(x))。

// h(x) = x + 1 
// number -> number 
function h(x) { 
  return x + 1; 
} 
// g(x) = x^2 
// number -> number 
function g(x) { 
  return x * x; 
} 
// f(x) = convert x to string 
// number -> string 
function f(x) { 
  return x.toString(); 
} 
// R = Ramda 
// composite = (f ° g ° h) 
const composite = R.compose(f, g, h); 
// Execute single function to get the result. 
const y = composite(1); 
console.log(y); // '4' 

好了，我們可以在 JavaScript 中組合函數(shù)了。接下來(lái)呢?好，如果你已經(jīng)入門了函數(shù)式編程，理想中你的程序?qū)⒅挥泻瘮?shù)的組合。代碼里沒(méi)有循環(huán)(for, for...of, for...in, while, do)，基本沒(méi)有。你可能覺(jué)得那是不可能的。并不是這樣。我們下面的兩個(gè)話題是：遞歸和高階函數(shù)。

遞歸

假設(shè)你想實(shí)現(xiàn)一個(gè)計(jì)算數(shù)字的階乘的函數(shù)。 讓我們回顧一下數(shù)學(xué)中階乘的定義：

n! = n * (n-1) * (n-2) * ... * 1.

n! 是從 n 到 1 的所有整數(shù)的乘積。我們可以編寫一個(gè)循環(huán)輕松地計(jì)算出結(jié)果。

function iterativeFactorial(n) { 
  let product = 1; 
  for (let i = 1; i <= n; i++) { 
    product *= i; 
  } 
  return product; 
} 

注意 product 和 i 都在循環(huán)中被反復(fù)重新賦值。這是解決這個(gè)問(wèn)題的標(biāo)準(zhǔn)過(guò)程式方法。如何用函數(shù)式的方法解決這個(gè)問(wèn)題呢?我們需要消除循環(huán)，確保沒(méi)有變量被重新賦值。遞歸是函數(shù)式程序員的最有力的工具之一。遞歸需要我們將整體問(wèn)題分解為類似整體問(wèn)題的子問(wèn)題。

計(jì)算階乘是一個(gè)很好的例子，為了計(jì)算 n! 我們需要將 n 乘以所有比它小的正整數(shù)。它的意思就相當(dāng)于：

n! = n * (n-1)!

啊哈!我們發(fā)現(xiàn)了一個(gè)解決 (n-1)! 的子問(wèn)題，它類似于整個(gè)問(wèn)題 n!。還有一個(gè)需要注意的地方就是基礎(chǔ)條件?；A(chǔ)條件告訴我們何時(shí)停止遞歸。 如果我們沒(méi)有基礎(chǔ)條件，那么遞歸將永遠(yuǎn)持續(xù)。 實(shí)際上，如果有太多的遞歸調(diào)用，程序會(huì)拋出一個(gè)堆棧溢出錯(cuò)誤。啊哈!

function recursiveFactorial(n) { 
  // Base case -- stop the recursion 
  if (n === 0) { 
    return 1; // 0! is defined to be 1. 
  } 
  return n * recursiveFactorial(n - 1); 
} 

然后我們來(lái)計(jì)算 recursiveFactorial(20000) 因?yàn)?hellip;…，為什么不呢?當(dāng)我們這樣做的時(shí)候，我們得到了這個(gè)結(jié)果： 

堆棧溢出錯(cuò)誤

這里發(fā)生了什么?我們得到一個(gè)堆棧溢出錯(cuò)誤!這不是無(wú)窮的遞歸導(dǎo)致的。我們已經(jīng)處理了基礎(chǔ)條件(n === 0 的情況)。那是因?yàn)闉g覽器的堆棧大小是有限的，而我們的代碼使用了越過(guò)了這個(gè)大小的堆棧。每次對(duì) recursiveFactorial 的調(diào)用導(dǎo)致了新的幀被壓入堆棧中，就像一個(gè)盒子壓在另一個(gè)盒子上。每當(dāng) recursiveFactorial 被調(diào)用，一個(gè)新的盒子被放在最上面。下圖展示了在計(jì)算 recursiveFactorial(3) 時(shí)堆棧的樣子。注意在真實(shí)的堆棧中，堆棧頂部的幀將存儲(chǔ)在執(zhí)行完成后應(yīng)該返回的內(nèi)存地址，但是我選擇用變量 r 來(lái)表示返回值，因?yàn)?JavaScript 開(kāi)發(fā)者一般不需要考慮內(nèi)存地址。 

遞歸計(jì)算 3! 的堆棧(三次乘法)

你可能會(huì)想象當(dāng)計(jì)算 n = 20000 時(shí)堆棧會(huì)更高。我們可以做些什么優(yōu)化它嗎?當(dāng)然可以。作為 ES2015 (又名 ES6) 標(biāo)準(zhǔn)的一部分，有一個(gè)優(yōu)化用來(lái)解決這個(gè)問(wèn)題。它被稱作尾調(diào)用優(yōu)化proper tail calls optimization(PTC)。當(dāng)遞歸函數(shù)做的***一件事是調(diào)用自己并返回結(jié)果的時(shí)候，它使得瀏覽器刪除或者忽略堆棧幀。實(shí)際上，這個(gè)優(yōu)化對(duì)于相互遞歸函數(shù)也是有效的，但是為了簡(jiǎn)單起見(jiàn)，我們還是來(lái)看單一遞歸函數(shù)。

你可能會(huì)注意到，在遞歸函數(shù)調(diào)用之后，還要進(jìn)行一次額外的計(jì)算(n * r)。那意味著瀏覽器不能通過(guò) PTC 來(lái)優(yōu)化遞歸;然而，我們可以通過(guò)重寫函數(shù)使***一步變成遞歸調(diào)用以便優(yōu)化。一個(gè)竅門是將中間結(jié)果(在這里是 product)作為參數(shù)傳遞給函數(shù)。

'use strict'; 
// Optimized for tail call optimization. 
function factorial(n, product = 1) { 
  if (n === 0) { 
    return product; 
  } 
  return factorial(n - 1, product * n) 
} 

讓我們來(lái)看看優(yōu)化后的計(jì)算 factorial(3) 時(shí)的堆棧。如下圖所示，堆棧不會(huì)增長(zhǎng)到超過(guò)兩層。原因是我們把必要的信息都傳到了遞歸函數(shù)中(比如 product)。所以，在 product 被更新后，瀏覽器可以丟棄掉堆棧中原先的幀。你可以在圖中看到每次最上面的幀下沉變成了底部的幀，原先底部的幀被丟棄，因?yàn)椴辉傩枰恕?nbsp;

遞歸計(jì)算 3! 的堆棧(三次乘法)使用 PTC

現(xiàn)在選一個(gè)瀏覽器運(yùn)行吧，假設(shè)你在使用 Safari，你會(huì)得到 Infinity(它是比在 JavaScript 中能表達(dá)的***值更大的數(shù))。但是我們沒(méi)有得到堆棧溢出錯(cuò)誤，那很不錯(cuò)!現(xiàn)在在其他的瀏覽器中呢怎么樣呢?Safari 可能現(xiàn)在乃至將來(lái)是實(shí)現(xiàn) PTC 的唯一一個(gè)瀏覽器?？纯聪旅娴募嫒菪员砀瘢?/p>

PTC 兼容性

其他瀏覽器提出了一種被稱作語(yǔ)法級(jí)尾調(diào)用syntactic tail calls(STC)的競(jìng)爭(zhēng)標(biāo)準(zhǔn)。“語(yǔ)法級(jí)”意味著你需要用新的語(yǔ)法來(lái)標(biāo)識(shí)你想要執(zhí)行尾遞歸優(yōu)化的函數(shù)。即使瀏覽器還沒(méi)有廣泛支持，但是把你的遞歸函數(shù)寫成支持尾遞歸優(yōu)化的樣子還是一個(gè)好主意。

高階函數(shù)

我們已經(jīng)知道 JavaScript 將函數(shù)視作一等公民，可以把函數(shù)像其他值一樣傳遞。所以，把一個(gè)函數(shù)傳給另一個(gè)函數(shù)也很常見(jiàn)。我們也可以讓函數(shù)返回一個(gè)函數(shù)。就是它!我們有高階函數(shù)。你可能已經(jīng)很熟悉幾個(gè)在 Array.prototype 中的高階函數(shù)。比如 filter、map 和 reduce 就在其中。對(duì)高階函數(shù)的一種理解是：它是接受(一般會(huì)調(diào)用)一個(gè)回調(diào)函數(shù)參數(shù)的函數(shù)。讓我們來(lái)看看一些內(nèi)置的高階函數(shù)的例子：

const vehicles = [ 
  { make: 'Honda', model: 'CR-V', type: 'suv', price: 24045 }, 
  { make: 'Honda', model: 'Accord', type: 'sedan', price: 22455 }, 
  { make: 'Mazda', model: 'Mazda 6', type: 'sedan', price: 24195 }, 
  { make: 'Mazda', model: 'CX-9', type: 'suv', price: 31520 }, 
  { make: 'Toyota', model: '4Runner', type: 'suv', price: 34210 }, 
  { make: 'Toyota', model: 'Sequoia', type: 'suv', price: 45560 }, 
  { make: 'Toyota', model: 'Tacoma', type: 'truck', price: 24320 }, 
  { make: 'Ford', model: 'F-150', type: 'truck', price: 27110 }, 
  { make: 'Ford', model: 'Fusion', type: 'sedan', price: 22120 }, 
  { make: 'Ford', model: 'Explorer', type: 'suv', price: 31660 } 
]; 
const averageSUVPrice = vehicles 
  .filter(v => v.type === 'suv') 
  .map(v => v.price) 
  .reduce((sum, price, i, array) => sum + price / array.length, 0); 
console.log(averageSUVPrice); // 33399 

注意我們?cè)谝粋€(gè)數(shù)組對(duì)象上調(diào)用其方法，這是面向?qū)ο缶幊痰奶匦?。如果我們想要更函?shù)式一些，我們可以用 Rmmda 或者 lodash/fp 提供的函數(shù)。注意如果我們使用 R.compose 的話，需要倒轉(zhuǎn)函數(shù)的順序，因?yàn)樗鼜挠蚁蜃笠来握{(diào)用函數(shù)(從底向上);然而，如果我們想從左向右調(diào)用函數(shù)就像上面的例子，我們可以用 R.pipe。下面兩個(gè)例子用了 Rmmda。注意 Rmmda 有一個(gè) mean 函數(shù)用來(lái)代替 reduce 。

const vehicles = [ 
  { make: 'Honda', model: 'CR-V', type: 'suv', price: 24045 }, 
  { make: 'Honda', model: 'Accord', type: 'sedan', price: 22455 }, 
  { make: 'Mazda', model: 'Mazda 6', type: 'sedan', price: 24195 }, 
  { make: 'Mazda', model: 'CX-9', type: 'suv', price: 31520 }, 
  { make: 'Toyota', model: '4Runner', type: 'suv', price: 34210 }, 
  { make: 'Toyota', model: 'Sequoia', type: 'suv', price: 45560 }, 
  { make: 'Toyota', model: 'Tacoma', type: 'truck', price: 24320 }, 
  { make: 'Ford', model: 'F-150', type: 'truck', price: 27110 }, 
  { make: 'Ford', model: 'Fusion', type: 'sedan', price: 22120 }, 
  { make: 'Ford', model: 'Explorer', type: 'suv', price: 31660 } 
]; 
// Using `pipe` executes the functions from top-to-bottom.  
const averageSUVPrice1 = R.pipe( 
  R.filter(v => v.type === 'suv'), 
  R.map(v => v.price), 
  R.mean 
)(vehicles); 
console.log(averageSUVPrice1); // 33399 
// Using `compose` executes the functions from bottom-to-top. 
const averageSUVPrice2 = R.compose( 
  R.mean, 
  R.map(v => v.price), 
  R.filter(v => v.type === 'suv') 
)(vehicles); 
console.log(averageSUVPrice2); // 33399 

使用函數(shù)式方法的優(yōu)點(diǎn)是清楚地分開(kāi)了數(shù)據(jù)(vehicles)和邏輯(函數(shù) filter，map 和 reduce)。面向?qū)ο蟮拇a相比之下把數(shù)據(jù)和函數(shù)用以方法的對(duì)象的形式混合在了一起。

柯里化

不規(guī)范地說(shuō)，柯里化currying是把一個(gè)接受 n 個(gè)參數(shù)的函數(shù)變成 n 個(gè)每個(gè)接受單個(gè)參數(shù)的函數(shù)的過(guò)程。函數(shù)的 arity 是它接受參數(shù)的個(gè)數(shù)。接受一個(gè)參數(shù)的函數(shù)是 unary，兩個(gè)的是 binary，三個(gè)的是 ternary，n 個(gè)的是 n-ary。那么，我們可以把柯里化定義成將一個(gè) n-ary 函數(shù)轉(zhuǎn)換成 n 個(gè) unary 函數(shù)的過(guò)程。讓我們通過(guò)簡(jiǎn)單的例子開(kāi)始，一個(gè)計(jì)算兩個(gè)向量點(diǎn)積的函數(shù)?；貞浺幌戮€性代數(shù)，兩個(gè)向量 [a, b, c] 和 [x, y, z] 的點(diǎn)積是 ax + by + cz。

function dot(vector1, vector2) { 
  return vector1.reduce((sum, element, index) => sum += element * vector2[index], 0); 
} 
const v1 = [1, 3, -5]; 
const v2 = [4, -2, -1]; 
console.log(dot(v1, v2)); // 1(4) + 3(-2) + (-5)(-1) = 4 - 6 + 5 = 3 

dot 函數(shù)是 binary，因?yàn)樗邮軆蓚€(gè)參數(shù);然而我們可以將它手動(dòng)轉(zhuǎn)換成兩個(gè) unary 函數(shù)，就像下面的例子。注意 curriedDot 是一個(gè) unary 函數(shù)，它接受一個(gè)向量并返回另一個(gè)接受第二個(gè)向量的 unary 函數(shù)。

function curriedDot(vector1) { 
  return function(vector2) { 
    return vector1.reduce((sum, element, index) => sum += element * vector2[index], 0); 
  } 
} 
// Taking the dot product of any vector with [1, 1, 1] 
// is equivalent to summing up the elements of the other vector. 
const sumElements = curriedDot([1, 1, 1]); 
console.log(sumElements([1, 3, -5])); // -1 
console.log(sumElements([4, -2, -1])); // 1 

很幸運(yùn)，我們不需要把每一個(gè)函數(shù)都手動(dòng)轉(zhuǎn)換成柯里化以后的形式。Ramda 和 lodash 等庫(kù)可以為我們做這些工作。實(shí)際上，它們是柯里化的混合形式。你既可以每次傳遞一個(gè)參數(shù)，也可以像原來(lái)一樣一次傳遞所有參數(shù)。

function dot(vector1, vector2) { 
  return vector1.reduce((sum, element, index) => sum += element * vector2[index], 0); 
} 
const v1 = [1, 3, -5]; 
const v2 = [4, -2, -1]; 
// Use Ramda to do the currying for us! 
const curriedDot = R.curry(dot); 
const sumElements = curriedDot([1, 1, 1]); 
console.log(sumElements(v1)); // -1 
console.log(sumElements(v2)); // 1 
// This works! You can still call the curried function with two arguments. 
console.log(curriedDot(v1, v2)); // 3 

Ramda 和 lodash 都允許你“跳過(guò)”一些變量之后再指定它們。它們使用置位符來(lái)做這些工作。因?yàn)辄c(diǎn)積的計(jì)算可以交換兩項(xiàng)。傳入向量的順序不影響結(jié)果。讓我們換一個(gè)例子來(lái)闡述如何使用一個(gè)置位符。Ramda 使用雙下劃線作為其置位符。

const giveMe3 = R.curry(function(item1, item2, item3) { 
  return ` 
    1: ${item1} 
    2: ${item2} 
    3: ${item3} 
  `; 
}); 
const giveMe2 = giveMe3(R.__, R.__, 'French Hens');   // Specify the third argument. 
const giveMe1 = giveMe2('Partridge in a Pear Tree');  // This will go in the first slot. 
const result = giveMe1('Turtle Doves');               // Finally fill in the second argument. 
console.log(result); 
// 1: Partridge in a Pear Tree 
// 2: Turtle Doves 
// 3: French Hens 

在我們結(jié)束探討柯里化之前***的議題是偏函數(shù)應(yīng)用partial application。偏函數(shù)應(yīng)用和柯里化經(jīng)常同時(shí)出場(chǎng)，盡管它們實(shí)際上是不同的概念。一個(gè)柯里化的函數(shù)還是柯里化的函數(shù)，即使沒(méi)有給它任何參數(shù)。偏函數(shù)應(yīng)用，另一方面是僅僅給一個(gè)函數(shù)傳遞部分參數(shù)而不是所有參數(shù)?？吕锘瞧瘮?shù)應(yīng)用常用的方法之一，但是不是唯一的。

JavaScript 擁有一個(gè)內(nèi)置機(jī)制可以不依靠柯里化來(lái)做偏函數(shù)應(yīng)用。那就是 function.prototype.bind 方法。這個(gè)方法的一個(gè)特殊之處在于，它要求你將 this 作為***個(gè)參數(shù)傳入。 如果你不進(jìn)行面向?qū)ο缶幊蹋敲茨憧梢酝ㄟ^(guò)傳入 null 來(lái)忽略 this。

1function giveMe3(item1, item2, item3) { 
  return ` 
    1: ${item1} 
    2: ${item2} 
    3: ${item3} 
  `; 
} 
const giveMe2 = giveMe3.bind(null, 'rock'); 
const giveMe1 = giveMe2.bind(null, 'paper'); 
const result = giveMe1('scissors'); 
console.log(result); 
// 1: rock 
// 2: paper 
// 3: scissors 

總結(jié)

我希望你享受探索 JavaScript 中函數(shù)式編程的過(guò)程。對(duì)一些人來(lái)說(shuō)，它可能是一個(gè)全新的編程范式，但我希望你能嘗試它。你會(huì)發(fā)現(xiàn)你的程序更易于閱讀和調(diào)試。不變性還將允許你優(yōu)化 Angular 和 React 的性能。