JavaScript重構(gòu)技巧中如何讓函數(shù)簡單明了

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)JavaScript重構(gòu)技巧中如何讓函數(shù)簡單明了，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

本文轉(zhuǎn)載自微信公眾號「大遷世界」，轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。

JavaScript 是一種易于學(xué)習(xí)的編程語言，編寫運(yùn)行并執(zhí)行某些操作的程序很容易。然而，要編寫一段干凈的JavaScript 代碼是很困難的。

對對象參數(shù)使用解構(gòu)

如果我們希望函數(shù)接收很多參數(shù)，那么應(yīng)該使用對象。在此基礎(chǔ)上，我們就可以使用解構(gòu)語法提取我們需要的參數(shù)。

例如，對于對象參數(shù)，我們可能會這樣使用：

const greet = (obj) => {   return `${obj.greeting}, ${obj.firstName}${obj.lastName}`; }

上面的語法，我們可以使用解構(gòu)方式會更優(yōu)雅：

const greet = ({   greeting,   firstName,   lastName }) => {   return `${greeting}, ${firstName}${lastName}`; }

這樣我們可以少寫很多重復(fù)的東西，命名也會更加清晰。

命名回調(diào)函數(shù)

好的命名會使閱讀代碼更容易，回調(diào)函數(shù)的命名也是一樣的，例如下面不好的命名方式：

const arr = [1, 2, 3].map(a => a * 2);

我們可以這樣分開命名：

const double = a => a * 2; if (score === 100 ||   remainingPlayers === 1 ||   remainingPlayers === 0) {   quitGame(); } const arr = [1, 2, 3].map(double);

現(xiàn)在我們知道我們的回調(diào)函數(shù)實際上是用來加倍原始數(shù)組的每個元素的。

讓條件句具有描述性

通過在自己的函數(shù)的條件語句中編寫條件表達(dá)式，可以使條件語句更具描述性。

對于復(fù)雜的條件判斷， 我們可以單獨使用函數(shù)來表示，會讓條件語句更具描述性，例如下面代碼：

if (score === 100 ||   remainingPlayers === 1 ||   remainingPlayers === 0) {   quitGame(); }

當(dāng)條件多時，我們可以用函數(shù)來表示：

const winnerExists = () => {   return score === 100 ||     remainingPlayers === 1 ||     remainingPlayers === 0 } if (winnerExists()) {   quitGame(); }

這樣，我們就知道這些條件是檢查游戲代碼中是否存在贏家的條件。

在第一個例子中，我們有一個很長的表達(dá)式在括號里，大多數(shù)人可能不知道它在判斷什么。但在第二個例子中，一旦我們把它放到一個命名函數(shù)中，我們就知道它大概在判斷什么了。

在條件語句中擁有一個命名函數(shù)比在擁有一堆布爾表達(dá)式要清晰得多。

用 Map 或 Object替換 switch 語句

由于  switch語句很長，這樣容易出錯。因此，如果可以的話，我們應(yīng)該用較短的代碼代替它們。許多switch語句可以用map或object替換。例如，如果我們有下面的switch語句:

const getValue = (prop) => {   switch (prop) {     case 'a': {       return 1;     }     case 'b': {       return 2;     }     case 'c': {       return 3;     }   } } const val = getValue('a');

我們可以將其替換為object或map，如下所示：

const obj = {   a: 1,   b: 2,   c: 3 } const val = obj['a'];

如我們所見，switch 語法很長。我們需要嵌套多個帶有多個return語句的塊，只是為了獲得給定prop值的返回值。

相反使用對象，我們僅僅需要一個對象就可以了：

const obj = {   a: 1,   b: 2,   c: 3 }

使用對象還有一個好處，就是對于鍵不必是有效的標(biāo)識符號，這樣這增加了更多的靈活性。

我們還可以使用map替換對象，如下所示：

const map = new Map([['a', 1], ['b', 2], ['c', 3]]) const val = map.get('a')

如我們所見，使用Map時，代碼也短很多。我們通過傳遞一個數(shù)組，數(shù)組中的每項包含鍵和值。然后，我們僅使用Map實例的get方法從鍵中獲取值。

Map優(yōu)于對象的一個好處是，我們可以將數(shù)字，布爾值或?qū)ο蟮绕渌涤米麈I。而對象只能將字符串或symbol作為鍵。

使用解構(gòu)語法可以使對象參數(shù)更清楚，更短。這樣，可以選擇性地將屬性作為變量進(jìn)行訪問。

通過將條件表達(dá)式放在它自己的命名函數(shù)中，可以使條件表達(dá)式更具描述性。同樣，我們應(yīng)該為回調(diào)函數(shù)命名，以便更容易地讀取代碼。

最后，應(yīng)該盡可能用Map和Object替換switch語句。

上述就是小編為大家分享的JavaScript重構(gòu)技巧中如何讓函數(shù)簡單明了了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。