如何安全访问 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 版本使用 JavaScript或更高，您可以利用可选链。此运算符 ?. 可以安全地访问嵌套属性，而不会引发错误。

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中文网其他相关文章！