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