iT邦幫忙

2021 iThome 鐵人賽

DAY 2
2

大家好!

昨天的小測驗,有沒有全部答對呢?
我們進入今天的主題吧!


建立資料

昨天我們提到的 字面建構式關鍵字+建構式 都是建立物件的方法,舉例一下:

([]); // []
({}); // {}
(/\w/); // /\w/
(function () {}); // function () {}

new Array(); // []
new Object(); // {}
new RegExp('\\w'); // /\w/
new Function(); // function () {}

上述方法都能建立新的物件,相同型別回傳的值也都相等,按照自己的偏好擇一使用就行了。
但是,總是會有幾個想要獨樹一幟的,舉例一下:

(false); // false
(0); // 0
('str'); // ''

new Boolean(); // {false}
new Number(); // {0}
new String('\\w'); // {'str'}

有必要這樣嗎?真是太不合群了!
其實不是不合群啦,還記得昨天提到的原始型別和物件型別嗎?

  • 原始型別:BigIntBooleanNullNumberStringSymbolUndefined
  • 物件型別:使用 字面建構式關鍵字+建構式 建立的物件

沒錯,BooleanNumberString 正是原始型別ArrayObjectRegExpFunction 則是物件型別
也就是說,前者建立的會是純值,後者建立的則是物件

如果覺得太抽象也沒關係,接下來會開始說明這兩者的差異。


比較資料

既然相同型別回傳的值都會相等,那麼相同型別之間的比較會不會也全等呢?
先來測試物件型別:

([]) === ([]); // false
({}) === ({}); // false
(/\w/) === (/\w/); // false
(function () {}) === (function () {}); // false

new Array() === new Array(); // false
new Object() === new Object(); // false
new RegExp('\\w') === new RegExp('\\w'); // false
new Function() === new Function(); // false

([]) === new Array(); // false
({}) === new Object(); // false
(/\w/) === new RegExp('\\w'); // false
(function () {}) === new Function(); // false

怎麼會這樣?明明都有相等的值,但是卻不全等
再來測試原始型別:

(false) === (false); // true
(0) === (0); // true
('str') === ('str'); // true

new Boolean() === new Boolean(); // false
new Number() === new Number(); // false
new String('str') === new String('str'); // false

(false) === new Boolean(); // false
(0) === new Number(); // false
('str') === new String('str'); // false

不出所料,又是一個與眾不同的結果。
其實會出現這樣的結果是因為,原始型別和物件型別的傳遞方式不同


打個比方

如果原始型別是儲存容量,那麼物件型別就是儲存裝置:

賣場有各式各樣的硬碟,硬碟的規格也不盡相同。經過多方比較,最後 Felix 決定購買標示 1000GB1TB 的硬碟各一個。

關鍵句:

  1. 硬碟有 1000GB1TB 的儲存容量
  2. 購買 1000GB1TB 的硬碟各一個

第一句的 1000GB1TB 是不是一樣呢?
是。因為儲存容量是一種量測值,不需要考量其他因素就能直接比較,因此只要換算後的值相等,就代表全等,這就是原始型別的體現:

('s' + 't' + 'r') === 'str'; // true

第二句的兩個硬碟會不會一樣呢?
否。因為硬碟出廠時都會附有一組產品序號(唯一識別碼),因此就算是相等儲存容量的硬碟,也絕對不會全等,這就是物件型別的體現:

new RegExp('\\' + 'w') === new RegExp('\\w'); // false

這樣的解釋有比較容易理解資料型別的差異嗎?
想當初在學習的時候,幸好有將資料型別實體化,否則可能早就放棄了。

差不多也到尾聲了。
如果對文章有任何疑問,歡迎於下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 01 - 序幕揭曉
下一篇
JS 03 - 資料傳遞
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言