iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
1

今天來看存在existence布林boolean的關係

由於JS常發生型別轉換這件事,開發者可以用Boolean()這個內件函式,來判斷型別轉為boolean的結果。

undefinednull""這些代表沒有的值,都會被被型轉成false。
開發者可以利用此特性,用if()敘述來判斷是否成功取值。

例如:

var a;

if(a){
	console.log('這裡有東西');
}


結果什麼也沒發生,也沒有語法錯誤,發生了什麼事?

我們都知道宣告變數,變數預設值是undefined
if()敘述句()內看的是布林值truefalse,來決定敘述句{}裏頭的程式碼要不要執行。
故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的值0if()內被自動型轉為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


上一篇
Day09 強制型轉與比較運算子
下一篇
Day11 設定函式內的預設值
系列文
JavaScript基礎二三事30

尚未有邦友留言

立即登入留言