JavaScript“无法读取未定义的属性'bar'”

Question

我有一个函数，接受三个参数。问题在于其中一个参数是对象的某个属性（即它接收thing.foo.bar，但有时thing.foo未定义，因此无法访问bar）。

有什么办法可以解决这个问题？在函数声明中，我有一个条件检查：if (!parameterName)，但浏览器（Chrome）仍会抛出一个错误，指出它无法读取未定义的bar属性。

- Connor

---

可能会考虑使用“可选链”例如：thing?.foo?.bar。 - bristweb

Answer 1

如果一个对象的属性可能引用到其他对象，那么在尝试使用其属性之前，可以先测试该属性是否为undefined：

如果一个对象的属性可能引用到其他对象，那么在尝试使用其属性之前，可以先测试该属性是否为undefined：

if (thing && thing.foo)
   alert(thing.foo.bar);

如果您展示一些实际代码，我可以更新我的答案以更好地反映您的情况，但可能会像这样：

function someFunc(parameterName) {
   if (parameterName && parameterName.foo)
       alert(parameterName.foo.bar);
}

- nnnnnn

---

@Mörre：这个很好用。OP明确表示thing.foo未定义，所以必须声明它。 - Cerbrus

Answer 2

复合检查：

   if (thing.foo && thing.foo.bar) {
      ... thing.foor.bar exists;
   }

- Marc B

Answer 3

你可以通过以下两种方式来保护自己：

function myFunc(thing) {
    if (thing && thing.foo && thing.foo.bar) {
        // safe to use thing.foo.bar here
    }
}

function myFunc(thing) {
    try {
        var x = thing.foo.bar;
        // do something with x
    } catch(e) {
        // do whatever you want when thing.foo.bar didn't work
    }
}

在第一个例子中，您显式检查引用的变量的所有可能元素，以确保其安全使用，从而避免任何意外的引用异常。

在第二个例子中，您只是在其周围放置了一个异常处理程序。 您只是访问thing.foo.bar，假设它存在。 如果它存在，则代码正常运行。 如果不存在，则会抛出异常，您将捕获并忽略它。 结果是相同的。 如果thing.foo.bar存在，则使用它的代码执行。 如果不存在，则该代码不执行。 在所有情况下，函数都正常运行。

if语句的执行速度更快。 异常可以更简单地编写和在复杂情况下使用，其中可能有许多需要保护的可能性，并且您的代码结构使得抛出异常和处理异常是跳过不存在某些数据时的清晰方式。 当抛出异常时，异常会稍微慢一些。

- jfriend00

Answer 4

在传递给函数之前，请先检查它。因此，您将传递：

thing.foo ? thing.foo.bar : undefined

- Petar Ivanov