JavaScript中優化條件表達式相關的重構思路是怎樣的

JavaScript中優化條件表達式相關的重構思路是怎樣的，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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實例。

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

看完上述內容，你們掌握JavaScript中優化條件表達式相關的重構思路是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！