if...else

当条件成立的时候执行 if 内的陈述式，不成立时则执行else的陈述式。

语法

if (条件式) {
    //条件成立时执行内容
}
else {
    //否则执行此区块内容(else也可不写，只单独用if)
}

若有多个判断条件，可用else if 来增加条件:

if (条件式) {
    //条件成立时执行内容
}

else if (条件式2) {
    //条件式2成立时执行内容
}

else if (条件式3) {
    //条件3式成立时执行内容
}

else {
    //以上条件都不成立时，则执行此区块内容
}

巢状回圈

在符合某个判断式的情况下，里面再增加另一个if...else语句，如下:

语法

if (条件式) {
    //条件成立时执行内容
}

else if (条件式2) {
    //条件式2成立时执行内容
    
    if (条件式2-1)
        //条件式2-1成立时执行内容
    else {
        //否则执行此区块内容
    }
}

else if (条件式3) {
    //条件3式成立时执行内容
}

else {
    //以上条件都不成立时，则执行此区块内容
}

范例
以下范例，有点像我们在玩的终极密码的观念，假设要猜一个1~1000的数字，就可以用以下巢状回圈来缩小范围，再去猜该数字是多少。

• 这边要注意的是:

如果要使用两个判断条件要加上逻辑运算子 "&&" 或 "||":
Ex.
else if  (500 < num && num <= 750)  {
   console.log('num: 500 ~ 750');
}

X 不能写成:
Ex.
else if   (500 < num <= 750)   {
     console.log('num: 500 ~ 750');
}

let num = 355;  //假如设定的数字为355

if (num <= 250) {
    console.log('num: <= 250'); 
}
else if ( 250 < num && num <= 500) {     /*这里其实也可以省略 &&左边的判断式，改为(num <= 500)，
                                           因为第一个判断式已先过滤掉小於250的数字，
                                           代表到了第二个判断式一定会大於250*/
    if (num <= 400) {
        console.log('num: 250 ~ 400');
    }
    else {
        console.log('num: 401~500')
    }
}

else if (500 < num && num <= 750) {     /*可省略 &&左边的判断式，改为(num <= 750)，
                                          原因同上*/
    console.log('num: 500 ~ 750');
}

else {
    console.log('num: 750 ~ 1000');
}

switch...case

透过 if...else，可以判断很多不同的状态。但如果判断式只有一个变数或者是简单的逻辑资讯，那就可以透过数值切换 (switch) 的方式来处理，让整体程序看起来更简洁。

switch 语句会比对"表达式"里的值是否符合 case 条件，然後执行跟这个条件符合的陈述式。

语法

switch(expression){
case value1 :
  //当 expression 的值符合 value1时，要执行的陈述句
  break;   // 每个 case後方都会补上 break; 来阻止已完成的区块在後方继续执行
case value2 :
  //当 expression 的值符合 value2时，要执行的陈述句
  break;
default:
  //当 expression 的值都不符合上述条件时，要执行的陈述句
  break;
}

范例

• 用一个常见的例子-以月份判断季节，如果用if..else的方式，以最精简的方式大概会是这样:

  var month = 10;
  var count = Math.ceil(month/3)
  
  if (count === 1  ) {
      console.log('春天');
  }
  
  else if (count === 2  ) {
      console.log('夏天');
  }
  
  else if (count === 3  ) {
      console.log('秋天');
  }
  
  else if (count === 4  ) {
      console.log('冬天');
  }
  
  else {
    console.log('月份错误');
  }
  

• 但若用switch的方法，可以这样写:
   看起来比较简洁，同时也比较好维护，效能也比较好。

  var month = 10;
  
  switch ( Math.ceil(month/3) ){
    case 1:
      console.log('春天');
      break;
  
    case 2:
      console.log('夏天');
      break;
  
    case 3:
      console.log('秋天');
      break;
  
    case 4:
      console.log('冬天');
      break;
  
    default:
      console.log('月份错误');
      break;
  }
  

总结

if else浏览器在渲染或编译的时候，会全部跑一次，所以在编译的速度和效能上，尤其条件很多的情况下，会比switch效能差。因为switch只会检视case有无符合，才会去跑程序码，而if else会全部跑一次。

• 若是判断的值可以计算，或是介於一个区间，可使用 大於、小於 这类运算子，就用 if else。

• 若是判断的值可以用比对的方式来看相同不相同(特定明确的值)，就像是字串一样，那就用 switch 。

 
资料来源:
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/switch
http://dic.vbird.tw/javascript/unit04.php#4.3
https://ithelp.ithome.com.tw/articles/10191453
https://w3c.hexschool.com/blog/a7d3382b