iT邦幫忙

2025 iThome 鐵人賽

DAY 27
0
Modern Web

網頁技術探索:30天的前端學習系列 第 27

DAY27 控制判斷(運算子) =

  • 分享至 

  • xImage
  •  

運算子

比較運算子 ==

用來比較 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 同時具有二元運算子及一元運算子, 以及一種特殊的 三元運算子,也就是 條件運算子。 一個二元運算子需要具備兩個運算元, 一個在運算元之前,一個在運算元之後:

運算元1 運算子 運算元2
例如, 3+4 或 x*y.

一個 一元運算子 需要一個運算元, 位於運算子之前或之後:

運算子 運算元

運算元 運算子
例如, x++ 或 ++x.

一元運算子

一元運算 是只需要一個運算元的運算,大概單字形態比較多。

delete

delete 運算子會刪除物件,物件的性質,或是陣列中指定 index 的物件。 語法是:

delete 物件名稱;
delete 物件名稱.性質;
delete 物件名稱[索引];
delete 性質; // 只有在 with 陳述句中可以使用

typeof

能以下列任一方式使用:

typeof 運算元
typeof (運算元)

typeof 運算子會回傳代表運算元類型的字串。運算元能是字串,變數,關鍵字,或是會回傳型態的物件。括號可加可不加。

三元運算子

JavaScript 中唯一需要三個運算元的運算子。 這個運算子接受兩個運算元作為值且一個運算元作為條件。 語法是:

條件 ? 值1 : 值2
如果判斷條件為 true,運算子回傳 值1, false 則回傳 值2。

例如:

let age = 19;
function status(age) {
  return (age >= 18) ? '大人' : '小孩';
}
console.log(status()); //小孩

上一篇
DAY26 Object & Array 物件與陣列的綜合應用
下一篇
DAY28 JS 控制判斷
系列文
網頁技術探索:30天的前端學習28
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言