如何安全存取 JavaScript 中的嵌套物件屬性並避免'無法讀取未定義的屬性”錯誤？

避免嵌套物件中的「無法讀取未定義的屬性」錯誤

在JavaScript 中，當某些物件具有缺少屬性。當嘗試存取可能不存在的屬性時，這會導致執行時間錯誤，例如「無法讀取未定義的屬性」。

一種解決方案是在存取屬性之前使用條件語句檢查屬性是否存在。然而，對於深度嵌套的物件來說，這可能會變得乏味。另一種方法是使用帶有 try/catch 的輔助函數。

function getSafe(fn, defaultVal) {
  try {
    return fn();
  } catch (e) {
    return defaultVal;
  }
}

此函數採用兩個參數：

• fn: 擷取的函數屬性值。
• 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中文網其他相關文章！