iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Modern Web

30天入門JavaScript系列 第 5

【Day 5】if、switch判斷式

  • 分享至 

  • xImage
  •  

第5天了,JS基礎相關的東西大概10幾天可以寫完,在那之後要寫甚麼呢(煩惱)

if判斷式

if(條件){
//程式碼
}

當括號內的條件成立(為true)時,大括號內的程式碼會被執行。
條件通常會是判斷式,其實放任何值都沒關係,JS會強制轉型成布林值

Truthy跟Falsy

指的是當值被轉換成布林值時會是true還是false
除了少部分值以外幾乎都是Truthy(會被轉成true)

下面列出Falsy的值 除了這些以外都是Truthy

  • false
  • 0
  • -0
  • NaN
  • "" (完全沒有內容的空字串,就算只有一個空格也是Truthy)
  • undefined
  • null

簡單例子


let numA = 5;
let numB = 6;

if (numA < numB) {
  console.log('A小於B'); //印出 A小於B
}
if (numA > numB) {
  console.log('A大於B'); //條件不成立 不執行
}
if (numA) {
  console.log('A是Truthy'); // 印出A是Truthy
}

if...else

當條件不成立時,會執行else區塊的程式碼

let numA = 5;
let numB = 6;
if (numA === numB) {
 console.log('A等於B'); //不成立 不印
} else {
 console.log('A不等於B'); //印出 A不等於B
}

另外還有else if,當第一個if判斷不成立時可以再拿新的條件來作判斷

let numA = 5;
let numB = 6;

if (numA === numB) {
 console.log('A等於B'); //不成立 不印
} else if (numA > numB) {
 console.log('A大於B'); //不成立 不印
} else {
 console.log('A小於B'); //印出 A小於B

三元運算子

if else的精簡版

//  語法:  條件 ?  成立執行這邊 :不成立執行這邊

//例子
let age = 25;
console.log(age >= 18 ? '歡迎' : '未成年不得觀看'); // 印出 歡迎

switch

假如要作一個依動物種類發出叫聲的判斷

用if else的話可能會作成這樣

if (animal === '貓') {
  console.log('喵');
} else if (animal === '狗') {
  console.log('汪');
} else if (animal === '雞') {
  console.log('咕');
} else if (animal === '羊') {
  console.log('咩');
  //以下省略一堆動物
} else {
  console.log('無此動物');
}

會發現用if else比較值(尤其是字串)時重複的程式碼會很多

這時候可以改用switch判斷是式來實作

語法

switch (值) {
  case 值A:
   值=值A時執行此行
    break;
  case 值B:
   值=值B時執行此行
    break;
  case 值C:
   值=值C時執行此行
    break;
  case 值D:
   值=值D時執行此行
    break;
    default:
    跟以上值都不同,執行此行
}

//把上面的實作改成用switch

switch (animal) {
  case '貓':
    console.log('喵');
    break;
  case '狗':
    console.log('汪');
    break;
  case '雞':
    console.log('咕');
    break;
  case '羊':
    console.log('咩');
    break;
  default:
    console.log('無此動物');
}

記得在每個case後加上break來退出switch判斷式,
如果沒有break,遇到符合的case後下面的程式碼都會被執行。

let animal = '狗';
//這是錯誤範例
switch (animal) {
  case '貓':
    console.log('喵');
  case '狗':
    console.log('汪');   //汪
  case '雞':
    console.log('咕');   //咕
  case '羊':
    console.log('咩');   //咩
  default:
    console.log('無此動物');  //無此動物
}

最後是今天的範例,用switch判斷來判斷BMI值是否過胖

let BMI = 34;

switch (true) {
  case BMI >= 35:  
    console.log('重度肥胖');
    break;
  case BMI < 35 && BMI >= 30:
    console.log('中度肥胖');
    break;
  case BMI < 30 && BMI >= 27:
    console.log('輕度肥胖');
    break;
  case BMI < 27 && BMI >= 24:
    console.log('過重');
    break;
  case BMI < 24 && BMI >= 18.5:
    console.log('正常');
    break;
  default:
    console.log('過輕');
}



上一篇
【Day 4】數字型別跟Math方法
下一篇
【Day 6】陣列(一):陣列 array簡介
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言