如何安全访问 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中文网其他相关文章！