JavaScript 的 if 條件判斷式

網路上看到這篇 Two Things About Conditionals in JavaScript,比較另我訝異的是第一點 One: There is no else if,該作者提到在 JavaScript 的寫法裡面沒有 else if,底下直接看例子:

function saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else if ( msg === 'Yo' ) {
    console.log('Yo dawg');
  }
}

上面是我們一般在寫 JS 會用到的條件子句,但是實際上 JS 寫的就是

function saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else {
    if ( msg === 'Yo' ) {
      console.log('Yo dawg');
    }
  }
}

作者說原因是 That’s because there is no else if in JavaScript,網路上似乎查不到有人這樣說?另外不建議底下寫法:

if ( foo ) bar()

此寫法不易閱讀,但是如果你是寫 CoffeeScript,你會發現轉成 JS 的語法就是上面那樣。結論就是在 JS 裡面還是一樣可以寫 else if,只是大家必需要瞭解 JS 運作方式就會如上面所提。第二點 “Two: return Means Never Having to Say else“,在 function 裡面如果使用 return 的話,就不需要有 else 語法,舉例:

function howBig( num ) {
  if ( num < 10 ) {
    return 'small';
  } else if ( num >= 10 && num < 100 ) {
    return 'medium';
  } else if ( num >= 100 ) {
    return 'big';
  }
}

你可以在簡化寫成:

function howBig( num ) {
  if ( num < 10 ) {
    return 'small';
  }

  if ( num < 100 ) {
    return 'medium';
  }

  if ( num >= 100 ) {
    return 'big';
  }
}

有看到嗎?前兩個條件如果都未符合,最後就可以直接 return 即可

function howBig( num ) {
  if ( num < 10 ) {
    return 'small';
  }

  if ( num < 100 ) {
    return 'medium';
  }

  return 'big';
}

這樣是不是在閱讀上更方便了呢?這點比較是在講 Coding Style。

  • 第一點也是 coding style 問題,作者高興就好,執行一模一樣,要吵就會陷入分號之戰了。

    第二點叫做「return early」,敝專案實作的經驗是有時會讓程式更易讀,有時候更糟,就看情況,一定要用哪種的規則不合理。

  • appleboy48

    樓上說的沒錯,都是 coding style 的問題而已,其實作者也說到原本的寫法都沒有錯。