JavaScript重構技巧 — 條件

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

點贊再看，養成習慣

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

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

在本文中，咱們將介紹一些優化條件表達式相關的重構思路。

分解條件表達式

咱們能夠將長的條件表達式分解成有命名的短小條件表達多，這樣有利於閱讀。例如咱們可能會寫這樣的代碼：

let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")

上面的代碼太過冗長了，不利於閱讀，咱們能夠把它分解成幾個短小且有名字的條件表達式，以下所示：

let userAgent = navigator.userAgent.toLowerCase();
let isMac = userAgent.includes("mac");
let isIE = userAgent.toLowerCase().includes("ie");
let isMacIE = isMac && isIE;

合併條件表達式

與上面相反的，若是有多個簡短的條件表達式，則能夠將它們合併成一個。例如咱們可能會寫這樣的代碼：

const x = 5;
const bigEnough = x > 5;
const smallEnough = x < 6;
const inRange = bigEnough && smallEnough;

咱們能夠這樣合併：

const x = 5;
const inRange = x > 5 && x < 6;

由於表達式很短，即便把它們組合在一塊兒也不會使表達式變長，因此咱們能夠這樣作。

合併重複的條件片斷

若是咱們在條件塊中有重複的表達式或語句，則能夠將它們移出。例如咱們可能會寫這樣的代碼：

if (price > 100) {
  //...
  complete();
} else {
  //...
  complete();
}

咱們能夠把重複的內容移到條件表達式外面，以下所示：

if (price > 100) {
  //...  
} else {
  //...  
}
complete();

這樣，咱們沒必要重複沒必要要地調用complete函數。

刪除控制標誌

若是咱們在循環中使用了控制標誌，那應該會這樣代碼：

let done = false;
while (!done) {
  if (condition) {
    done = true;
  }
  //...
}

在上面的代碼中，done 是控制標，在condition爲true時，將done設置爲true中止while循環。

相對於上面，咱們可使用break來中止循環，以下所示：

let done = false;
while (!done) {
  if (condition) {
    break;
  }
  //...
}

用衛語句代替嵌套條件

衛語句就是把複雜的條件表達式拆分紅多個條件表達式，好比一個很複雜的表達式，嵌套了好幾層的 if-then-else語句，轉換爲多個 if語句，實現它的邏輯，這多條的 if語句就是衛語句。

嵌套條件語句很難閱讀，因此咱們可使用衛語句代替它們。例如咱們可能會寫這樣的代碼：

const fn = () => {
  if (foo) {
    if (bar) {
      if (baz) {
        //...
      }
    }
  }
}

咱們能夠這樣優化：

if (!foo) {
    return;
  }
  if (!bar) {
    return;
  }
  if (baz) {
    //...
  }
}

在上面的代碼中，衛語句是：

if (!foo) {
  return;
}

和

if (!bar) {
  return;
}

若是這些條件爲假，它們會提早返回函數，這樣，咱們就不須要嵌套了。

用多態替換條件

咱們可使用switch語句爲不一樣種類的數據建立相同的子類，而不是使用switch語句對不一樣類型的數據執行相同的操做，而後針對對象的類型使用不一樣的方法。

例如咱們可能會寫這樣的代碼：

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
  getSpeed() {
    switch (this.type) {
      case ('cat'): {
        return getBaseSpeed() * 1.5
      }
      case ('dog'): {
        return getBaseSpeed() * 2
      }
      default: {
        return getBaseSpeed()
      }
    }
  }
}

咱們能夠這樣重構：

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
}
class Cat extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 1.5;
  }
}
class Dog extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 2;
  }
}

當switch語句很長時，應該爲不一樣類型的對象定製case塊。

採用空對象

若是咱們重複檢查null或undefined，則能夠定義一個表明該類的null或undefined版本的子類，而後使用它。

例如咱們可能會寫這樣的代碼：

class Person {
  //...
}

咱們能夠這樣重構：

class Person {
  //...
}
class NullPerson extends Person {
  //...
}

而後，咱們將Person設置爲null或undefined 的對象屬性，而不是將其設置爲NullPerson實例。

這樣就無需使用條件檢查這些值。

---

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

原文：https://levelup.gitconnected....

---

交流

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