如何避免 JavaScript 中「無法讀取未定義的屬性」錯誤？

避免「無法讀取未定義的屬性」錯誤

使用複雜的資料結構時，經常會遇到與未定義屬性相關的錯誤。考慮以下範例：

// This array contains a mix of nested objects and non-nested values
var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

存取可能不存在的巢狀物件的屬性時，迭代測試可能會導致錯誤。例如，以下程式碼在存取a.b.c 時會拋出錯誤：

for (i=0; i<test.length; i++) {
    console.log(a.b.c); // Throws error on i==1
}

為了避免此類錯誤，可以使用多種方法：

可選連結(ES2020 ) 和TypeScript 3.7

更新：對於現代瀏覽器和TypeScript，建議的解決方案是可選鏈(?.) 運算符：

obj?.a?.lot?.of?.properties

基於函數的解決方法（ES2020 之前和TypeScript 3.7 之前）

一個簡單的解決方法是使用助手function:

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

// Use the function to access the property safely
console.log(getSafe(() => obj.a.lot.of.properties));

此函數傳回呼叫所提供函數的結果，如果發生錯誤，則傳回預設值。使用這種方法，您可以避免錯誤並有條件地存取巢狀屬性：

console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));

以上是如何避免 JavaScript 中「無法讀取未定義的屬性」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！