【譯】JavaScript重構技巧-讓函數簡單明瞭

John Au-Yeung 來源：medium 譯者：前端小智

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

JavaScript 是一種易於學習的編程語言，編寫運行並執行某些操做的程序很容易。然而，要編寫一段乾淨的JavaScript 代碼是很困難的。

在本文中，咱們將研究如何讓咱們的函數更清晰明瞭。

對對象參數使用解構

若是咱們但願函數接收不少參數，那麼應該使用對象。在此基礎上，咱們就能夠使用解構語法提取咱們須要的參數。

例如，對於對象參數，咱們可能會這樣使用：

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

複製代碼

上面的語法，咱們能夠使用解構方式會更優雅：

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

這樣咱們能夠少寫不少重複的東西，命名也會更加清晰。

命名回調函數

好的命名會使閱讀代碼更容易，回調函數的命名也是同樣的，例以下面很差的命名方式：

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

咱們能夠這樣分開命名：

const double = a => a * 2;
const arr = [1, 2, 3].map(double);
複製代碼

如今咱們知道咱們的回調函數其實是用來加倍原始數組的每一個元素的。

讓條件句具備描述性

經過在本身的函數的條件語句中編寫條件表達式，能夠使條件語句更具描述性。

對於複雜的條件判斷， 咱們能夠單獨使用函數來表示，會讓條件語句更具描述性，例以下面代碼：

if (score === 100 ||
  remainingPlayers === 1 ||
  remainingPlayers === 0) {
  quitGame();
}
複製代碼

當條件多時，咱們能夠用函數來表示：

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

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

在第一個例子中，咱們有一個很長的表達式在括號裏，大多數人可能不知道它在判斷什麼。但在第二個例子中，一旦咱們把它放到一個命名函數中，咱們就知道它大概在判斷什麼了。

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

用 Map 或 Object替換 switch 語句

因爲 switch語句很長，這樣容易出錯。 所以，若是能夠的話，咱們應該用較短的代碼代替它們。許多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
}
複製代碼

使用對象還有一個好處，就是對於鍵沒必要是有效的標識符號，這樣這增長了更多的靈活性。

咱們還能夠使用map替換對象，以下所示：

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

如咱們所見，使用Map時，代碼也短不少。 咱們經過傳遞一個數組，數組中的每項包含鍵和值。而後，咱們僅使用Map實例的get方法從鍵中獲取值。

Map優於對象的一個​​好處是，咱們能夠將數字，布爾值或對象等其餘值用做鍵。 而對象只能將字符串或symbol做爲鍵。

總結

使用解構語法能夠使對象參數更清楚，更短。 這樣，能夠選擇性地將屬性做爲變量進行訪問。

經過將條件表達式放在它本身的命名函數中，能夠使條件表達式更具描述性。一樣，咱們應該爲回調函數命名，以便更容易地讀取代碼。

最後，應該儘量用Map和Object替換switch語句。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：levelup.gitconnected.com/javascript-…

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。