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

[[329554]]

在本文中，我們將介紹一些優(yōu)化條件表達(dá)式相關(guān)的重構(gòu)思路。

分解條件表達(dá)式

我們可以將長(zhǎng)的條件表達(dá)式分解成有命名的短小條件表達(dá)多，這樣有利于閱讀。例如我們可能會(huì)寫(xiě)這樣的代碼：

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

上面的代碼太過(guò)冗長(zhǎng)了，不利于閱讀，我們可以把它分解成幾個(gè)短小且有名字的條件表達(dá)式，如下所示：

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

合并條件表達(dá)式

與上面相反的，如果有多個(gè)簡(jiǎn)短的條件表達(dá)式，則可以將它們合并成一個(gè)。例如我們可能會(huì)寫(xiě)這樣的代碼：

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

我們可以這樣合并：

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

因?yàn)楸磉_(dá)式很短，即使把它們組合在一起也不會(huì)使表達(dá)式變長(zhǎng)，所以我們可以這樣做。

合并重復(fù)的條件片段

如果我們?cè)跅l件塊中有重復(fù)的表達(dá)式或語(yǔ)句，則可以將它們移出。例如我們可能會(huì)寫(xiě)這樣的代碼：

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

我們可以把重復(fù)的內(nèi)容移到條件表達(dá)式外面，如下所示：

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

這樣，我們不必重復(fù)不必要地調(diào)用complete函數(shù)。

刪除控制標(biāo)志

如果我們?cè)谘h(huán)中使用了控制標(biāo)志，那應(yīng)該會(huì)這樣代碼：

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

在上面的代碼中，done 是控制標(biāo)，在condition為true時(shí)，將done設(shè)置為true停止while循環(huán)。

相對(duì)于上面，我們可以使用break來(lái)停止循環(huán)，如下所示：

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

用衛(wèi)語(yǔ)句代替嵌套條件

衛(wèi)語(yǔ)句就是把復(fù)雜的條件表達(dá)式拆分成多個(gè)條件表達(dá)式，比如一個(gè)很復(fù)雜的表達(dá)式，嵌套了好幾層的if-then-else語(yǔ)句，轉(zhuǎn)換為多個(gè)if語(yǔ)句，實(shí)現(xiàn)它的邏輯，這多條的if語(yǔ)句就是衛(wèi)語(yǔ)句。

嵌套條件語(yǔ)句很難閱讀，所以我們可以使用「衛(wèi)語(yǔ)句」代替它們。例如我們可能會(huì)寫(xiě)這樣的代碼：

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

我們可以這樣優(yōu)化：

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

在上面的代碼中，衛(wèi)語(yǔ)句是：

if (!foo) { 
  return; 
} 

和

if (!bar) { 
  return; 
} 

如果這些條件為假，它們會(huì)提前返回函數(shù)，這樣，我們就不需要嵌套了。

用多態(tài)替換條件

我們可以使用switch語(yǔ)句為不同種類(lèi)的數(shù)據(jù)創(chuàng)建相同的子類(lèi)，而不是使用switch語(yǔ)句對(duì)不同類(lèi)型的數(shù)據(jù)執(zhí)行相同的操作，然后針對(duì)對(duì)象的類(lèi)型使用不同的方法。

例如我們可能會(huì)寫(xiě)這樣的代碼：

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() 
      } 
    } 
  } 
} 

我們可以這樣重構(gòu)：

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; 
  } 
} 

當(dāng)switch語(yǔ)句很長(zhǎng)時(shí)，應(yīng)該為不同類(lèi)型的對(duì)象定制case塊。

采用空對(duì)象

如果我們重復(fù)檢查null或undefined，則可以定義一個(gè)代表該類(lèi)的null或undefined版本的子類(lèi)，然后使用它。

例如我們可能會(huì)寫(xiě)這樣的代碼：

class Person { 
  //... 
} 

我們可以這樣重構(gòu)：

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

然后，我們將Person設(shè)置為null或undefined 的對(duì)象屬性，而不是將其設(shè)置為NullPerson實(shí)例。

這樣就無(wú)需使用條件檢查這些值。

John Au-Yeung 來(lái)源：medium 譯者：前端小智

原文：https://levelup.gitconnected.com/javascript-refactoring-conditionals-6d74a1138c96

本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 大遷世界公眾號(hào)。