身為一個前端,如果從後台接收到的資料為對象,而其中某個欄位可能因為不同情況而不存在,不論是因為改版還是因為後端本身問題,都造成前端很大困擾。舉個例子:
假設,我們需要取的值為 checkoutRequestStatus.product.details.options,而實際情況是details欄位和options欄位可能不存在。
在js 如果對象獲取的屬性其中一個不存在的話,系統會報錯,並且因為單線呈關係之後的代碼並不會執行,可能造成頁面直接空白。
因此最常使用的方法就是先判斷屬性是否存在
if(checkoutRequestStatus.product
&&checkoutRequestStatus.product.details
&&self.checkoutRequestStatus.product.details.options)
{
//do somthing
}
問題看起來一下就被解決了,但是隨著專案的龐大,如果有多個地方要判斷,那麼不斷的if這樣的代碼就顯得冗長了。
此時新學到一招,可以這樣用:
代碼註解: 如果前面屬性為真(代表欄位存在),就賦予此值繼續往下尋找 :
如果不存在則賦予一個空對象,此時可以避免報錯,且往下尋找後返回最終結果 undefined
let val =((checkoutRequestStatus.product
|| {}).details || {}).options
這樣的方法固然可以解決 if 帶來的冗長問題,但是,如果要判斷的屬性欄位一旦多了起來代碼的可讀性就有問題了,這個時候我們可以來封裝一個函數:
function isValueExist(target, s) {
s = s.split('.')
var obj = target[s.shift()]
while (obj && s.length) obj = obj[s.shift()]
return obj
}
isValueExist(checkoutRequestStatus,'product.details.promoteTimeRange')
以上