Johnson Mao

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

2021年9月23日

「基礎打穩了,就能走得更長久~」 —— 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 會更加彈性好運用來取得我們所想要的值。 我們現在已學會了基本的宣告變數基礎型別,也學會了基礎的運算子,接著我們就能利用目前所學的東西,來學習如何讓程式語言幫我進行條件判斷!下一個章節就來介紹條件判斷式

#參考資料

回首頁