🌿 情境
在進行前端專案時，常會遇到後端回傳的 API 資料內，少了某個 key 值，導致程式報錯，畫面無法渲染。
可能因為該 key 值內沒有值，所以後端索性不給了。看起來資料是簡潔了許多，但是真的是非常困擾……
例如： Object 內少了一個 key favorite，導致 v-if="favorite" 時會報錯
obj = {
name: "Hobby",
gender: "female",
// favorite: 'bubble-tea'
};🌿 解法
有兩種方式可以判斷物件內屬性，而其中的差別在於確認的屬性深度不同
方法一： obj.hasOwnProperty()
obj.hasOwnProperty(“key”)
- key: 要判定的 key 值
- obj: 物件
obj.hasOwnProperty("favorite");
//true
obj.hasOwnProperty("valueOf");
// false, valueOf 繼承自原型鏈結方法二: in 運算子
“key” in obj
- key: 要判定的 key 值
- obj: 物件
"favorite" in obj;
//true
"valueOf" in obj;
// true🌿 差異
hasOwnProperty() 只會檢查物件本身是否包含該屬性，而 in 運算子則會繼續往物件原型鏈 (Prototype chain) 上檢查。
在網頁 console 測試兩者差異
先建立物件
展開物件後，可以看到除了我們設定的參數，還有 Prototype
使用 hasOwnProperty() 和 in 運算子 來觀察其中差異。
發現因為 Prototype 裡有 valueOf，所以 in 運算子回傳的結果是 true，而 hasOwnProperty() 因為不會檢查 Prototype，所以回傳 false。
🌿 參考資料
- How do I check if an object has a key in JavaScript? - Stack Overflow
- 檢查屬性是否存在物件內
- 繼承與原型鏈 - JavaScript | MDN
- 重新認識 JavaScript: Day 04 物件、陣列以及型別判斷 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
cover: Photo by David van Dijk on Unsplashn
