iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

Be friend with JavaScript系列 第 3

Day 3 - 條件式

  • 分享至 

  • xImage
  •  

條件式就是小學常寫的造樣造句:如果...就(否則)...的概念。
這邊會介紹幾種常用的條件式語句 if、三元運算子和 switch。

  • If statement and condition
  1. If
    用法為 if(條件){符合條件(true)時要執行的動作}
    例如:
if ( 3 > 2) {
  console.log("3 > 2"); // 3 > 2
}

因為 3 > 2 是 true,所以會執行大括號中的動作,印出 3 > 2

  1. If...else...
if(條件){
    符合條件(true)時執行的動作;
}else{
    不符合條件(false)時執行的動作;
}

例如:

let grade = 40;
if(grade >= 60){
  console.log("恭喜通過");
}else{
  console.log("你要加油");
}

上面的例子因為 grade = 40,經過 if 裡條件的時候不符合,所以會跳過,繼續往下執行 else 裡的動作,結果會顯示你要加油。

  1. If...else if...else...
    用於多個條件的情況
    使用方式為:
if(條件 1){
    符合條件 1 時要做的事
}else if(條件 2,3,4...){
    符合條件 2 or 3 or 4 or ... 時要做的事
}else{
    都不符合前面的幾個條件時,就執行 else 裡面的動作;
}

例如:

let age = 20;
if(age >= 65){
  console.log("請購買敬老票");
}else if(age >= 18){
  console.log("請購買成人票");
}else if(age >= 8){
  console.log("請購買兒童票");
}else{
  console.log("免費入場");
}

上面的例子,因為 age = 20,符合 age >= 18 這個條件,所以結果會印出請購買成人票。

  • 三元運算子(條件運算子)
    使用 ?:,符合條件(true)就執行 ? 後的動作,否則執行 : 後的動作。
    例如:
    如果 >= 18 歲的話可以騎機車,否則就要騎腳踏車,下面的例子 myAge = 23,符合條件 >= 18,所以會執行 ? 後的動作,印出 Scooter。
let myAge = 23;
let age = (myAge >= 18) ? "Scooter" : "Bike";
console.log(age); // Scooter

把上面 if else 的例子改成三元運算子,結果如下:
grade = 40 沒有符合條件 >= 60,所以會執行 : 後的動作,印出你要加油。

let grade = 40;
let result = (grade >= 60) ? "恭喜通過" : "你要加油";
console.log(result); // 你要加油

再舉個例子,將下面 if...else...的程式碼改寫成三元運算子

let age = 18;
let price;
if (age < 18) {
  price = 100;
} else if (age < 60) {
  price = 150;
} else {
  price = 75;
}
console.log(price); // 150

改成三元運算子的寫法如下:

let age = 18;
let price = (age < 18) ? 100 : (age < 60) ? 150 :75;
console.log(price); // 150
  • switch
    switch 語句會比對()裡的值是否符合 case 條件,如果符合某一 case 條件就執行這個條件對應的動作,執行完後會 break 表示結束,如果 case 的條件都不符合,就會執行 dafault 後面的動作。
switch (expression) {
  case value1:
        //當 expression 的值符合 value1
        //要執行的陳述句
    break;
  case value2:
        //當 expression 的值符合 value2
        //要執行的陳述句
    break;
  ...
  case valueN:
        //當 expression 的值符合 valueN
        //要執行的陳述句
    break;
  default:
        //當 expression 的值都不符合上述條件
        //要執行的陳述句
    break;
}

例如:

let month = "9";
switch (month) {
  case "1":
    console.log("1月");
    break;
  case "2":
    console.log("2月");
    break;
  case "3":
    console.log("3月");
    break;
  case "4":
    console.log("4月");
    break;
  case "5":
    console.log("5月");
    break;
  case "6":
    console.log("6月");
    break;
  case "7":
    console.log("7月");
    break;
  case "8":
    console.log("8月");
    break;
  case "9":
    console.log("9月");
    break;
  case "10":
    console.log("10月");
    break;
  case "11":
    console.log("11月");
    break;
  case "12":
    console.log("12月");
    break;
  default:
    console.log("無法判斷");
    break;
}

month = 9,符合 case "9",所以結果會印出 9 月。

參考資料:
MDN - Conditional (ternary) operator
How To Write Conditional Statements in JavaScript
MDN - switch


上一篇
Day 2 - Operators
下一篇
Day 4 - Array
系列文
Be friend with JavaScript39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言