深度 Javascript 检查是否未定义且没有 TypeError

Question

我厌倦了写类似的东西

if (
  typeof Foo != 'undefined' &&
  typeof Foo.bar != 'undefined' &&
  typeof Foo.bar.baz != 'undefined' &&
  Foo.bar.baz == 'qux'
) {...}

在 PHP 中它会好一点：

if (!empty($foo['bar']['baz']) && $foo['bar']['baz'] == 'qux') {...}

理想情况下会是：

function u(value) {
    return (typeof value != 'undefined') ? value:null;
}
if (u(Foo.bar.baz) == 'qux') {...}

但当我尝试这样做时，浏览器显示“TypeError”。有什么办法可以让“u”发挥作用吗？

Answer 1

2020 年 4 月更新

从 Node.JS 版本 14 开始，您现在可以使用以下语法进行“可选链接”

if(foo?.bar?.obj?.prop1)

如果任何链接属性不存在，则值将被键入“未定义”。

https://v8.dev/features/optical-chaining

---

原始回复：

您不必明确声明未定义。检查可以是这样的：

if(foo && foo.bar && foo.bar.obj && foo.bar.obj.prop1)

或者你可以有一个 try catch 块来捕获是否有任何错误：

try
{
  if(foo && foo.bar && foo.bar.obj && foo.bar.obj.prop1)
    {}
}
catch(e)
{
 alert(e);
}

但是是的，我可以看到问题。我建议尝试避免像您一样的深层嵌套。

Answer 2

为了解决这个问题，我使用 Lodash _.get。

if(_.get(Foo, ['bar','baz'] === 'qux') doThings()

如果 Foo.bar 或 Foo.bar.baz 未定义，您将不会收到类型错误，并且更容易阅读和调试。

Answer 3

JavaScript 中有一个新的可选链运算符。截至 2020 年，它仅适用于最新版本的流行浏览器。所以我建议仅将其与转译器一起使用。

if (Foo && Foo?.bar?.baz == 'qux') {...}

Answer 4

当你假设链中的每个步骤都是一个对象而不是 0、“” 或布尔值 false 时，你可以这样写：

if (
 Foo  &&
 Foo.bar &&
 Foo.bar.baz &&
 Foo.bar.baz == 'qux'
) {...}

但毕竟最好不要有这么深的嵌套对象