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

核心要點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

規(guī)則 1：凈化您的函數(shù)

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

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

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

純函數(shù)一開(kāi)始可能看起來(lái)并非完全必要，但使用不純函數(shù)會(huì)導(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ù)可能會(huì)使用相同的輸入返回布爾值。

假設(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ù)評(píng)估為不同的值，盡管給出了相同的輸入。

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

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

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

為了使您的函數(shù)更易于移植，請(qǐng)確保您的函數(shù)始終保持純凈。

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

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

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

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

checkAge(20); // false

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

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

checkAge(20); // true

在數(shù)學(xué)中，語(yǔ)句 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ù)的概念是將一組值映射到另一組值的概念。下圖顯示了通過(guò)平方將左側(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í)際上不會(huì)影響代碼的“函數(shù)式”程度。

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

箭頭函數(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 語(yǔ)句，形式為 condition ? value if true : value if false。

您可以閱讀更多關(guān)于它們?cè)凇犊焖偬崾荆喝绾卧?JavaScript 中使用三元運(yùn)算符》中的內(nèi)容。

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

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

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

checkAge(20); // false

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

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

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

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

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

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

checkAge(20); // true

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

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

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

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

如您所見(jiàn)，沒(méi)有變量被更新。

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

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

例如，假設(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

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

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

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

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

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

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

例如：

checkAge(20); // true

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

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

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

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

• 連接。“Hello” 5 評(píng)估為“Hello5”，這并不一致。如果您想將字符串與數(shù)值連接起來(lái)，您應(yīng)該編寫“Hello” String(5)。
• 布爾語(yǔ)句和 0。在 JavaScript 中，if 語(yǔ)句中的 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è)評(píng)估數(shù)字是否為偶數(shù)的函數(shù)。它使用 ! 符號(hào)將 n % 2 的結(jié)果強(qiáng)制轉(zhuǎn)換為布爾值，但 n % 2 的結(jié)果不是布爾值，而是一個(gè)數(shù)字（0 或 1）。

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

checkAge(20); // false

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

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

checkAge(20); // true

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

Haskell 是一種強(qiáng)類型語(yǔ)言，而 JavaScript 是一種弱類型語(yǔ)言，但為了使您的 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ù)純凈。
• 始終使用const聲明變量和函數(shù)。
• 對(duì)函數(shù)使用箭頭表示法。
• 避免使用 for 循環(huán)。
• 使用類型聲明注釋并避免類型強(qiáng)制快捷方式。

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

我們真的希望這些規(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ù)式編程的常見(jiàn)問(wèn)題

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

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

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

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

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

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