今天來看存在existence
與布林boolean
的關係
由於JS常發生型別轉換這件事,開發者可以用Boolean()
這個內件函式,來判斷型別轉為boolean的結果。undefined
、null
、""
這些代表沒有的值,都會被被型轉成false。
開發者可以利用此特性,用if()敘述來判斷是否成功取值。
例如:
var a;
if(a){
console.log('這裡有東西');
}
結果什麼也沒發生,也沒有語法錯誤,發生了什麼事?
我們都知道宣告變數,變數預設值是undefined
。
而if()
敘述句()內看的是布林值true
或false
,來決定敘述句{}
裏頭的程式碼要不要執行。
故a在if()
敘述句被型轉為false
,所以這個條件判斷內的程式碼不執行。
如果是有值的狀況,例如:
var a = 'IT鐵人賽';
if(a){
console.log('這裡有東西');
}
結果會是?
a有值(字串),所以型轉為true
,這就是開發者對js強制型轉的妙用之一,可以判斷這個值是否有存在,當有值存在時,若值不是代表「沒有、無、未定義」的值,就會被型轉成true。
但如果賦值給a的值是數值0
,那怎麼辦呢?
var a = 0;
if(a){
console.log('這裡有東西');
}
瀏覽器console結果是?
沒東西
雖然a有值(數值0
),但0
被自動型轉為false
,導致這個if條件判斷程式碼不成立,只是a確實有開發者賦予的值呀!
這個時候可以這樣寫:
var a = 0;
if(a || a === 0){
console.log('這裡有東西');
}
結果是:
來看看if()
內發生了什麼事
||
運算子可以想成中文的「或」的意思,===
這個運算子的特性則是嚴格相等比較,前面這篇筆記有說,運算子執行順序,先看優先性,再看相依性,===
這個運算子優先性比||
還高
(可參考MDN的運算子優先等級)
所以if()
內的執行順序,先從a === 0
這段程式碼開始,把這段單獨抽出來看,結果是:
//true 成立
再來看a || true
a的值0
在if()
內被自動型轉為false
所以變成是false || true
||
或的意思,若有true就選擇true,假或真,選擇真。
是故if()
內結果true
,條件判斷成立,印出這裡有東西
這種寫法很少見嗎?不,很常見(我最近上班也有看到)
有的框架、函式庫、JS套件會用這種寫法,舉個例子,現在給變數a一個函式:
var a = function() {
console.log("某套件某功能的函式")
}
if(a){
console.log("我有成功匯入某JS套件")
}
結果是:
用這種方式,能判斷的不是只有字串或數值,連函式也可以,當然物件也是可以的。
var a = {it30day:'一天一筆記'}
if(a){
console.log("我有成功匯入某JS套件")
}
結果是:
小結
某次使用JS套件(別人寫好的Plugin)時,看原文件發現這種寫法,當時的反應是欸欸~~這樣也可以喔!後來想一下、console確認可行就用了,現在在udemy看到這部影片,存在與布林,感覺真是心有戚戚焉。
今天的筆記內容可以參照Udemy課程:JavaScript 全攻略:克服JS 的奇怪部分3-27