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。


See also