如何防止 JavaScript 中出現「無法讀取未定義的屬性」錯誤？

如何避免未定義的屬性錯誤

在 JavaScript 中，經常會遇到包含不同嵌套層級的物件混合的陣列。如果不是所有物件都具有相同的深度，則在迭代數組時可能會導致錯誤。

問題：

當嘗試存取物件的巢狀屬性時，如果該屬性的路徑不存在，JavaScript 將拋出錯誤。例如，在下面的程式碼中：

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

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

當i 為1 時，循環將拋出「無法讀取未定義的屬性」錯誤，因為測試數組中的第二個元素只有一個a屬性，不是嵌套的b 屬性。

解決方案：

避免這些錯誤的一種方法是使用條件運算符在存取每個屬性之前檢查它是否存在：

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

但是，如果您有深度嵌套的物件或要檢查多個屬性，此方法可能會變得乏味。

可選鏈接（ES2020）：

對於ES2020 之後的JavaScript 版本，可選鏈接(?.) 提供了一種更簡潔的方法來在訪問屬性之前檢查屬性是否存在。例如：

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

如果陣列中的任何物件都不存在 a 或 b，則可選連結運算子將傳回 undefined 而不是拋出錯誤。

getSafe () 輔助函數（ES2020 之前）：

對於 ES2020 之前的 JavaScript 版本，您可以定義一個使用 try/catch區塊來安全存取屬性的輔助函數：

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

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

如果屬性存在，此函數將傳回屬性值，如果屬性不存在，則傳回預設值。

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