在 JavaScript 中,我们经常需要处理变量是否为 null 或 undefined 的情况。这个问题在访问对象的属性时尤其常见。在以前,我们需要写一些冗长的代码来处理这个问题,如下:
-- ---- -- -------- -- ----------------- - -- --- -
这种代码不仅令人头痛,而且容易出错。
幸运的是,ES11 引入了一个称为 Optional chaining 的新特性,它可以让我们更加优雅地处理 undefined 和 null。如果你还没有接触过 Optional chaining,这篇文章将帮助你了解它的基础用法和一些高级用法。
基础使用
Optional chaining 使用问号(?
)来标记一个可能不存在的属性或方法。考虑下面这个对象:
----- --- - - ----- - -------- ------- - --
我们可以使用 Optional chaining 来访问 subprop
属性:
----- ----- - ------------------ ------------------- -- -------
这里的问号表示如果 prop
属性不存在,就直接返回 undefined。这样我们就可以在不检查 prop
存在的情况下,安全地访问子属性。
还可以使用 Optional chaining 来调用一个可能不存在的函数。考虑下面这个对象:
----- --- - - ----- ---------- - ------ ------- -------- - --
我们可以使用 Optional chaining 来调用这个方法:
----- ----- - ------------- ------------------- -- ------- -------
这里的问号表示如果 func
方法不存在,就直接返回 undefined。这样我们就可以在不检查 func
存在的情况下,安全地调用这个方法。
高级使用
在实际开发中,我们经常需要处理一组数据,其中某些数据可能不存在。可以使用 Optional chaining 来遍历这些数据。考虑下面这个例子:
----- ---- - - - ----- -------- ---- --- -------- - ----- ----------- ------- -------- - -- - ----- ------ ---- -- -- - ----- ---------- ---- --- -------- - ----- --------- - - -- --- ------ ------ -- ----- - ---------------------------------- -
这段代码遍历了一个包含三个人的数组,打印了每个人的城市。由于第二个人没有地址信息,所以 Optional chaining 返回 undefined,不会导致代码出错。
Optional chaining 还可以和其他语法结合使用。例如,可以在模板字符串中使用 Optional chaining:
----- --- - - ----- -------- ---- -- -- ----- ------- - ------- -- ---- -- ----------------------------- --------------------- -- ------- -- ---- -- -------
这里的问号和点号结合,表示如果 name
属性不存在,就直接返回 undefined,然后调用 toUpperCase 方法。这样我们就可以在模板字符串中安全地访问一个可能不存在的属性。
总结
Optional chaining 是一个非常实用的新特性,可以帮助我们优雅地处理 undefined 和 null。通过使用 Optional chaining,我们可以避免写冗长的代码,并且让代码更加安全和优雅。如果你还没有使用过这个特性,那么现在就是时候开始学习了!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/644f97bc980a9b385b900258