條件式就是小學常寫的造樣造句:如果...就(否則)...的概念。
這邊會介紹幾種常用的條件式語句 if、三元運算子和 switch。
if(條件){符合條件(true)時要執行的動作}
if ( 3 > 2) {
console.log("3 > 2"); // 3 > 2
}
因為 3 > 2 是 true,所以會執行大括號中的動作,印出 3 > 2
if(條件){
符合條件(true)時執行的動作;
}else{
不符合條件(false)時執行的動作;
}
例如:
let grade = 40;
if(grade >= 60){
console.log("恭喜通過");
}else{
console.log("你要加油");
}
上面的例子因為 grade = 40,經過 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)就執行 ?
後的動作,否則執行 :
後的動作。?
後的動作,印出 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 (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