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