05 if 判斷式

第 12 屆 iThome 鐵人賽

DAY 5

自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列第 5 篇

12th鐵人賽 javascript if 判斷式

我是圈圈

2020-09-05 11:28:20

1981 瀏覽

判斷式基本介紹：肥胖提示冰箱

歡迎回到 JS 沙漠，今天我們要講的是 if 判斷式。 if 判斷式構架很簡單：如果符合某判斷(true)，就執行某些行為。

if(判斷){
    執行;
};

例如冰箱打開之前，如果體重大於八十公斤，會跳出不要再吃了！我們可以這樣寫：

let weight = prompt("體重幾公斤？",""); 
if (weight>80){
    alert("不要再吃了！");
};

在這邊使用了 prompt 和 alert ，這兩支程式功能類似，都會談出一個視窗給使用者，只是 prompt 多了額外的地方讓使用者輸入。

上面的程式看在電腦眼中是這樣的：先跳出體重幾公斤？的訊息，預留一個空白的 "" 位置讓人輸入。如果輸入的體重大於八十，跳出警示。不妨跟著我一起將這樣的程式打打看，看是否真的出現效果了呢？

你也許會接著發現，如果我輸八十跟八十以下的公斤數，就什麼都不會出現了欸！別擔心，我們可以使用 else 來繼續給電腦指令。使用方式很簡單，接著 if 判斷式後面的{}繼續寫就可以了。

let weight = prompt("體重幾公斤？",""); 
if (weight>80){
    alert("不要再吃了！");
}else{
    alert("冰箱將在三秒後開啟");
};

如果輸的是大於八十，跳不要再吃了，不然就跳冰箱將在三秒後開啟。

但這樣寫完，又有一個新的 bug 了！如果他什麼都沒填，就按下一步怎麼辦？或者是如果我想讓不同公斤，跳出不同的訊息，該怎麼做呢？

很簡單，這時就派出 else if 吧！使用方式完全一樣，是接在 if 判斷式的 {} 屁股後面。

let weight = prompt("體重幾公斤？",""); 
if (weight>80){
  alert("不要再吃了！");
}else if (weight>60 && weight<=80){
  alert("吃完記得跑三圈啊！");
}else if (weight<=60 && weight>0){
  alert("冰箱將在三秒後開啟");
}else{
  alert("冰箱上鎖半小時！誰叫你要亂輸！");
};

以上這種判斷好幾次的寫法，叫做多重判斷。碰到要說介於某個數字間的判斷，例如體重必須小於等於八十，但又大於六十，你可以用 && 來串接。不認識 && 記得回去看前幾天的文章喔！

判斷式與指派運算子：剩下幾個贈品

還記得指派運算子嗎？其實 if 可以跟指派運算子搭在一起玩喔！那麼廢話不多說，讓我們直接進入例題！

老闆手上有 3 個贈品，消費滿 100 元就送對方贈品，現在來了兩個客人，一個買了 150 ，一個買了 98 元，老闆還剩幾個贈品？這個式子要怎樣請電腦幫我們計算，並秀出贈品還剩XX個呢？

完成了嗎？下好離手我要公布囉！

let gift = 3; //贈品一開始有三個
const customerA = 150; //A客人買150元
const customerB = 98; //B客人買98元

if (customerA >= 100){ //如果A客人買的金額超過100
  gift -= 1; //贈品數量減一
};

if (customerB >= 100){ //同上
  gift -= 1;
};

console.log("贈品還剩"+gift+"個");

上面的例子中是遞減一的狀況，可能對指派運算子的感受還不夠深。讓我們來寫一道進階題！一個漢堡 10 元，一包薯條 20 元，消費滿 100 元就送一個贈品， 200 送兩個，依此類推。如果老闆現在有 5 個贈品，客人團購買了 15 個漢堡 20 包薯條，客人離開後老闆剩幾個贈品呢？請讓電腦秀出剩下幾個贈品，如果贈品不夠，請秀出贈品數量不夠的字樣。

很直觀的，我們可以得到下面的答案：

let gift = 5;
const hamburgerPrice = 10; 
const friesPrice = 20; 
let hamburgerNum = 15; 
let friesNum = 20; 

let totalPrice = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum); //總共付150+400=550

if (totalPrice >= 100){
  gift -= totalPrice/100; //等於 gift = gift - totalPrice/100
}else{
  console.log("未達成送贈品條件");
};

if (gift>0){ //如果剩的禮物大於0
  console.log("贈品還剩"+gift+"個"); //贈品還剩X個
}else{
  console.log("贈品不夠"); //不然顯示贈品不夠
};

但是注意了，如果我們把購買的數量減少，就會發現上面的程式有個 bug ：直接把共花多少錢除以 100 可能會有餘數的問題，但贈品數量是不可能剩小數點的。因此這邊可以使用 Math.floor() 來取出小於等於所給的數字的最大整數。太像繞口令？白話點舉例，如果我給他 5.5 這數字，透過 Math.floor() 他會變成 5 。寫法如下：

console.log(Math.floor(5.5)); //印出5

讓我們來改良上面的程式吧！假設顧客只買了 15 個漢堡， 10 包薯條，會剩幾個贈品？

let gift = 5;
const hamburgerPrice = 10; 
const friesPrice = 20; 
let hamburgerNum = 15; 
let friesNum = 10; 

let totalPrice = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum); //總共付150+200=350

if (totalPrice >= 100){
  gift -= Math.floor(totalPrice/100); //總共會拿3個贈品，但這裡會算出3.5，所以利用 Math.floor 取出小於該數字的最大整數：3
}else{
  console.log("未達成送贈品條件");
};

if (gift>0){ //如果剩的禮物大於0
  console.log("贈品還剩"+gift+"個"); //贈品還剩X個
}else{
  console.log("贈品不夠"); //不然顯示贈品不夠
};

那麼我們今天就講到這邊，希望對你有幫助！