iT邦幫忙

2021 iThome 鐵人賽

DAY 14
1
Modern Web

入門前端技能之旅系列 第 14

Day.14 「基礎打穩了,就能走得更長久~」 —— JavaScript 基礎運算子

  • 分享至 

  • twitterImage
  •  

「讓 Javascript 幫你算數比較~」 —— JavaScript 基礎運算子

學習任何東西,都要把基礎學的扎實,基礎穩了,遇到問題就能迎刃而解。
而學習程式語言的基礎就是數學邏輯,不用到很專精,只要有基礎數學邏輯,多寫多做就能鍛鍊出寫程式邏輯的金魚腦,基礎邏輯打穩了,任何程式語言都有相似的地方,會越學越快,然後發現根本是無底洞,沒有盡頭

算數運算子

就如同我們國小上課一樣,算數就要先從 加、減、乘、除 的基礎開始教起,而運算先後順序就如同我們國中所學的,先乘除後加減有括號先算括號,這對聰明的你來說,實在是小 case!

運算符 說明 運算符 說明
+ 加法 ++ 自增
- 減法 -- 自減
* 乘法 ** 次方
/ 除法 % 餘數

一元運算符

前面變數轉型那一篇有稍微提到使用 + 的一元運算符,來為變數轉型成數字型別
而使用 - 的一元運算符,聰明的你,一定馬上就猜出來,是把型別變成數字型別的相反數
typeof 本身也是一元運算符,是用來判斷型別的。

字串串接

利用 + 運算符,可以進行字串串接,當 + 兩邊其中一邊為字串(string)型態時,Javascript 會自動幫我們把兩邊的轉型成字串型態,並進行串接。

let a = 10;
let b = '10';
let c;
console.log( a + b ); // "1010"
console.log( b + c ); // "10undefined"

自增 與 自減

++-- 可以對自己數字 增加 1減少 1
放在變數前後的位置很重要!
當運算符在前面時 ++a當下為變數更改後的數值,想像已經先 +1
當運算符在後面時 a++當下為變數的原本數值,想像已經先賦值還來不及 +1

let a = 10;
let b = a++; // b = 10
let c = 10;
let d = ++c; // d = 11

console.log(a, b, c, d) // 11, 10, 11, 11

邏輯運算子

運算符 說明 判斷中斷規則 返回值
! 非(not) 返回與原本布林值相反的值
&& 和(and) 如果左側為 false,則不判斷右側值 如果左側為 false,返回左側,反之亦然
∣∣ 或(or) 如果左側為 true,則不判斷右側值 如果左側為 false,返回右側,反之亦然

藉由 Javascript 任何型別都能轉換成布林值,會先轉換成布林值再進行邏輯判斷。
如果是使用 ! 返回的會是布林值,而 &&∣∣ 返回的是原本的值。

let a = 123;
let b = 'abc';
let c = null;
let d;
console.log( a && b ); // "abc"     左側為 ture ,返回右側值
console.log( a || b ); // 123        左側為 ture ,判斷中斷,直接返回左側值
console.log( c && b ); // null       左側為 false,判斷中斷,直接返回左側值
console.log( c || b ); // "abc"      左側為 false,返回右側值
console.log( c && d ); // null       左側為 false,判斷中斷,直接返回左側值
console.log( c || d ); // undefined  左側為 false,返回右側值

賦值運算子

運算符 說明
= 最基本的賦值
+= a = a + 2a += 2 一樣
-= a = a - 2a -= 2 一樣
*= a = a * 2a *= 2 一樣
/= a = a / 2a /= 2 一樣
%= a = a % 2a %= 2 一樣

最基礎的 = 就是賦值語句,把右側的值,賦值給左側的變數。
= 左側添加算術運算子,能有效把原本比較長的運算式簡化。

比較運算子

運算符 說明
> 是否大於
< 是否小於
>= 是否大於等於
<= 是否小於等於
== 是否相等
!= 是否不相等
=== 是否全等
!== 是否不全等

用來進行比較的運算子,就跟數學課的比大小一樣。
比較運算子會對兩側值進行比對,返回的會是布林值。

1 > 2;       // false
1 < 2;       // true
1 <= 1;      // true

== 相等 與 === 全等 的差別

簡單來說,== 比較時 Javascript 會自動幫你轉型進行比對,而 === 則是進行嚴格比對,不會自動轉型。

1 == "1";    // true
1 === "1";   // false
1 != "1";    // false
1 !== "1";   // true
false == 0;  // true

比較運算子中的特例! NaN

在所有型別中,數字型別的 NaN 非常特別,NaN 不管跟誰比對,都是回傳 false,包括他跟自己比對也是。

NaN == NaN;  // false
NaN != NaN;  // true

總結

一開始我也以為邏輯運算子返回的都是布林值,但實際返回的並不一定是布林值,因為這個特性,讓我們在撰寫 Javascript 會更加彈性好運用來取得我們所想要的值。
我們現在已學會了基本的宣告變數基礎型別,也學會了基礎的運算子,接著我們就能利用目前所學的東西,來學習如何讓程式語言幫我進行條件判斷!下一個章節就來介紹條件判斷式

參考資料


上一篇
Day.13 「初步學習 Javascript 基礎篇」 —— Javascript 宣告變數 與 基本型別
下一篇
Day.15 「條件設定好~讓程式判斷!」 —— JavaScript 條件判斷式
系列文
入門前端技能之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言