避免嵌套物件中的「無法讀取未定義的屬性」錯誤
在JavaScript 中,當某些物件具有缺少屬性。當嘗試存取可能不存在的屬性時,這會導致執行時間錯誤,例如「無法讀取未定義的屬性」。
一種解決方案是在存取屬性之前使用條件語句檢查屬性是否存在。然而,對於深度嵌套的物件來說,這可能會變得乏味。另一種方法是使用帶有 try/catch 的輔助函數。
function getSafe(fn, defaultVal) { try { return fn(); } catch (e) { return defaultVal; } }
此函數採用兩個參數:
使用此輔助函數,您可以存取巢狀屬性而不會引發錯誤:
console.log(getSafe(() => obj.a.b.c)); // Logs "foo" or undefined if "c" doesn't exist console.log(getSafe(() => obj.a.b.c, "Not found")); // Logs "Not found" if "c" doesn't exist
可選連結(ES2020 )
如果根據ECMAScript 2020 或更高版本使用JavaScript,可選鏈可用作更簡單的解決方案:
console.log(obj?.a?.b?.c); // Logs "foo" or undefined if any property in the chain is undefined
可選鏈檢查鏈中的每個屬性,如果有未定義的屬性,則傳回 undefined,以防止錯誤。
在 TypeScript 3.7 或更高版本中,也支援選用鏈,提供了一種處理巢狀物件的便利方法,無需自訂輔助函數或條件檢查。
以上是如何安全存取 JavaScript 中的嵌套物件屬性並避免'無法讀取未定義的屬性”錯誤?的詳細內容。更多資訊請關注PHP中文網其他相關文章!