Web開發學習筆記04—條件運算式(Conditional Statements)

if

如果條件(condition)為true則執行大括號裡的語句(statements)，如果條件為false則跳過if區塊(block)。

if (condition){
 statement
}

if…else

如果條件(condition)為true則執行statement1，如果條件(condition)為false則執行statement2。

if (condition) {
 statement1;
} else { 
 statement2; 
}

先宣告變數weather為sunny(String)，如果weather等於sunny，則印出“It’s nice weather today!”，如果weather不等於sunny，則印出“It’s bad weather today!”

var weather = "sunny";
if (weather === "sunny") {
  console.log("It's nice weather today!"); 
} else {
console.log("It's bad weather today!");
}
//It's nice weather today!

else if

程式的執行方式是從上到下、由左到右，因此條件運算式也會根據此方式依次執行，當第一個條件成立為true，就會執行這區塊的語句；而如果條件皆不成立(false)則會執行最後的else區塊。

if (condition1) {
 statement1;
} else if (condition2) {
 statement2; 
} else if (condition3) {
 statement3; 
} else if (condition4) {
 statement4; 
} else {
 statement5; 
}

Guessing Game

運用if與else建立遊戲邏輯，假設輸入數字100(guessNumber等於10)，先執行第一條條件運算式，發現guessNumber不等於10(false)，則程式會跳過此區域，繼續執行第二條運算式，發現guessNumber大於10成立(true)，則跳出警告”TOO HIGH!”。繼續舉例，假如輸入的guessNumber不是數字，而是隨便輸入的英文，執行後發現第一條到第三條的條件皆不符合(false)，則最後會執行else區塊，因會跳出警告”Wrong!!!!!”。

var secretNumber = 10;
var guessNumber = Number(prompt("Guess a number!"));
if (guessNumber === 10) {
 alert("YOU GOT IT RIGHT!");
} else if (guessNumber > 10) {
 alert("TOO HIGH!"); 
} else if (guessNumber < 10) {
 alert("TOO LOW!"); 
} else {
 alert("Wrong!!!!!");
}

省略大括號{ }

如果條件運算式區塊中只含有一個語句(statement)，就能夠省略大括號，例如：

if (age > 0) console.log("Your age is " + age);
else console.log("Please enter a valid number");

這是可以運作的代碼，但不建議省略大括號，以免造成混亂。

參考資料：
if…else - MDN Web Docs
JavaScript 的 if 條件式 - W3HexSchool
JavaScript if…else 語法 - Fooish 程式技術