iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Modern Web

【這些年我似是非懂的 Javascript】系列 第 11

【這些年我似是非懂的 Javascript】Day 11 - 魔幻邪惡的強制轉型 #最終章 #隱含的強制轉型

接續前幾篇的內容~
【這些年我似是非懂的 Javascript】Day 8 - 魔幻邪惡的強制轉型 #第一章 # 心情轉折
【這些年我似是非懂的 Javascript】Day 9 - 魔幻邪惡的強制轉型 #第二章 #明確的強制轉型
【這些年我似是非懂的 Javascript】Day 10 - 魔幻邪惡的強制轉型 #第三章 #隱含的強制轉型

運算子 || 與 &&

基本上我們在其他語言之類的幾乎是用過類似的邏輯運算子,但是在JS 有一些細部的差異,與其說他是邏輯的運算子,他更像運算元選擇器運算子。
怎麼說?
在 JS 中,他並不會產生 Boolean 值,他其實是在兩個運算元中做選擇,如下面的範例。

const a = 17;
const b = 'abcd';
const c = null;

a || b; // 17
a && b; // 'abcd'
c || b; // 'abcd'
c && b; // null

為什麼會產生以上的結果?
因為 ||&& 會在第一個運算元進行 Boolean 的強制轉換,
如果 || 轉換後第一個為 true 就是選擇第一個運算元,反之就是第二個。
&& 則是相反轉換後第一個為 true 就是選擇第二個運算元,反之就是第一個。

這種用法感覺很常見在以前沒有預設參數的時候,不過現在有預設參數可以用了。

Symbol 的強制轉型

Symbol 可以被明確的強制轉型成 string ,但是相同動作使用隱含的強制轉型會直接被拋出一個錯誤。
(我也不太能理解這設計概念)

還不止這樣!
Symbol 不能轉成 Number (明確的和隱含的都不行),
Symbol 可以轉成 Boolean (明確的和隱含的都可以)。
不過我自己個人倒是沒什麼感覺,畢竟我...
好像還沒實務上使用過 Symbol。(還太菜的緣故吧QQ)

寬鬆相等 vs. 嚴格相等

之前在前面幾天有提過這個差異,
就是允不允許強制轉型
再說一次哦!
差異不是在檢查型態與否。

相等性的效能

因為 === 要檢查型別,所以他做的事比 == 還多,所以效能來說當然是 === 比較慢啊。

...

我剛剛才說過! 他差異在於說允不允許強制轉型!
有在注意看應該會馬上想說...
: X!跟剛剛說好的不一樣啊!!!

所以如果轉成允不允許強制轉型,這就很明顯是 === 的效能會比 == 還好,書上寫說實測雖然只差百萬分之一秒,但是這部分要知道的應該是,其實差異不大,你該注意的是你是否需要強制轉型。

比較 Boolean 與其他值的地雷

先來個範例

const a = '17';
const b = true;

a == b; // false

why!?

a 不是 truthy 值嗎?
理論上會變成 true == true 吧!?

...

No No No~
如果 Type(x) 是 Boolean 就會變成 ToNumber(x) == y 這個結果
如果 Type(y) 是 Boolean 就會變成 x == ToNumber(y)這個結果。
所以上面那個範例就會變成 17 == 1 ,當然是 false,true 被強制轉型成 1

那...

const a = '17';
const b = false;

a == b; // false

所以他不是 false 也不是 true !?

不要被自己的大腦和表面的形象給欺騙了,他只是一樣的理論,從 false 轉 Number 變成 0, 0 當然不等於 17。

所以盡量不要使用 == true 或是 == false 來判斷該值,因為他看起來會與你表面上看的會有差異。

安全的使用隱含的強制轉型

  • 比較任一邊有 true 或 false 不要用 ==
  • 比較任一邊有可能會出現 []"" 或是 0 就要考慮一下是否要用 ==
    以上情境如果不確定,都用 === ,避免一些你沒有想到的例外情況。

強制轉型在這邊已經到了最終章,有些內容已經是前面不小心多提了,但是稍微重要一點的有在提一次,希望在讀的你也可以對於強制轉型有更多的認識。

明天來分享一下這本書的最後一個橋段~ "文法"。

我們明天見~


參考來源:

你所不知道的 JS|導讀,型別與文法 (You Don't Know JS: Up & Going)


上一篇
【這些年我似是非懂的 Javascript】Day 10 - 魔幻邪惡的強制轉型 #第三章 #隱含的強制轉型
下一篇
【這些年我似是非懂的 Javascript】Day 12 - 文法 # 趴萬
系列文
【這些年我似是非懂的 Javascript】34

尚未有邦友留言

立即登入留言