iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

每日挑戰,從Javascript面試題目了解一些你可能忽略的概念系列 第 8

每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day8

tags: ItIron2021 Javascript

前言

昨天我們探討了undefined、null & not defined的基本差異,今天我們繼續透過其他的題目進一步了解變數型別相關的問題吧!

本日題目與解釋

請問下方程式碼輸出結果為何

let bar = true;

console.log(bar + 0);
console.log(bar + 'xyz');
console.log(bar + true);
console.log(bar + false);

老樣子來張全新的防雷圖~思考完再往下捲動吧!

thinking-spinner

最終的輸出結果為

1
truexyz
2
1

這就是javascript中讓人又愛又恨的其中一個地方,強制轉型(coercion),簡單說就是在某些情況下(變數間的比較、運算子或是條件式等使用等),javascript會透過自己的一套方法將變數轉為它想要的型態再做處理,舉個常見的例子,你在實務中可能看過類似以下的程式碼

if (list.length) {
  console.log('你的名單不是空的,真是太好了,你不是邊緣人呢!')
} else {
  console.log('可憐的傢伙,連朋友都沒有,這個口香糖拿去吃吧!')
}

上述的程式碼就是一個善用強制轉型的典型例子,條件式內的expression會被強制轉為boolean值,藉由這樣可以少些一些程式碼! 不過當你不了解這類的轉型規則時,你很容易像今天的題目一樣慌了手腳。強制轉型是絕對有完整的規則的,有興趣的可以去探究一下背後的原理,MDN也有提供一張表格讓你知道在比較時是怎麼做轉型再比較的。

強制轉型表

現在你知道規則是有的,我們再回頭看一下題目吧! 當變數間用+運算子處理時,便會觸發強制轉型,畢竟它必須先知道是要連接還是加總嘛!你當然可以深究其原理再處理這道題目,不過實際上我個人的經驗是這樣的

  1. 一旦有字串,就都轉成字串處理
  2. 若只有布林值或數字,就都轉數字處理
  3. 不知道該怎麼辦時,猜字串就對了

再次強調,背後是真的有一套規則在的,有興趣的自行探究,會關係到底層如何用valueOf去一個一個處理轉型,但有了以上的基本原則就足夠你應付多數的面試題目了,照以上的原則分析這次的問題吧!

console.log(true + 0); // 只有布林&數字,轉數字處理,1 + 0 = 1
console.log(true + 'xyz'); // 有字串,用字串連接處理,'true' + 'xyz' = 'truexyz'
console.log(true + true); // 只有布林,轉數字處理,1 + 1 = 1
console.log(true + false); // 只有布林,轉數字處理,1 + 0 = 1

當然,最好的辦法還是去好好了解底層是怎麼運作的,但以上原則面對jr的面試與實務已經完全足夠了,真的慌了手腳的話就猜都轉字串吧? 不過這邊要特別注意不同的資料型別轉字串的方法稍微有點不一樣,舉個例子來說

[] + {}

遇到這種讓你手足無措的,你知道要猜轉字串再連接,問題是....這兩玩意轉字串是什麼鬼阿!

轉字串會透過toString方法去做轉型,但掛在Array & Object下的toString卻不完全一樣,有興趣的朋友可以自行研究一下,總之Object的toString方法會給比較多資訊,以上方的例子來說,空陣列呼叫本身的toString方法會回傳空字串,而空物件呼叫本身的toString方法則會回傳[object Object],最終輸出結果為以下

[] + {} => '' + '[object Object]' => '[object Object]'

本日核心觀念與總結

核心觀念

強制轉型(coercion)

總結

  1. 遇到變數間用+運算子處理時,要有強制轉型的觀念在
  2. 記好基本原則,若真的不知所措都轉為字串連接就對了,只是要注意不同資料型別間,toString方法不同

本文章同步發布於個人部落格,有興趣的朋友也可以來逛逛~!


上一篇
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day7
下一篇
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 - Day9
系列文
每日挑戰,從Javascript面試題目了解一些你可能忽略的概念30

尚未有邦友留言

立即登入留言