[JavaScript] 判斷物件內是否有該屬性 hasOwnProperty() & 其他方法(更便利！)

(前情提要)

乾，在公司被唸說看不懂 ? 這寫法，我反問對方這要怎麼查，他說他不知道，且說不重要... 唉.. 最後我另外花時間找，並記錄下來好了...

(正式來)

有時 API 傳回來的資料，連那個 key 都沒有，render 就會出問題，那這時就得判斷該物件內是否存在該屬性，這就衍生出以下三種方法

一、hasOwnProperty()

二、? (???.... 是在問號三小... 你沒看錯.. 就是?...)

三、?? 結論 (這問號想逼使誰...

一、hasOwnProperty()

此方法即可判斷物件有無屬性存在，下方程式碼即在判斷 objA, objB 是否有 'chi' 這個 key

const objA = {};
const objB = { chi: 'chiValue' };

// 無印出
if (objA.hasOwnProperty('chi')){
  console.log('objA.hawOwnProperty(chi): ', objA.hasOwnProperty('chi'));
}

// 印出 objB.hawOwnProperty(chi):  true
if (objB.hasOwnProperty('chi')) {
  console.log('objB.hawOwnProperty(chi): ', objB.hasOwnProperty('chi'));
}

二、?

此為 es2020 之方法，跟 '一、' 可以達到一樣效果，但更方便

const objA = {};
const objB = { chi: 'chiValue' };

// 印出 objA?.chi:  undefined
console.log( 'objA?.chi: ', objA?.chi );

// 印出 objB?.chi:  chiValue
console.log( 'objB?.chi: ', objB?.chi );

三、?? 結論



綜合上述兩種方法可以得到

一、 判斷完 true, false 後，有後續較多動作可使用 (執行 function 等

二、 判斷完 true, false 後，有後續單純動作可使用 (引用該屬性 value、賦值、render 等

下方為 '二、' 之完整寫法，即賦值給該屬性，避免 undefined 狀況(會導致錯誤)

此法在框架(如：react)下撰寫很好用，有機會在記錄一下

const objA = {};
const objB = { chi: 'chiValue' };

// 印出 objA?.chi:  objA 沒有屬性
console.log( 'objA?.chi: ', objA?.chi ?? 'objA 沒有 chi key' );

// 印出 objB?.chi:  chiValue
console.log( 'objB?.chi: ', objB?.chi ?? 'objB 沒有 chi key' );