JavaScript中的條件表達(dá)式的應(yīng)用

這篇文章運(yùn)用簡單易懂的例子給大家介紹JavaScript中的條件表達(dá)式的應(yīng)用，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

JavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。 

分解條件表達(dá)式

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

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

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

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

合并條件表達(dá)式

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

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á)式變長，所以我們可以這樣做。

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

如果我們在條件塊中有重復(fù)的表達(dá)式或語句，則可以將它們移出。例如我們可能會(huì)寫這樣的代碼：

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

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

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

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

刪除控制標(biāo)志

如果我們在循環(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)。

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

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

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

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

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

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語句很長時(shí)，應(yīng)該為不同類型的對象定制case塊。

采用空對象

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

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

class Person {
  //...
}

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

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

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

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

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

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

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

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

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

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

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

if (!foo) {
  return;
}

和

if (!bar) {
  return;
}

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

關(guān)于JavaScript中的條件表達(dá)式的應(yīng)用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。