什么是可选链操作符？
可选链操作符（optional chaining operator）是 ES10 新增的一个语法特性。它通过让开发者可以在一个可能为 null 或 undefined 的值上进行属性访问（或方法调用），避免了出现 ReferenceError 异常，同时可以让代码更加简洁易读。
在 ES10 之前，一般需要通过以下代码来避免 null 或 undefined 值引起的异常：
-- ---- -- --------- -- --------------- -- ---------------------- - -- --- -
或者：
--- - ----- ----- - ---------------------- -- --- - ----- --- - -- --- -
这种写法不仅繁琐，而且代码看起来也不够直观。
然而，有了可选链操作符 ?. 之后，我们可以轻松地避免这个问题：
----- ----- - ------------------------- -- ------- - -- --- -
可选链操作符的语法
可选链操作符的语法非常简单，就是在属性访问或方法调用的后面加上 ?.，如下所示：
---------- -- -- --- - ---- - ------------- -------------- -------- ------------ -- -- --- - ---- - ------------- -------------- --------- ---------------- -- -- ---- - ---- - ------------- -------------- -------------
其中，[expr] 表示以变量形式访问属性的语法，如 obj['prop']。
可选链操作符的实例演示
下面我们来看一些使用可选链操作符的实例。
实例 1：简化条件语句
----- --- - - ---- - ---- - ---- ------- - - -- ----- ----- - ------------------- -- -------
上面的代码中，我们可以避免在每个属性访问前加上条件语句。
实例 2：安全访问嵌套对象
----- --- - - ---- - ---- - ---- ------- - - -- ----- ----- - ----------------------- -- ---------
在上面代码中，我们尝试访问一个不存在的属性，但因为可选链操作符的存在，不会抛出异常，而是返回 undefined。
实例 3：安全调用嵌套函数
----- --- - - ---- - ---- - ---- -- -- ------- - - -- ----- ----- - ----------------------- -- -------
在上面代码中，我们尝试调用嵌套的函数，在函数不存在时，不会抛出异常，而是返回 undefined。
实例 4：使用可选链操作符与 Nullish 合并操作符
----- --- - - ---- ---- -- ----- ----- - -------- -- ---------- -- ---------
在上面代码中，我们使用了可选链和 Nullish 合并操作符，当 foo 为 null 或 undefined 时，返回默认值 default。
可选链操作符的兼容性
可选链操作符在 Chrome 80、Firefox 74、Edge 80 和 Safari 13.1 中得到了支持，但在 IE11 和旧版浏览器中不支持。如果需要在这些浏览器中兼容，需要使用 polyfill 或 babel 转换。
总结
本文介绍了 ES10 新增的可选链操作符，它可以让开发者在处理可能为 null 或 undefined 的值时避免异常抛出，让代码更加简洁易读。我们应该充分利用这个语法特性，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64fb0d15f6b2d6eab31c40bd