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

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

在本文中，我們將研究如何讓我們的函數(shù)更清晰明了。

[[327780]]

對對象參數(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作為鍵。

總結(jié)

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

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

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