NUK JavaScript Lesson 03：運算子、if-else 條件式

發表於 分類於

到了第三篇，我們要介紹運算子以及條件式，之後會進入物件與陣列，一步一步學習 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); // NaN

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);

// 使用 typeof("內容") 來判斷型別
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'); // false
console.log(a == 'true'); // 還是 false

if-else

if-else 條件式的意思就是「如果達成條件就做 A，否則就做 B」

第一句寫假設句 (是或否)
第二句寫，如果答案為是
第三句寫，如果答案為否

舉例：
假如我中大樂透 2 億
有中的話我就買豪宅
沒中的話我就吃路邊攤

我有沒有 60 公斤
有，就繼續減重
沒有，那我就吃多一點胖回去

我的數學分數有沒有比某某某還好
有，應該是某某某太廢
沒有，只考七級分還想比誰高

小明他家有沒有漂亮阿姨
有的話，每天跟小明一起念書
沒有的話，小明自己讀書

1
2
3
4
5
6
7
// let hasBeauty = true;

if(hasBeauty){
    console.log('每天跟小明一起念書')
}else{
    console.log('小明自己讀書');
}

結合函式與 if-else 的練習

題目

1
2
3
4
5
checkWinning('廖洧杰', '20282028');
// console.log("廖洧杰，你沒有中獎")

checkWinning('李小名', '21178989');
// console.log("李小名，恭喜中獎！")

作法

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');
// console.log("廖洧杰，你沒有中獎")

checkWinning('李小名', '21178989');
// console.log("李小名，恭喜中獎！")

邏輯運算子

  • &&：都需要符合
  • ||：一個符合即可

一樣我們直接看例子來理解觀念：

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

實例練習

賣場抽獎條件
一個賣場設計一個抽獎活動，條件必須「同時滿足」以下兩項才能抽獎：

  • 他是會員
  • 他購買的總價必須超過 300 元

賣場品項
賣場只有兩個品項，一個是蘋果單價為 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); // 是會員且超過 300，true
checkLottery(false, 5, 10); // 不是會員就直接 false 了
checkLottery(true, 10, 10); // 雖然是會員但是消費剛好 300，false

小駝峰式寫法

上面我們變數都命名成 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 宣告，減少重複性，也能增加可讀性！

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。