iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

JavaScript 從零開始系列 第 17

JavaScript 從零開始 - Day17 - 控制判斷 (比較運算子、邏輯運算子)

  • 分享至 

  • xImage
  •  

JavaScript Note

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


運算子

比較運算子 ==

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

然後有兩種寫法:

== 等於

!== 不等於

簡單的範例:

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

反之 !==

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 == "1";
//會得到結果是 true,可是一邊是數字,另一邊是字串,資料型別不同啊?

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

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 會把原本的意思改成不是的意思,例如:

2 < 3; //true

!(2 < 3); // false

上一篇
JavaScript 從零開始 - Day16 - Object & Array 物件與陣列的綜合應用
下一篇
JavaScript 從零開始 - Day18 - 運算子
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言