JavaScript 函數(shù)組合：構(gòu)建更易維護(hù)的代碼

JavaScript 函數(shù)組合是一種將多個簡單函數(shù)組合成單個更復(fù)雜函數(shù)的技術(shù)，這些函數(shù)按邏輯順序?qū)o定數(shù)據(jù)執(zhí)行子函數(shù)操作。函數(shù)應(yīng)用的順序會產(chǎn)生不同的結(jié)果。

為了編寫可維護(hù)的代碼，理解每個被組合函數(shù)的返回類型至關(guān)重要，以確保下一個函數(shù)可以正確處理它。JavaScript 不會阻止組合返回不合適類型函數(shù)，因此這部分責(zé)任落在程序員身上。

對不熟悉函數(shù)式編程范式的人來說，組合函數(shù)可能會使代碼看起來很復(fù)雜。但是，隨著 ES2015 語法的出現(xiàn)，使用箭頭函數(shù)，可以一行代碼創(chuàng)建簡單的組合函數(shù)，而無需特殊的組合方法。

組合函數(shù)應(yīng)該是純函數(shù)，這意味著每次將特定值傳遞給函數(shù)時，函數(shù)都應(yīng)返回相同的結(jié)果，并且函數(shù)不應(yīng)產(chǎn)生改變自身外部值的副作用。這將產(chǎn)生更簡潔、更易讀的代碼。

本文由 Jeff Mott、Dan Prince 和 Sebastian Seitz 共同評審。感謝所有 SitePoint 的同行評審者，使 SitePoint 的內(nèi)容達(dá)到最佳狀態(tài)！

函數(shù)式思維的優(yōu)勢之一是能夠使用小型、易于理解的單個函數(shù)來構(gòu)建復(fù)雜的功能。 但有時這需要反向思考問題，而不是正向思考，以便找出如何創(chuàng)建最優(yōu)雅的解決方案。在本文中，我將采用循序漸進(jìn)的方法來檢查 JavaScript 中的函數(shù)組合，并演示它如何產(chǎn)生更易于理解且錯誤更少的代碼。

嵌套函數(shù)

組合是一種技術(shù)，它允許你將兩個或多個簡單函數(shù)組合成一個更復(fù)雜的函數(shù)，該函數(shù)按邏輯順序?qū)魅氲娜魏螖?shù)據(jù)執(zhí)行每個子函數(shù)。要獲得此結(jié)果，你需要將一個函數(shù)嵌套在另一個函數(shù)中，并對內(nèi)部函數(shù)的結(jié)果重復(fù)執(zhí)行外部函數(shù)的操作，直到產(chǎn)生結(jié)果。并且結(jié)果可能因函數(shù)應(yīng)用的順序而異。這可以使用我們已經(jīng)在 JavaScript 中熟悉的編程技術(shù)輕松演示，方法是將函數(shù)調(diào)用作為參數(shù)傳遞給另一個函數(shù)：

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

在這種情況下，我們定義了一個 addOne() 函數(shù)來為一個值加 1，以及一個 timesTwo() 函數(shù)將一個值乘以 2。通過將一個函數(shù)的結(jié)果作為另一個函數(shù)的參數(shù)傳入，我們可以看到如何將其中一個嵌套在另一個中會產(chǎn)生不同的結(jié)果，即使初始值相同也是如此。內(nèi)部函數(shù)先執(zhí)行，然后結(jié)果傳遞給外部函數(shù)。

命令式組合

如果你想重復(fù)執(zhí)行相同的操作序列，定義一個新函數(shù)來自動應(yīng)用第一個函數(shù)和第二個函數(shù)可能會很方便。這可能看起來像這樣：

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

在這種情況下，我們手動將這兩個函數(shù)按特定順序組合在一起。我們創(chuàng)建了一個新函數(shù)，該函數(shù)首先將傳遞的值分配給 holder 變量，然后通過執(zhí)行第一個函數(shù)，然后是第二個函數(shù)來更新該變量的值，最后返回該 holder 的值。（請注意，我們使用名為 holder 的變量來臨時保存我們傳入的值。對于這樣一個簡單的函數(shù)，額外的局部變量似乎是多余的，但即使在命令式 JavaScript 中，將傳入函數(shù)的參數(shù)值視為常量也是一個好習(xí)慣。局部修改它們是可能的，但這會造成關(guān)于在函數(shù)的不同階段調(diào)用時參數(shù)值是什么的混淆。）類似地，如果我們想創(chuàng)建一個另一個新函數(shù)以相反的順序應(yīng)用這兩個較小的函數(shù)，我們可以執(zhí)行以下操作：

// ...來自上面的先前函數(shù)定義
function addOneTimesTwo(x) {
  var holder = x;
  holder = addOne(holder);
  holder = timesTwo(holder);
  return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10

當(dāng)然，這段代碼開始看起來非常重復(fù)。我們的兩個新的組合函數(shù)幾乎完全相同，只是它們調(diào)用的兩個較小函數(shù)的執(zhí)行順序不同。我們需要簡化它（就像不要重復(fù)自己一樣）。此外，使用像這樣改變其值的臨時變量并不是很函數(shù)式，即使它隱藏在我們正在創(chuàng)建的組合函數(shù)內(nèi)部也是如此。底線：我們可以做得更好。

創(chuàng)建函數(shù)式組合

讓我們創(chuàng)建一個組合函數(shù)，它可以采用現(xiàn)有的函數(shù)并將它們按我們想要的順序組合在一起。為了以一致的方式做到這一點，而無需每次都處理內(nèi)部細(xì)節(jié)，我們必須決定要將函數(shù)作為參數(shù)傳入的順序。我們有兩個選擇。參數(shù)將分別是函數(shù)，它們可以從左到右或從右到左執(zhí)行。也就是說，使用我們提出的新函數(shù)，compose(timesTwo, addOne) 可以表示 timesTwo(addOne()) 從右到左讀取參數(shù)，或者 addOne(timesTwo()) 從左到右讀取參數(shù)。從左到右執(zhí)行參數(shù)的優(yōu)點是它們將以英語相同的閱讀方式讀取，這與我們命名組合函數(shù) timesTwoAddOne() 以暗示乘法應(yīng)在加法之前發(fā)生的方式非常相似。我們都知道邏輯命名對于簡潔易讀的代碼的重要性。從左到右執(zhí)行參數(shù)的缺點是待操作的值必須放在前面。但是，將值放在前面使得將來用其他函數(shù)組合結(jié)果函數(shù)不太方便。為了很好地解釋這種邏輯背后的思想，你無法超越 Brian Lonsdorf 的經(jīng)典視頻 Hey Underscore, You’re Doing it Wrong。（盡管應(yīng)該注意的是，現(xiàn)在 Underscore 有一個 fp 選項可以幫助解決 Brian 在將 Underscore 與函數(shù)式編程庫（例如 lodash-fp 或 Ramda）一起使用時討論的函數(shù)式編程問題。）無論如何，我們真正想要做的是首先傳入所有配置數(shù)據(jù)，然后最后傳入要操作的值。因此，將我們的組合函數(shù)定義為讀取其參數(shù)并從右到左應(yīng)用它們最合乎邏輯。因此，我們可以創(chuàng)建一個看起來像這樣的基本組合函數(shù)：

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

使用這個非常簡單的組合函數(shù)，我們可以更簡單地構(gòu)建我們之前的兩個復(fù)雜函數(shù)，并看到結(jié)果相同：

// ...來自上面的先前函數(shù)定義
function addOneTimesTwo(x) {
  var holder = x;
  holder = addOne(holder);
  holder = timesTwo(holder);
  return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10

雖然這個簡單的組合函數(shù)有效，但它并沒有考慮許多限制其靈活性和適用性的問題。例如，我們可能想要組合兩個以上的函數(shù)。此外，我們在此過程中會丟失這些信息。我們可以解決這些問題，但為了掌握組合的工作原理，這不是必需的。與其自己編寫，不如從現(xiàn)有的函數(shù)式庫（例如 Ramda）繼承更強(qiáng)大的組合，默認(rèn)情況下，它確實考慮了參數(shù)從右到左的順序。

類型是你的責(zé)任

重要的是要記住，程序員有責(zé)任知道每個被組合函數(shù)的返回類型，以便下一個函數(shù)可以正確處理它。與執(zhí)行嚴(yán)格類型檢查的純函數(shù)式編程語言不同，JavaScript 不會阻止你嘗試組合返回不合適類型值的函數(shù)。你不僅限于傳遞數(shù)字，甚至不限于從一個函數(shù)到下一個函數(shù)保持相同的變量類型。但是你負(fù)責(zé)確保你正在組合的函數(shù)已準(zhǔn)備好處理前一個函數(shù)返回的任何值。

考慮你的受眾

始終記住，其他人將來可能需要使用或修改你的代碼。在傳統(tǒng)的 JavaScript 代碼中使用組合對于不熟悉函數(shù)式編程范式的人來說可能會顯得復(fù)雜。目標(biāo)是更簡潔、更易于閱讀和維護(hù)的代碼。但是，隨著 ES2015 語法的出現(xiàn)，甚至可以使用箭頭函數(shù)將簡單的組合函數(shù)作為單行調(diào)用來創(chuàng)建，而無需特殊的組合方法：

function addOne(x) {
  return x + 1;
}
function timesTwo(x) {
  return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8

今天就開始組合吧

與所有函數(shù)式編程技術(shù)一樣，重要的是要記住你的組合函數(shù)應(yīng)該是純函數(shù)。簡而言之，這意味著每次將特定值傳遞給函數(shù)時，函數(shù)都應(yīng)返回相同的結(jié)果，并且函數(shù)不應(yīng)產(chǎn)生改變自身外部值的副作用。當(dāng)您有一組想要應(yīng)用于數(shù)據(jù)的相關(guān)功能，并且您可以將該功能的組件分解為可重用且易于組合的函數(shù)時，組合嵌套非常方便。與所有函數(shù)式編程技術(shù)一樣，我建議謹(jǐn)慎地將組合添加到你的現(xiàn)有代碼中以熟悉它。如果你做對了，結(jié)果將是更簡潔、更干燥、更易讀的代碼。難道這不是我們都想要的嗎？

(以下為FAQ，已根據(jù)原文進(jìn)行調(diào)整和精簡，并避免重復(fù)信息)

關(guān)于函數(shù)組合和可維護(hù)代碼的常見問題

• 什么是編程中的函數(shù)組合？ 函數(shù)組合是將簡單函數(shù)組合成更復(fù)雜函數(shù)的概念。你可以像搭積木一樣，用這些小型可重用的函數(shù)創(chuàng)建復(fù)雜、強(qiáng)大的功能。這有助于使代碼更易讀、更易維護(hù)和更具可擴(kuò)展性。

• 函數(shù)組合如何促進(jìn)可維護(hù)的代碼？ 函數(shù)組合通過鼓勵使用小型、可重用的函數(shù)來促進(jìn)可維護(hù)性。這些函數(shù)更容易理解、測試和調(diào)試。當(dāng)這些小型函數(shù)組合在一起以創(chuàng)建更復(fù)雜的功能時，更容易查明和修復(fù)可能出現(xiàn)的任何問題。這種模塊化方法還可以更容易地更新或修改代碼的某些部分，而不會影響整個系統(tǒng)。

• 編寫可維護(hù)代碼的最佳實踐是什么？ 編寫可維護(hù)的代碼涉及多項最佳實踐，包括：保持函數(shù)小巧且專注于單一任務(wù)；使用有意義的變量和函數(shù)名稱；對代碼進(jìn)行注釋以解釋代碼邏輯背后的“原因”；遵循一致的編碼風(fēng)格和結(jié)構(gòu)。

• 函數(shù)組合與函數(shù)式編程有何關(guān)系？ 函數(shù)組合是函數(shù)式編程中的一個基本概念。函數(shù)式編程是一種將計算視為數(shù)學(xué)函數(shù)的求值并避免更改狀態(tài)和可變數(shù)據(jù)的范例。在這種范例中，函數(shù)組合在從更簡單的函數(shù)構(gòu)建更復(fù)雜的函數(shù)中起著至關(guān)重要的作用，從而提高了代碼的可重用性和可維護(hù)性。

• 實現(xiàn)函數(shù)組合的挑戰(zhàn)是什么？ 函數(shù)組合雖然有很多好處，但也可能帶來挑戰(zhàn)。一個挑戰(zhàn)是，如果管理不當(dāng)，它可能會導(dǎo)致難以閱讀的代碼，尤其是在組合多個函數(shù)時。在組合函數(shù)鏈中處理錯誤和異常也可能很困難。但是，可以通過良好的編碼實踐和正確使用函數(shù)組合來減輕這些挑戰(zhàn)。

• 函數(shù)組合如何改進(jìn)代碼測試？ 函數(shù)組合可以使代碼測試更輕松、更高效。由于組合函數(shù)是由較小、獨(dú)立的函數(shù)組成的，因此你可以單獨(dú)測試每個小型函數(shù)。這使得更容易隔離和修復(fù)錯誤。它還促進(jìn)了單元測試的實踐，其中軟件的每個部分都單獨(dú)進(jìn)行測試以確保其正常工作。

以上是功能組成：可維護(hù)代碼的構(gòu)建塊的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！