NUK JavaScript #3:運算子、if-else 條件式
到了第三篇,我們要介紹運算子以及條件式,之後會進入物件與陣列,一步一步學習 JS 的基礎。
比較運算子
- 一個等於 → 賦予
- 兩個等於 → 比較
- 三個等於 → 嚴謹比較模式
- 可使用
typeof("內容")
來判斷型別
以下我們直接用一些範例來說明觀念:
1// 一個等於叫做賦予 2let a = 1; 3a = 'hello'; 4console.log(a); 5 6a = a + 1; 7console.log(a); 8 9a = a * 3; 10console.log(a); // NaN 11 12var b = 3; 13var c = 4; 14console.log(b > c); 15 16// 兩個等於用來比較 17var d = 'hello'; 18var e = 'hello'; 19console.log(d == e); 20 21let f = 2; 22let g = '2'; 23console.log(f == g); 24 25// 三個等於是嚴謹比較模式 26let h = 2; 27let i = '2'; 28console.log(h === i); 29 30// 使用 typeof("內容") 來判斷型別 31let j = true; 32console.log(typeof j); 33
練習到這裡,我們知道雙等於會先轉換型別,三等於是嚴謹比較。
但是!這裡有一個陷阱題,就是布林值。
1let a = true; 2console.log(a == true); 3console.log(a === true); 4console.log(a === 'true'); // false 5console.log(a == 'true'); // 還是 false 6
if-else 條件式
if-else 條件式的意思就是「如果達成條件就做 A,否則就做 B」。
- 第一句:假設句,是或否
- 第二句:如果答案為是
- 第三句:如果答案為否
例如:
小明他家有沒有漂亮阿姨,
有的話,每天跟小明一起念書,
沒有的話,小明自己讀書。
1let hasBeauty = true; 2if (hasBeauty) { 3 console.log('每天跟小明一起念書'); 4} else { 5 console.log('小明自己讀書'); 6} 7
if-else 條件式練習題目
試著做出以下函式:
1checkWinning('廖洧杰', '20282028'); // 廖洧杰,你沒有中獎 2checkWinning('李小名', '21178989'); // 李小名,恭喜中獎! 3
以下是參考作法,使用函式與 if-else 條件式來完成:
1let priceNumber = 21178989; 2 3function checkWinning(name, invoiceNumber) { 4 if (invoiceNumber == priceNumber) { 5 console.log(name + ',恭喜中獎!'); 6 } else { 7 console.log(name + ',你沒有中獎'); 8 } 9} 10
邏輯運算子
- &&:都需要符合
- ||:一個符合即可
一樣我們直接看例子來理解觀念:
1console.log(3 > 2); // true 2console.log(3 > 2 && 2 > 2); // false 3console.log(true == true && 1 === '1'); // false 4console.log('cc' == 'cc' || 1 > 0 || 3 > 2); // true 5 6// 雖然 1 跟 2 錯了,但只要有一個可以滿足就可以了 7console.log(3 === '3' || true == 'true' || 3 > 2); // true 8 9// 因為 1 跟 2 是錯的,&& 只要其中一個錯就是 false 10console.log(3 === '3' && true == 'true' && 3 > 2); // false 11
邏輯運算子練習題目
一個賣場只有兩個品項,一個是蘋果單價為 10 元,另一個是香蕉單價 20 元。
今天要設計一個抽獎活動,條件必須「同時滿足」以下兩項才能抽獎:
- 消費者是會員
- 消費者購買的總價必須超過 300 元
必須用一個函式去計算消費者有沒有滿足條件,第一個參數是他是否為會員,第二個參數是他買了幾顆蘋果,第三個參數是他買了幾條香蕉,若滿足條件就顯示「你有抽獎資格」,若沒滿足則寫「你沒有抽獎資格」。
例如:
1checkLottery(true, 20, 20); // 你有抽獎資格 2checkLottery(false, 5, 10); // 你沒有抽獎資格 3
以下是參考答案:
1let applePrice = 10; 2let bananaPrice = 20; 3 4function checkLottery(isMember, appleNum, bananaNum) { 5 let appleTotal = applePrice * appleNum; 6 let bananaTotal = bananaPrice * bananaNum; 7 let totalPrice = appleTotal + bananaTotal; 8 if (isMember && totalPrice > 300) { 9 console.log('你有抽獎資格'); 10 } else { 11 console.log('你沒有抽獎資格'); 12 } 13} 14 15checkLottery(true, 20, 20); // 是會員且超過 300,true 16checkLottery(false, 5, 10); // 不是會員就直接 false 了 17checkLottery(true, 10, 10); // 雖然是會員但是消費剛好 300,false 18
小駝峰式寫法
上面我們變數都命名成 appleTotal, appleNum 這種形式,例如:
let appleTotal = applePriceappleNum;
let bananaTotal = bananaPricebananaNum;
let totalPrice = appleTotal + bananaTotal;
這個是所謂的小駝峰式寫法,可以增加程式碼的「可讀性」!
作業 - BMI 計算機
上次做過 BMI 計算機了,這次我們根據 BMI 的數值不同,告知目前的 BMI 狀態。
1function bmi(h_num, w_num) { 2 h_num = h_num / 100; // 轉公尺 3 let txt = w_num / (h_num * h_num); 4 5 if (txt < 18.5) { 6 console.log('你目前過輕,你的 BMI 是' + txt); 7 } else if (txt < 24 && txt >= 18.5) { 8 console.log('你目前在正常範圍,你的 BMI 是' + txt); 9 } else if (txt >= 24 && txt < 27) { 10 console.log('你目前過重,你的 BMI 是' + txt); 11 } else if (txt >= 27 && txt < 30) { 12 console.log('你目前輕度肥胖,你的 BMI 是' + txt); 13 } else if (txt >= 30 && txt < 35) { 14 console.log('你目前中度肥胖,你的 BMI 是' + txt); 15 } else if (txt >= 35) { 16 console.log('你目前重度肥胖,你的 BMI 是' + txt); 17 } 18} 19 20bmi(168, 55); 21
最後,這邊我們重複的字串也可以用 let 宣告,減少重複性,也能增加可讀性!
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫