首頁 > web前端 > js教程 > 如何安全存取 JavaScript 中的嵌套物件屬性並避免'無法讀取未定義的屬性”錯誤?

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

Patricia Arquette
發布: 2024-12-05 07:37:09
原創
445 人瀏覽過

How Can I Safely Access Nested Object Properties in JavaScript and Avoid

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

在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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板