iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
Modern Web

30天前端網頁技術超入門介紹系列 第 13

Day13. JavaScript 基礎常識介紹(五) - 控制判斷(if...else、switch)

  • 分享至 

  • xImage
  •  

控制判斷,常聽到的說法是 if 判斷。不過還有另外一個 switch 判斷。

if 判斷最基本的寫法

if(條件式){ 
    // 符合條件時執行 
};

假如未符合條件式時執行 else

if(條件式){
    // 符合條件時執行 
}
else {
    // 未符合時執行
}

多個判斷時的寫法

if(條件式){
    // 符合條件時執行 
}
else if(條件式) {
    // 符合條件時執行
}
else {
    // 未符合時執行
}

else if 可以用多個,看你有多少條件想要去判斷。

三原運算子

通常用來表示一行的判斷。以 ? 及 : 來做為區隔的符號。

條件式 ? 符合條件時執行 : 未符合條件時執行

e.g.

var a = 1;
a === 1 ? console.log('對喔') : console.log('不對喔')

switch

https://ithelp.ithome.com.tw/upload/images/20200918/201190514734mQXNUS.png
不知道你有沒有寫過這麼一長串的判斷呢?
其實這很消耗效能,因為 if 判斷會從頭到尾都運算一次才執行。

用 switch 就可以減少效能的損失。

寫法如下

switch(判斷式、運算式、某值或變數){
    case 值:
        case 後面的「值」符合括號內的「值」就會觸發;
        break;
    ...可多個 case 來增加判斷
}

e.g.

var a = 1;
switch(a){
    case 1:
        console.log('一');
        break;
    case 2:
        console.log('二');
        break;
}

break 為停止點,找到符合的條件時就會觸發 break 讓整個判斷停止。假如沒有 break 的話就會把全部判斷全部判斷一次。


switch 會用到的地方很多,但是剛開始學的時候會覺得 else if 比較直覺而少用 switch...
所以請大家要多多練習使用 switch 喔。


上一篇
Day12. JavaScript 基礎常識介紹(四) - 物件
下一篇
Day14. JavaScript 基礎常識介紹(六) - 迴圈
系列文
30天前端網頁技術超入門介紹30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言