iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 3

03 運算子

前言

昨天的題目大家寫得如何?在下面的題目中,會出現正確答案還是錯誤訊息呢?

//習題一
let q1 = 10;
q1= 20;

//習題二
let q2 = 10;
let q2 = 20;

//習題三
const q3 = 10;
q3=20;

習題一會出現正確答案,最後印出的 q1 會是 20。習題二 q2 被重複宣告了,因此會出現錯誤訊息。習題三 const 宣告後就不可以改值,因此也會出現錯誤訊息。

如果不太熟,別忘了先回去複習昨天的問題唷!

今天我們要進行到下一個觀念:運算子。什麼是運算?你可能會想到加減乘除,但其實舉凡任何資料計算,對系統動作,都是運算。雖然前面幾天我們談到的名詞比較多一點,但正所謂打底保健康(?),還是要認真地先弄懂這些概念才行!下面我們就要來細談各式各樣的運算子。

單元運算子

跟字面上的意思相同,單元運算子處理單個運算元。分為

  • 正號運算子 + :預設值
    不用特別寫,本來就都會是正數。
let a = +10; //就算不寫 + 也是印出一樣的結果
console.log(a); //印出10
  • 負號運算子 - :負的變正的、正的變負的
    如果加上 - 在前面會讓正負相反。
let a = 10;
let b = -a;
console.log(b); //印出-10
  • 遞增運算子 ++ :加一
result++; //等於 result = result+1; 

上面這個玄到不行的句子是什麼意思? result = result+1? 請先想像一下你曾經看過的時空交換電影,是不是會出現主角回去改變了某個東西,導致未來也不一樣的劇情?

在看到 JS 時,若出現等號請先看右邊。這個式子的意思是:一開始的 result 先加一,會變成後來的 result 。也就是如果一開始 result 是 5 ,碰到這個式子時,會讓新的 result 加一,變成 6 。

  • 遞減運算子 -- :減一
    類似上面的 ++ ,只是他是減一。

  • 布林反向運算子 ! : true 變 false 、 false 變 true
    運用在布林值上的運算子。

let yes = true;
let no = !yes;
console.log(no); //印出 false

指派運算子

延續上面單元運算子中 ++ 的概念,指派運算子能使用在不是要每次只加一加一,加到天荒地老的狀況。

當我們寫 a += b 的時候,代表的其實是 a = a+b 。就像我們剛剛說的, a = a+b ,看到等號先看右邊,這裡要先執行 a+b ,才會得到新的 a 是多少。讓我們看看下面的範例:

let a = 5;
let b = 10;

a += b;
console.log(a); //印出15

上面的程式先執行 a+b 。往上看發現宣告過 a 是 5 , b 是 10,加起來得到新的 a 是 15,最後 console.log 印出 15 。同樣的寫法,當然也能改一改變成減法(a -= b)、乘法(a *= b),和除法(a /= b)囉!

但要注意順序,當寫 a -= b,代表的是 a = a - b 。除法也一樣! a /= b ,是 a = a/b ,可別搞錯啦。

比較運算子

當你要問電腦 3 有沒有大於 4 之類的問題,就會用到比較運算子。只要注意小於等於是 <= 、大於等於是 >= 、等於是 == 、不等於是 != 。

這裡還有一個小重點:嚴格等於 === 和嚴格不等於 !== 。我知道你在想什麼,這整句話都沒什麼邏輯。等於就等於,還有分嚴格跟不嚴格?

是的,因為 JS 是個非常雞婆的語言(造謠)。當你打下列的程式時:

let a = 10;
let b = "10";
console.log(a==b); //印出 true

你會非常驚訝地發現,印出的答案是 true ,也就是說,數字 10 等於字串 10 。如果你一點都不驚訝,還搞不清楚字串跟數字的差別,可以回去看我們的第一篇。

會印出這樣的答案,是因為 JS 有自動轉型的規則,自動幫你把字串轉成數字了。想要避免他雞婆讓你的結果整個跑錯,可以使用 === 和 !== :

let a = 10;
let b = "10";
console.log(a===b); //印出 false(字串本來就不等於數字)

邏輯運算子

邏輯運算子可以根據我們想要得到的狀況,篩出所需資訊,總共有三種: && (AND) / || (OR) / ! (NOT)

這邊要先說明一下, JS 經過 ToBoolean 轉換後有兩種值:

  1. 得到 false ,通稱 falsy 值
    例如 undefined、Null、+0、-0、NaN、空字串
  2. 變 true ,通稱 truthy 值
    除了上面列的 falsy 值,其他幾乎都會得到 true

在邏輯判斷中,透過 && 和 || 生成的值,可能會是上述兩個比較值的其中之一。

|| (OR) 代表只要找到第一個 true ,就會回傳第一個 true 值。全為 false 時,回傳最後一個 false 值。一種人性本善一定要回傳好消息,除非真的不行才回傳壞消息的人設

let o1 = true || true ;
let o2 = false || true;
let o3 = false || false;
console.log(o1); //印出 true
console.log(o2); //印出 true
console.log(o3); //印出 false

&& (AND) 正好相反,找到第一個 false 值便會回傳第一個 false 值。全為 true 時,回傳最後一個 true 值。一種人性本惡,除非真的不行才回傳好消息的人設

let a1 = true && true;     
let a2 = true && false;     
console.log(a1); //印出 true
console.log(a2); //印出 false

逗號運算子

逗號運算子讓逗號分隔運算式,由左至右執行,回傳最後一個運算式的值。讓我們實際寫一個範例看看:

let a = 10, b = 10; 

以上的寫法,就等於寫:

let a = 10; 
let b = 10; 

只是要注意,千萬別寫成 let a = b = 10; 因為這樣實際上只宣告了 a 變數。

位元運算子

位元顧名思義牽涉到位元的比較。我們都知道電腦是用 0 和 1 來紀錄、代表東西。例如:
0 = 00000000
1 = 00000001
2 = 00000010
3 = 00000011

你可以在這裡換算

位元運算子就像邏輯運算子一樣,有 & (AND) / | (OR),只是它的符號只需要打一次。總共有八個位元,每個位元要分開被比較。 | (OR)代表若比較的兩個數,對應的位元都是 0 ,那就顯示 0 。如果其中一個出現過 1 ,那就是 1 。以上面的例子來說,

1 =     00000001
2 =     00000010
(1|2) = 00000011 
console.log (1|2); //印出 3

& (AND)代表若對應的位元其中一個出現 0 ,那就顯示 0 。如果都顯示 1 ,那才顯示 1 。以上面的例子來說,

1 =     00000001
2 =     00000010
(1&2) = 00000000 
console.log (1&2); //印出 0

除此之外位元運算子還有 ^ (XOR)、 ~ (NOT)、 << (向左遞補)、 >> (向右遞補)。感覺有點混淆...請看下面的解釋。

^ (XOR)代表若對應的位元其中只有一個出現 1 ,那就顯示 1 。如果都顯示 0 或都顯示 1 ,那就顯示 0 。以上面的例子來說,

1 =     00000001
3 =     00000011
(1^3) = 00000010 
console.log (1^3); //印出 2

~ (NOT)代表 0 變 1 、 1 變 0 。以上面的例子來說,

1 =     00000001
~1 =    11111110

console.log (~1); //印出 -2

<< (向左遞補)和 >> (向右遞補)很像,只是方向的不同,因此我就只講解向左遞補的部分。放在 << 前面的數字代表要被移動的數字本身,放在 << 後面的數字代表要往左移動幾個位置。移動後,後面會有空位出現,請補上 0 。例如:

5 =     00000101
5<<1 =  00001010 //往左移動一個位置,剩下的空位補 0

console.log (5<<1); //印出 10

今天的篇幅比較長,明天我們會繼續用這幾個運算子練習些簡單的習題。

學習與參考資料

JS 學徒特訓班教學影片及練習題 4-6 關
指定、算數、單元運算子 Assignment, Arithmetic, and Unary Operators:https://yubin551.gitbooks.io/java-note/content/assignment_arithmetic_unary.html
JavaScript Bitwise Operators:https://www.youtube.com/watch?v=mesu75PTDC8
JavaScript Beginners Tutorial 12 | Bitwise Operators:https://www.youtube.com/watch?v=UexYxYFOkYY


上一篇
02 var、let、const 與 ES6 簡介
下一篇
04 運算子練習
系列文
花三十天找到 JavaScript 沙漠中的綠洲35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
fillano
iT邦超人 1 級 ‧ 2020-09-04 09:42:23

沒有bitwise運算子?

沒有耶,這一個運算子我沒有學習到,之後會補念起來!感謝你的補充!

我要留言

立即登入留言