判斷對象屬性是否存在

身為一個前端，如果從後台接收到的資料為對象，而其中某個欄位可能因為不同情況而不存在，不論是因為改版還是因為後端本身問題，都造成前端很大困擾。舉個例子:
假設，我們需要取的值為 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')

以上