代碼簡(jiǎn)化改進(jìn)秘籍，JS函數(shù)式編程技巧

函數(shù)式編程可以使您的代碼更簡(jiǎn)單。簡(jiǎn)單意味著代碼易于閱讀和理解，可測(cè)試和可維護(hù)。

在本文中，我描述了一些函數(shù)式編程（FP）技巧，您可以使用它們來(lái)簡(jiǎn)化代碼，從而使代碼更好。

1.擺脫臨時(shí)變量和不變性原則

函數(shù)式編程傾向于不變性，這種不變性原則意味著在初始化變量之后不會(huì)更改它們的值。同樣，創(chuàng)建對(duì)象或字符串后，您也無(wú)需對(duì)其進(jìn)行突變。

如果使用JavaScript編程，則所有變量定義都應(yīng)使用 const。對(duì)于正在閱讀您的代碼的任何人，常量定義都可以讓您高枕無(wú)憂：它保證永遠(yuǎn)不會(huì)重新分配變量，因?yàn)橹匦路峙涫遣豢赡艿模宰x者的大腦從跟蹤和識(shí)別代碼中重新分配的負(fù)擔(dān)中解脫出來(lái)。

何時(shí)需要更改值呢？首先，您可以擁有一個(gè)數(shù)組：

const fruits = ['apple', 'orange', 'banana']

要將新水果添加到此列表中，該怎么辦？解決方案是用新的或更新的值初始化一個(gè)新的常量變量，我們可以使用點(diǎn)擴(kuò)展符復(fù)制現(xiàn)有的 fruits 值：

const allFruits = [...fruits, 'pineapple']

您應(yīng)該在代碼的任何地方都遵循不變性原則，因?yàn)槿绻@樣做，您的代碼將變得更干凈。

您知道 fruits 變量的值永遠(yuǎn)不會(huì)改變，并且您第一次看到變量的聲明時(shí)就知道這一事實(shí)，初始化后，在任何可見(jiàn)的 fruits 變量處，您都知道。

2.擺脫循環(huán)

考慮以下循環(huán)：

var list = [];
var i = 0;
while (i < rows.length) {
    var row = rows[i];
    var message = {
        childAddress: row[1],
        action: 'switchToBackupNode2',
        role: 'edge'
    };
    list.push(message);
    i += 1;
}

函數(shù)編程方法去掉了while循環(huán)，并使用map將行處理為一個(gè)列表。

const list = rows.map(r => ({
    childAddress: r[1],
    action: 'switchToBackupNode2',
    role: 'edge'
 }))

除了擺脫循環(huán)之外，這段代碼還刪除了臨時(shí)變量 row 和 message以及循環(huán)變量 i。

結(jié)果更具可讀性，非常清晰。

為了公平起見(jiàn)，要獲得此信任級(jí)別，您需要首先了解map函數(shù)。map函數(shù)在函數(shù)式編程中無(wú)處不在，因此學(xué)習(xí)它是過(guò)渡到FP的重要步驟。

map是程序員用于列表處理的函數(shù)之一。處理列表中的數(shù)據(jù)是FP的重要組成部分，您還應(yīng)該學(xué)習(xí)其他列表處理功能：最重要的是 reduce 和 filter 函數(shù)。

3.刪除if..else

在我的簡(jiǎn)化代碼的實(shí)踐中，刪除 if 是一個(gè)有用的策略。有幾種策略可以用于從代碼中刪除 if 語(yǔ)句，并且應(yīng)用其中任何一種通常都會(huì)得到更清晰、更容易理解的結(jié)構(gòu)。

讓我們看一下刪除 if 語(yǔ)句的一些策略。

3.1三元運(yùn)算符

三元運(yùn)算符是我從變量賦值中去掉 if 語(yǔ)句的主要工具。

考慮以下：

let message;
if (person !== null) {
  message = `hello, ${person}!`
} else {
  message = 'hey there!'
}

上面的代碼中有兩個(gè)問(wèn)題：

• 我必須使用非const變量 message，因?yàn)閷?duì)于 if 結(jié)構(gòu)，我無(wú)法在變量聲明中立即給message賦值。
• 考慮到它只完成了聲明變量和有條件地為變量賦值的簡(jiǎn)單任務(wù)，代碼相當(dāng)冗長(zhǎng)和復(fù)雜。

使用三元運(yùn)算符? 可以在一行中完成相同的工作：

const message = person !== null ? `hello, ${person}!` : 'hey there!'

3.2布爾運(yùn)算符&&和||

布爾運(yùn)算符 && 和 || 為 if 語(yǔ)句提供有效的替代方法。

不要這樣做：

if (value) {
  doStuff(value)
} else {
  doStuff(1)
}

改進(jìn)：

doStuff(value || 1)

這里的邏輯或操作符 || 提供了向函數(shù)傳遞默認(rèn)值的快速方法。每次不知道或不確定變量是否具有值時(shí)，都可以使用相同的技巧：使用 || ?作為前綴提供默認(rèn)值。

這是一個(gè)如何使用邏輯與運(yùn)算符 && 的示例。首先，使用 if 的版本：

if (data) {
  sendData(data.value);
}

然后我們使用 && 刪除 if ：

data && sendData(data.value)

在這里，我們使用 && 來(lái)首先檢查數(shù)據(jù)變量是否包含值。如果沒(méi)有這個(gè)檢查，當(dāng)沒(méi)有值時(shí)代碼就會(huì)崩潰(換句話說(shuō)，值為 null 或 undefined)。

在這里使用這些運(yùn)算符時(shí)，我們依賴布爾表達(dá)式的短路求值。&& 和 || 運(yùn)算符，當(dāng)?shù)谝徊糠皱e(cuò)誤時(shí)，JavaScript不會(huì)計(jì)算表達(dá)式的后半部分。

Map 和 查找

使用 map 作為查找 list 是替換一系列if語(yǔ)句的有效方法。考慮以下：

let language;
if (country === 'FI') {
	language = 'Finnish'
} else if (country === 'SE') {
	language = 'Swedish'
} else if (country === 'USA') {
  language = 'English (American)'
} else if (country === 'UK') {
  language = 'English (UK)'
} // etc...

更簡(jiǎn)潔的方法是使用國(guó)家/語(yǔ)言對(duì)的Map。

const languages = new Map([
  ['FI', 'Finnish'],
  ['SE', 'Swedish'],
  ['USA', 'English (American)'],
  ['UK', 'English (UK)'],
])
const language = languages.get('SE')
console.log(language) // Swedish

第二種實(shí)現(xiàn)要簡(jiǎn)單得多。該代碼立即顯示出它的意圖。另外，它將 language 變量轉(zhuǎn)換為使用 const。

小函數(shù)

函數(shù)式編程與函數(shù)有關(guān)，最好編寫(xiě)許多小函數(shù)，而不要寫(xiě)一些長(zhǎng)函數(shù)。將代碼分解成更小的模塊的主要原因是更小(更短)的代碼塊更容易獨(dú)立理解，更小的部件也更容易測(cè)試和維護(hù)。

借助我在此處顯示的技巧，您的代碼可以更緊湊。這是一個(gè)重要的目標(biāo)，也是學(xué)習(xí)這些技巧的絕佳理由，更重要的是，學(xué)習(xí)函數(shù)式編程。

還有更多類似的技巧和策略，讓我知道您是否想寫(xiě)第二篇有關(guān)其他類似策略的文章。