本文將簡要介紹函數(shù)式編程的概念，並闡述五種提升 JavaScript 代碼函數(shù)式風(fēng)格的方法。

核心要點(diǎn)

• 函數(shù)式編程是一種編程範(fàn)式，它使用函數(shù)及其應(yīng)用而非命令列表。它更抽象，起源於數(shù)學(xué)。 JavaScript 特別適合函數(shù)式編程，因?yàn)楹瘮?shù)是第一類對象。
• 純函數(shù)是函數(shù)式編程的關(guān)鍵部分。給定相同的參數(shù)，它們始終返回相同的值，並且不會更改函數(shù)作用域之外的內(nèi)容。它們使您的代碼更易於移植和測試。
• 在函數(shù)式編程中，變量應(yīng)保持不變。設(shè)置變量後，它應(yīng)在整個(gè)程序中保持該狀態(tài)。這可以通過始終使用 const 聲明變量來實(shí)現(xiàn)。
• 建議在 JavaScript 的函數(shù)式編程中使用箭頭函數(shù)和三元運(yùn)算符。箭頭函數(shù)具有隱式返回值，這有助於可視化輸入到輸出的映射。三元運(yùn)算符是始終返回值的表達(dá)式，因此對於確保存在返回值很有用。
• 應(yīng)避免在函數(shù)式編程中使用 for 循環(huán)，因?yàn)樗鼈円蕾囲犊勺儬顟B(tài)。應(yīng)改用遞歸和高階數(shù)組方法。此外，應(yīng)避免類型強(qiáng)制以保持類型一致性。這可以通過在聲明函數(shù)之前編寫類型聲明註釋來實(shí)現(xiàn)。

什麼是函數(shù)式編程？

函數(shù)式編程是一種編程範(fàn)式，它使用函數(shù)及其應(yīng)用，而不是在命令式編程語言中使用的命令列表。

這是一種更抽象的編程風(fēng)格，其根源在於數(shù)學(xué)——特別是稱為 lambda 演算的數(shù)學(xué)分支，該分支由數(shù)學(xué)家 Alonzo Church 於 1936 年設(shè)計(jì)為可計(jì)算性的形式模型。它由表達(dá)式和函數(shù)組成，這些表達(dá)式和函數(shù)將一個(gè)表達(dá)式映射到另一個(gè)表達(dá)式。從根本上說，這就是我們在函數(shù)式編程中所做的：我們使用函數(shù)將值轉(zhuǎn)換為不同的值。

本文作者近年來愛上了函數(shù)式編程。我們開始使用鼓勵(lì)更函數(shù)式風(fēng)格的 JavaScript 庫，然後通過學(xué)習(xí)如何在 Haskell 中編寫代碼直接跳入深水區(qū)。

Haskell 是一種純函數(shù)式編程語言，開發(fā)於 20 世紀(jì) 90 年代，類似於 Scala 和 Clojure。使用這些語言，您將被迫採用函數(shù)式風(fēng)格進(jìn)行編碼。學(xué)習(xí) Haskell 使我們真正了解了函數(shù)式編程提供的所有優(yōu)勢。

JavaScript 是一種多範(fàn)式語言，因?yàn)樗梢杂渺兑悦钍?、面向?qū)ο窕蚝瘮?shù)式風(fēng)格進(jìn)行編程。但是，它確實(shí)特別適合函數(shù)式風(fēng)格，因?yàn)楹瘮?shù)是第一類對象，這意味著它們可以賦值給變量。這也意味著函數(shù)可以作為參數(shù)傳遞給其他函數(shù)（通常稱為回調(diào)），也可以作為其他函數(shù)的返回值。返回其他函數(shù)或接受其他函數(shù)作為參數(shù)的函數(shù)稱為高階函數(shù)，它們是函數(shù)式編程的基礎(chǔ)部分。

近年來，以函數(shù)式風(fēng)格編程 JavaScript 變得越來越流行，尤其是在 React 興起之後。 React 使用適合函數(shù)式方法的聲明式 API，因此紮實(shí)掌握函數(shù)式編程原理將改進(jìn)您的 React 代碼。

為什麼函數(shù)式編程如此優(yōu)秀？

簡而言之，函數(shù)式編程語言通常會導(dǎo)致代碼簡潔、清晰且優(yōu)雅。代碼通常更容易測試，並且可以在多線程環(huán)境中運(yùn)行而不會出現(xiàn)任何問題。

如果您與許多不同的程序員交談，您可能會從每個(gè)人那裡獲得關(guān)於函數(shù)式編程的完全不同的意見——從那些絕對討厭它的人到那些絕對喜歡它的人。我們（本文作者）站在“喜歡它”的一端，但我們完全理解它並非每個(gè)人的菜，尤其因?yàn)樗c通常教授的編程方式大相徑庭。

但是，一旦您掌握了函數(shù)式編程，並且一旦思維過程點(diǎn)擊到位，它就會成為第二天性，並改變您編寫代碼的方式。

規(guī)則 1：淨(jìng)化您的函數(shù)

函數(shù)式編程的關(guān)鍵部分是確保您編寫的函數(shù)是“純”的。如果您不熟悉這個(gè)術(shù)語，純函數(shù)基本上滿足以下條件：

• 它具有引用透明性。這意味著，給定相同的參數(shù)，函數(shù)將始終返回相同的值。任何函數(shù)調(diào)用都可以用返回值替換，程序仍然會以相同的方式運(yùn)行。
• 它沒有副作用。這意味著函數(shù)不會在函數(shù)作用域之外進(jìn)行任何更改。這可能包括更改全局值、記錄到控制臺或更新 DOM。

純函數(shù)必須至少有一個(gè)參數(shù)，並且必須返回值。如果您仔細(xì)考慮，如果它們不接受任何參數(shù)，它們將沒有任何數(shù)據(jù)可以使用，如果它們不返回值，那麼函數(shù)的意義何在？

純函數(shù)一開始可能看起來並非完全必要，但使用不純函數(shù)會導(dǎo)致程序發(fā)生整體變化，從而導(dǎo)致一些嚴(yán)重的邏輯錯(cuò)誤！

例如：

// 不純
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 純
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

在不純函數(shù)中，checkAge 函數(shù)依賴於可變變量 minimum。例如，如果稍後在程序中更新 minimum 變量，則 checkAge 函數(shù)可能會使用相同的輸入返回布爾值。

假設(shè)我們運(yùn)行以下代碼：

checkAge(20); // false

現(xiàn)在，假設(shè)稍後在代碼中，changeToUK() 函數(shù)將 minimum 的值更新為 18。

然後，假設(shè)我們運(yùn)行以下代碼：

// 不純
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 純
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

現(xiàn)在，checkAge 函數(shù)評估為不同的值，儘管給出了相同的輸入。

純函數(shù)使您的代碼更易於移植，因?yàn)樗鼈儾灰蕾囲蹲鳛閰?shù)提供的任何值之外的任何其他值。返回值永遠(yuǎn)不會改變的事實(shí)使純函數(shù)更容易測試。

一致地編寫純函數(shù)還可以消除發(fā)生突變和副作用的可能性。

突變是函數(shù)式編程中的一大危險(xiǎn)信號，如果您想了解更多信息，可以閱讀關(guān)於它們在《JavaScript 中變量賦值和突變指南》中的內(nèi)容。

為了使您的函數(shù)更易於移植，請確保您的函數(shù)始終保持純淨(jìng)。

規(guī)則 2：保持變量不變

聲明變量是任何程序員學(xué)習(xí)的第一件事之一。它變得微不足道，但在使用函數(shù)式編程風(fēng)格時(shí)卻極其重要。

函數(shù)式編程的關(guān)鍵原則之一是，一旦設(shè)置了變量，它就會在整個(gè)程序中保持該狀態(tài)。

這是顯示代碼中變量的重新賦值/重新聲明如何成為災(zāi)難的最簡單的示例：

checkAge(20); // false

如果您仔細(xì)考慮，n 的值不可能同時(shí)為 10 和 11；這在邏輯上說不通。

命令式編程中的一種常見編碼實(shí)踐是使用以下代碼遞增值：

checkAge(20); // true

在數(shù)學(xué)中，語句 x = x 1 是不合邏輯的，因?yàn)槿绻鷱膬蛇厹p去 x，您將得到 0 = 1，這顯然是不正確的。

因此，在 Haskell 中，您不能將變量賦值給一個(gè)值，然後將其重新賦值給另一個(gè)值。為了在 JavaScript 中實(shí)現(xiàn)這一點(diǎn)，您應(yīng)該遵循始終使用 const 聲明變量的規(guī)則。

規(guī)則 3：使用箭頭函數(shù)

在數(shù)學(xué)中，函數(shù)的概念是將一組值映射到另一組值的概念。下圖顯示了通過平方將左側(cè)的值集映射到右側(cè)的值集的函數(shù)：

這就是使用箭頭表示法在數(shù)學(xué)中編寫它的方式：f: x → x2。這意味著函數(shù) f 將值 x 映射到 x2。

我們可以使用箭頭函數(shù)幾乎以相同的方式編寫此函數(shù)：

const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."

在 JavaScript 中使用函數(shù)式風(fēng)格的一個(gè)關(guān)鍵特徵是使用箭頭函數(shù)而不是常規(guī)函數(shù)。當(dāng)然，這確實(shí)歸結(jié)為風(fēng)格，使用箭頭函數(shù)而不是常規(guī)函數(shù)實(shí)際上不會影響代碼的“函數(shù)式”程度。

但是，在使用函數(shù)式編程風(fēng)格時(shí)，最難適應(yīng)的事情之一是將每個(gè)函數(shù)都視為輸入到輸出的映射的思維方式。沒有所謂的過程。我們發(fā)現(xiàn)使用箭頭函數(shù)可以幫助我們更好地理解函數(shù)的過程。

箭頭函數(shù)具有隱式返回值，這確實(shí)有助於可視化此映射。

箭頭函數(shù)的結(jié)構(gòu)——尤其是它們的隱式返回值——有助於鼓勵(lì)編寫純函數(shù)，因?yàn)樗鼈兊慕Y(jié)構(gòu)實(shí)際上是“輸入映射到輸出”：

// 不純
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 純
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

另一件事是我們喜歡強(qiáng)調(diào)的，尤其是在編寫箭頭函數(shù)時(shí)，是使用三元運(yùn)算符。如果您不熟悉三元運(yùn)算符，它們是內(nèi)聯(lián) if...else 語句，形式為 condition ? value if true : value if false。

您可以閱讀更多關(guān)於它們在《快速提示：如何在 JavaScript 中使用三元運(yùn)算符》中的內(nèi)容。

在函數(shù)式編程中使用三元運(yùn)算符的主要原因之一是 else 語句的必要性。程序必須知道如果不滿足原始條件該怎麼做。例如，Haskell 會強(qiáng)制執(zhí)行 else 語句，如果沒有給出 else 語句，它將返回錯(cuò)誤。

使用三元運(yùn)算符的另一個(gè)原因是它們是始終返回值的表達(dá)式，而不是可以用於執(zhí)行可能具有副作用的操作的 if-else 語句。這對於箭頭函數(shù)特別有用，因?yàn)樗馕吨梢源_保存在返回值並保持輸入到輸出映射的圖像。如果您不確定語句和表達(dá)式之間的細(xì)微差別，那麼關(guān)於語句與表達(dá)式的指南非常值得一讀。

為了說明這兩個(gè)條件，以下是一個(gè)使用三元運(yùn)算符的簡單箭頭函數(shù)示例：

checkAge(20); // false

action 函數(shù)將根據(jù) state 參數(shù)的值返回“eat”或“sleep”的值。

因此，總之：在使您的代碼更具函數(shù)式時(shí)，您應(yīng)該遵循以下兩條規(guī)則：

• 使用箭頭表示法編寫函數(shù)
• 將 if...else 語句替換為三元運(yùn)算符

規(guī)則 4：刪除 for 循環(huán)

鑑於使用 for 循環(huán)編寫迭代代碼在編程中非常常見，說要避免它們似乎很奇怪。事實(shí)上，當(dāng)我們第一次發(fā)現(xiàn) Haskell 甚至沒有任何類型的 for 循環(huán)操作時(shí)，我們難以理解如何實(shí)現(xiàn)某些標(biāo)準(zhǔn)操作。但是，有一些非常好的理由說明為什麼 for 循環(huán)不會出現(xiàn)在函數(shù)式編程中，我們很快發(fā)現(xiàn)每種類型的迭代過程都可以在不使用 for 循環(huán)的情況下實(shí)現(xiàn)。

不使用 for 循環(huán)最重要的原因是它們依賴於可變狀態(tài)。讓我們來看一個(gè)簡單的求和函數(shù)：

checkAge(20); // true

如您所見，我們必須在 for 循環(huán)本身以及我們在 for 循環(huán)中更新的變量中使用 let。

如前所述，這通常是函數(shù)式編程中的不良做法，因?yàn)楹瘮?shù)式編程中的所有變量都應(yīng)該是不可變的。

如果我們想編寫所有變量都是不可變的代碼，我們可以使用遞歸：

const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."

如您所見，沒有變量被更新。

我們當(dāng)中的數(shù)學(xué)家顯然會知道所有這些代碼都是不必要的，因?yàn)槲覀兛梢灾皇褂们擅畹那蠛凸?0.5*n*(n 1)。但這是一種很好的方法，可以說明 for 循環(huán)的可變性與遞歸之間的區(qū)別。

但是，遞歸併不是解決可變性問題的唯一解決方案，尤其是在處理數(shù)組時(shí)。 JavaScript 具有許多內(nèi)置的高階數(shù)組方法，這些方法可以遍歷數(shù)組中的值而無需更改任何變量。

例如，假設(shè)我們要將 1 加到數(shù)組中的每個(gè)值。使用命令式方法和 for 循環(huán)，我們的函數(shù)可能如下所示：

// 不純
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 純
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

但是，我們可以使用 JavaScript 的內(nèi)置 map 方法並編寫如下所示的函數(shù)：

checkAge(20); // false

如果您以前從未見過map 函數(shù)，那麼絕對值得了解它們——以及JavaScript 的所有內(nèi)置高階數(shù)組方法，例如filter，尤其如果您真的對JavaScript 中的函數(shù)式編程感興趣。您可以在《不可變數(shù)組方法：如何編寫非常清晰的 JavaScript 代碼》中找到更多關(guān)於它們的信息。

Haskell 完全沒有 for 循環(huán)。為了使您的 JavaScript 更具函數(shù)式，請嘗試通過使用遞歸和內(nèi)置的高階數(shù)組方法來避免使用 for 循環(huán)。

規(guī)則 5：避免類型強(qiáng)制

在使用 JavaScript 等不需要類型聲明的語言進(jìn)行編程時(shí)，很容易忘記數(shù)據(jù)類型的重要性。 JavaScript 中使用的七種原始數(shù)據(jù)類型是：

• Number
• String
• Boolean
• Symbol
• BigInt
• Undefined
• Null

Haskell 是一種強(qiáng)類型語言，需要類型聲明。這意味著在任何函數(shù)之前，您都需要使用 Hindley-Milner 系統(tǒng)指定進(jìn)入的數(shù)據(jù)類型和輸出的數(shù)據(jù)類型。

例如：

checkAge(20); // true

這是一個(gè)非常簡單的函數(shù)，它將兩個(gè)數(shù)字（x 和 y）加在一起。對於每個(gè)函數(shù)，包括像這樣的非常簡單的函數(shù)，都必須向程序解釋數(shù)據(jù)類型似乎有點(diǎn)荒謬，但這最終有助於顯示函數(shù)的預(yù)期工作方式及其預(yù)期返回的內(nèi)容。這使得代碼更容易調(diào)試，尤其是在代碼變得更複雜時(shí)。

類型聲明遵循以下結(jié)構(gòu)：

const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."

類型強(qiáng)制在使用 JavaScript 時(shí)可能是一個(gè)大問題，JavaScript 具有各種可以用來（甚至濫用）繞過數(shù)據(jù)類型不一致的技巧。以下是最常見的技巧以及如何避免它們：

• 連接。 “Hello” 5 評估為“Hello5”，這並不一致。如果您想將字符串與數(shù)值連接起來，您應(yīng)該編寫“Hello” String(5)。
• 布爾語句和 0。在 JavaScript 中，if 語句中的 0 值等效於 false。這可能導(dǎo)致懶惰的編程技術(shù)，忽略檢查數(shù)值數(shù)據(jù)是否等於 0。

例如：

// 不純
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 純
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

這是一個(gè)評估數(shù)字是否為偶數(shù)的函數(shù)。它使用 ! 符號將 n % 2 的結(jié)果強(qiáng)制轉(zhuǎn)換為布爾值，但 n % 2 的結(jié)果不是布爾值，而是一個(gè)數(shù)字（0 或 1）。

像這樣的技巧，雖然看起來很聰明，並且減少了您編寫的代碼量，但它們破壞了函數(shù)式編程的類型一致性規(guī)則。因此，編寫此函數(shù)的最佳方法如下所示：

checkAge(20); // false

另一個(gè)重要概念是確保數(shù)組中的所有數(shù)據(jù)值都是相同類型。 JavaScript 不會強(qiáng)制執(zhí)行此操作，但如果沒有相同類型，當(dāng)您想要使用高階數(shù)組方法時(shí)可能會導(dǎo)致問題。

例如，一個(gè)將數(shù)組中所有數(shù)字相乘並返回結(jié)果的乘積函數(shù)可以用以下類型聲明註釋編寫：

checkAge(20); // true

在這裡，類型聲明清楚地表明函數(shù)的輸入是一個(gè)包含 Number 類型元素的數(shù)組，但它只返回一個(gè)數(shù)字。類型聲明清楚地說明了此函數(shù)的預(yù)期輸入和輸出。顯然，如果數(shù)組不只包含數(shù)字，則此函數(shù)將無法工作。

Haskell 是一種強(qiáng)類型語言，而 JavaScript 是一種弱類型語言，但為了使您的 JavaScript 更具函數(shù)式，您應(yīng)該在聲明函數(shù)之前編寫類型聲明註釋，並確保避免類型強(qiáng)制快捷方式。

我們還應(yīng)該在這裡提到，如果您想要 JavaScript 的強(qiáng)類型替代方案，該替代方案將為您強(qiáng)制執(zhí)行類型一致性，那麼您可以轉(zhuǎn)向 TypeScript。

結(jié)論

總而言之，以下五個(gè)規(guī)則將幫助您實(shí)現(xiàn)函數(shù)式代碼：

• 保持您的函數(shù)純淨(jìng)。
• 始終使用const聲明變量和函數(shù)。
• 對函數(shù)使用箭頭表示法。
• 避免使用 for 循環(huán)。
• 使用類型聲明註釋並避免類型強(qiáng)制快捷方式。

雖然這些規(guī)則不能保證您的代碼是純函數(shù)式的，但它們將在很大程度上使其更具函數(shù)式，並有助於使其更簡潔、更清晰且更容易測試。

我們真的希望這些規(guī)則能像幫助我們一樣幫助您！我們兩人都是函數(shù)式編程的忠實(shí)粉絲，我們強(qiáng)烈建議任何程序員使用它。

如果您想進(jìn)一步深入研究函數(shù)式 JavaScript，我們強(qiáng)烈建議您閱讀《弗里斯比教授關(guān)於函數(shù)式編程的大部分充分指南》，該指南可以在線免費(fèi)獲取。如果您想全力以赴學(xué)習(xí) Haskell，我們建議您使用 Try Haskell 交互式教程並閱讀優(yōu)秀的《學(xué)習(xí) Haskell 以獲得更大的好處》一書，該書也可以在線免費(fèi)閱讀。

關(guān)於 JavaScript 函數(shù)式編程的常見問題

什麼是 JavaScript 中的函數(shù)式編程？ 函數(shù)式編程是一種編程範(fàn)式，它將計(jì)算視為數(shù)學(xué)函數(shù)的評估，並避免更改狀態(tài)和可變數(shù)據(jù)。在 JavaScript 中，它涉及使用函數(shù)作為一等公民並避免副作用。

什麼是 JavaScript 中的一等函數(shù)？ JavaScript 中的一等函數(shù)意味著函數(shù)被視為與任何其他變量一樣。它們可以賦值給變量，作為參數(shù)傳遞給其他函數(shù)，並作為值從其他函數(shù)返回。

什麼是函數(shù)式編程中的不變性？ 不變性是指一旦創(chuàng)建對象，就不能更改它。在 JavaScript 函數(shù)式編程的上下文中，這意味著在初始化變量或數(shù)據(jù)結(jié)構(gòu)後避免修改它們。

什麼是高階函數(shù)？ 高階函數(shù)是將其他函數(shù)作為參數(shù)或返回函數(shù)作為結(jié)果的函數(shù)。它們支持函數(shù)的組合，使創(chuàng)建模塊化和可重用代碼更容易。

是否有任何庫/框架可以促進(jìn) JavaScript 中的函數(shù)式編程？ 是的，一些庫和框架（例如 Ramda 和 lodash）提供了支持 JavaScript 函數(shù)式編程概念的實(shí)用程序和函數(shù)。它們可以幫助簡化和增強(qiáng)函數(shù)式編程實(shí)踐。

以上是使您的JavaScript更具功能性的5種方法的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！