JS 筆記 - 控制判斷 (比較運算子、邏輯運算子)

此次內容是 JavaScript 的控制判斷，比較運算子跟邏輯運算子的筆記。
用途會是在驗證資料是否有與原本設定的條件相同，例如：今天填寫一個表單，如果勾選「是」，就可以繼續往下填寫之類的控制判斷。

運算子

比較運算子 `==`

用來比較 a 與 b 是否為正確或不正確，例如：設定兩個變數比較他們的關係。
會發現有兩個地方不同， = 跟 ==， = 的用法是給予變數一個值； == 他是用比較兩個數值之間的關係是否為 true 還是 false。

然後有兩種寫法：

== 等於

!== 不等於

簡單的範例：

1
2
3

var a = 1;
var b = 1;
a == b; //結果會得到 true

反之 !==

1
2
3

var a = 1;
var b = 1;
a !== b; //結果會得到 false

加上情境，倘若今天一間餐廳有當月壽星禮，可以這樣做控制判斷

var myBirthdayMonth = 3; //我的生日月份
var nowMonth = 12; //本月壽星
var birthdayMonthCheck = myBirthdayMonth == nowMonth; //判斷我是否為本月壽星
document.getElementById("birthdayId").textContent = birthdayMonthCheck; //本月為 12 月，我是 3 月壽星，故結果會得到 false

嚴謹模式 `===`

因為 == 比較不嚴謹，如果有些資料要確認型別，就會用到 ===，假如下方程式碼：

1 2	1 == "1"; //會得到結果是 true，可是一邊是數字，另一邊是字串，資料型別不同啊?

因為 == 會在比較時發現值如果數字跟字串長一樣的時候，會自動轉型，被比較成一樣，所以如果剛好遇到類似的數值跟字串內容會一樣時，為了讓資料更明確的比較，就會用到嚴謹模式 ===，例如：

1 2	1 === "1"; //得到的結果就會是 false

大於 `>`、小於 `<`、大於等於 `>=`、小於等於 `=>`

用法就跟字面一樣，可以自己玩一下，例如：

3 > 2;
7 < 8;
13 >= 13;
15 <= 21;

以上結果都會得到 true ~~(廢話)~~

邏輯運算式 && (and)、|| (or)、! (not)

要滿足預設的兩個條件要用 and，這樣寫： &&，只要滿足其中一個條件用 or ，這樣寫： ||，如果要表示「不是」則是用 !。

&& 所有條件皆符合

以搭飛機為例，出入境都需要機票跟護照的話，程式碼如下：

var passport = true; //有帶護照
var ticket = true; //有帶機票
var pass = passport == true && ticket == true; // 出入境條件
console.log(pass); // 結果會是 true

如果沒有機票的話，程式碼如下：

var passport = true; //有帶護照
var ticket = false; //沒帶機票
var pass = passport == true && ticket == true; // 出入境條件
console.log(pass); // 結果會是 false

在條件上可以自行定義多寡，但建議一到兩個就好，最多三個，不然程式碼會太長。

|| 符合一項條件

以餐廳優惠為例，餐廳很多都有當月壽星禮，程式碼如下：

剛好是當月壽星：

//餐廳折扣優惠
var myBirthdMonth = true; //當月壽星禮
var fbTag = true; //臉書打卡
var discount = myBirthdMonth == true || fbTag == true; // 符合折扣條件
console.log(discount); // 結果會是 true

! 不是

Not 會把原本的意思改成不是的意思，例如：

1
2
3

2 < 3; //true

!(2 < 3); // false

運算子

比較運算子 ==

嚴謹模式 ===

大於 >、小於 <、大於等於 >=、小於等於 =>