JavaScript 基礎筆記


Posted by V. K. on 2020-06-28

邏輯運算:|| 與 && 的短路性質

發現這些舉例之前其實並沒有很清楚的概念,紀錄一下,覺得很重要。熟悉短路性質,對於撰寫精簡的程式碼會很有幫助,現階段程式碼都很冗長大概就是對這個概念並不熟悉的關係。

&& and

true && true => true 
3 && 10 => 10
true && false => false
false && 3 => false

1. 判斷完前後兩個元素皆為 true 後,得到 true 的結果。
2. 判斷完 3 為 true 後,再往後判斷 10 為 true,得到 true 的結果。(當前面成立,結果由後面的值決定。)
3. 判斷完前面 true 成立,但後面 false 不成立,故得到 false 的結果。
4. 當前面的值已經不成立,將直接回傳 false,不會再往下判斷。

|| or

true || false => true 
false || 10 => 10
0 || 10 => 10

1. 前面已經得到 true,不論後面元素為何,即可判斷結果為 true。
2. false 不為 true,所以需要往後判斷。
3. 0 不為 true,所以需要往後判斷。

位移運算子(<< & >>)

往左移一位代表的意義,乘以 2 倍。

同理,往右移一位會是除以 2。

10 << 1 => 20
10 << 3 => 80
10 >> 1 => 5
9 >>1 => 4

位移用「<<」及「>>」來表示
當往右移無法整除時,會「無條件捨去」。

位元運算的 and、or、xor 與 not

and

10 & 15 => 10

當使用位元運算時,會採用二進位方法計算。
故如圖所示,1010 與 1111,每一位分別去做 and 運算,最後得出的值為 1010。

| or

10 & 15 => 15

同上說明及附圖,1010 與 1111,每一位分別去做 or 運算,最後得出的值為 1010。

^ xor

10 ^ 15 => 5

當兩數相同為 0 或 1,得值為 0,當兩數不同則為 1。
1010 與 1111,每一位分別去做 xor 運算,最後得出的值為 0101。

~ not

~ 15 => -16

1111 做 not 運算,最後得出的值為 0000。
但因 1111 前面還有很多 0 未轉換到,故值不會等於 0000,而是 1111....1110000。

位元運算的用法

A & 1 =>0  A的最後一個數字為 0
A & 1 =>1  A的最後一個數字為 1
A & 8 =>8  A的二位元、千位數為 1

任何數 &1 的結果,可用來判斷該數的最後一個數字。
二進位中最後一個數字如為 0,代表該數為偶數。反之,如為 1 則為奇數。

變數宣告與 undefined

  1. JavaScript 中以 var 來宣告變數
  2. 大小寫有區分
  3. 如宣告但未賦值,在查詢的時候會出現 undefined
  4. 如未宣告,在查詢的時候會出現 is not defined
  5. 變數不能使用數字開頭
  6. 變數不能使用保留字(程式本身有的命名)
  7. 變數命名規則,可用下底線連接單字(snake case),如:this_is_an_apple
  8. 或者使用 - 符號隔開(kebab case),如:this-is-an-apple
  9. 亦可用單字首字小寫,第二個單字開始首字大寫的駝峰命名法(camelCase),如:thisIsAnApple
  10. 單字命名規則需統一,且命名要語意化,才能增加可讀性。

++a 與 a++


如圖所示,a++ 會先執行完該行指令之後,再進行 ++ 的動作,而 ++a 則是先完成 ++ 動作後再跑該行指令。


變數的各種型態

變數有 Primitive、object(物件)、undefind、function(函式) 幾個形態。

其中 Primitive 又可分為以下三種:

  1. boolean:true 或 false
  2. number:數字
  3. string:字串


如圖所示,特別要注意的是,null 被歸類在 object 當中。

另外,在 JavaScript 裡沒有一個形態叫做 array(陣列)。


變數的運算,需要注意事項:

  1. 變數的型態

    當相加兩值,其中有變數型態為「字串」時,相加後會變成字串,需注意變數的型態,如期望以數字相加需將型態轉為數字。

     var a = "10"
     var b = 20
    
     a + b = 1020
    

    將字串轉成數字的方法,可使用 NumberparseInt(變數,進位法)
    使用 parseInt,沒指定進位法時會預設為 10 進位,parseInt 只會取到整數位。

     var a = "10"
     var b = 20
    
     Number(a) + b = 30
     parseInt(a,10) + b = 30
    
  2. 浮點數誤差

    0.1 + 0.2 不等於 0.3,而會是 0.30000000000000004。


== 與 ===

主要差異在型態,當使用 === 時會再比較左右兩邊的型態。
使用 == 時有可能會產生一些沒注意到、跟型態有關的 bug,建議都使用 === 以避免遇到相關問題。

0 == "0" => true
0 === "0" => false
0 == " " => true
0 === " " => false

從 Object 的等號真正的理解變數

如圖,以上四個都不相等。

如圖所示,物件中存的值即便是同樣的,但由於存檔方法,指向的記憶體位置並不會相同,故直接比較物件是否相等會得到 false 的結果。


如圖所示,因為物件指向同一個位置,因此會是相等,且可以更動到物件中變數的值。

當 obj2 被賦予新的物件,這時候會產生新的記憶體位置,指向的位置則不再是 obj 同樣位置,兩個物件間便再無關聯,也不會相等。

(此概念,陣列與物件同理。)

延伸閱讀:
從博物館寄物櫃理解變數儲存模型
深入探討 JavaScript 中的參數傳遞:call by value 還是 reference?


2020.6.28

  • 寫著寫著發現篇幅又超出預期了,決定這篇先到這邊,作為一個初學者,很清楚自己不喜歡看到太長篇幅的文字,篇幅一長就看不下去,就先把最基礎的概念整理到這邊。
  • 雖然以前已經碰過一點 JavaScript,但這堂課其實蠻多概念是之前沒有注意到的部分,幸好現在有接收到,未來才不會卡在小地方百思不得其解。

#javascript







Related Posts

我很菜,所以只會用原生 JS 跟 CSS 寫「口罩地圖 」Ep.02

我很菜,所以只會用原生 JS 跟 CSS 寫「口罩地圖 」Ep.02

Vue.js 學習旅程Mile 11 – Computed 計算屬性篇

Vue.js 學習旅程Mile 11 – Computed 計算屬性篇

【單元測試的藝術】Chap 11: 設計與可測試性

【單元測試的藝術】Chap 11: 設計與可測試性



Comments