如何避免“无法读取未定义属性”错误？

Question

在我的代码中，我处理一个数组，该数组中有一些条目，其中许多对象嵌套在另一个条目中，而有些条目则没有。它看起来如下所示：

// where this array is hundreds of entries long, with a mix
// of the two examples given
var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

这给我带来了问题，因为我有时需要遍历数组，而不一致性给我带来了如下错误：

for (i=0; i<test.length; i++) {
    // ok on i==0, but 'cannot read property of undefined' on i==1
    console.log(a.b.c);
}

我知道我可以说if（a. b）{console.log（a. b. c）}，但是当有多达5或6个对象相互嵌套时，这是非常乏味的。有没有其他（更简单）的方法，我可以让它只做console.log，如果它存在，但不抛出一个错误？

Answer 1

如果我正确理解你的问题，你想要最安全的方法来确定一个对象是否包含属性。

最简单的方法是在运算符中使用。

window.a = "aString";
//window should have 'a' property
//lets test if it exists
if ("a" in window){
    //true
 }

if ("b" in window){
     //false
 }

你当然可以想多深就多深

if ("a" in window.b.c) { }

不确定这是否有帮助。

Answer 2

你所做的会引发一个例外（这是理所当然的）。

你总能做到

try{
   window.a.b.c
}catch(e){
   console.log("YO",e)
}

但我不会去想你的用例。

为什么要访问您不熟悉的6层嵌套数据？什么用例证明了这一点？

通常，您希望实际验证您正在处理的对象类型。

另外，在旁注中，您不应该使用类似于if（a.b）的语句，因为如果a.b为0，甚至是“0”，它将返回false。而是检查a.b！==未定义

Answer 3

更新：

• 如果根据ECMAScript 2020或更高版本使用JavaScript，请参阅可选链接
• TypeScript在3.7版中增加了对可选链接的支持

// use it like this
obj?.a?.lot?.of?.properties

ECMASCript 2020之前的JavaScript或3.7版本以上的TypeScript解决方案：

快速解决方法是使用带有ES6箭头功能的try/catch辅助函数：

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

// use it like this
console.log(getSafe(() => obj.a.lot.of.properties));

// or add an optional default value
console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));