如何安全地存取 JavaScript 中的巢狀屬性以避免「無法讀取未定義的屬性」錯誤？

解決未定義的屬性錯誤

處理JavaScript 中的巢狀資料結構時，遇到「無法讀取未定義的屬性”錯誤可能會令人沮喪。當嘗試存取未定義或空值的屬性時，會發生這種情況。考慮以下數組：

const test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

迭代此數組並嘗試記錄屬性c，如下所示：

for (i=0; i<test.length; i++) {
    console.log(a.b.c);
}

將導致第二個條目出現錯誤，其中a.b 是不明確的。為了避免此錯誤，常見的方法是檢查屬性鏈的每個層級：

if (a && a.b) {
    console.log(a.b.c);
}

但是，在處理深度嵌套的資料結構時，這可能會變得乏味。幸運的是，還有替代解決方案。

可選連結（ES2020 和TypeScript 3.7 ）

如果您根據ECMAScript 2020 或更高版本或TypeScript 3.7 版本使用Java或更高，您可以利用可Script選鏈。此運算子 ?. 可以安全地存取巢狀屬性，而不會引發錯誤。

console.log(obj?.a?.lot?.of?.properties);

輔助函數解決方法（早期JavaScript 版本）

對於早期版本的JavaScript，帶有ES6 箭頭函數的try/catch 輔助函數可以提供解決方案。

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

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

你也可以提供可選的預設值：

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

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