简介
ECMAScript 2020 增加了 optional chaining 这个操作符，可以使开发者在访问对象和数组属性时，避免了因为空值或 undefined 导致程序崩溃的问题。本篇文章将介绍如何使用 optional chaining 优化代码。
optional chaining 的语法
ECMAScript 2020 定义了可选链式操作符（optional chaining），可以用来简化访问链的判空操作。
- 当访问对象属性或数组元素时可能会返回 undefined 或 null 值，此时再访问对象属性或数组元素将会抛出错误，导致程序运行失败；
- 可选链式操作符（?.）可以在属性或数组不进行判空判断时不抛出错误，而是直接返回 undefined 值。
-- -- ------ ---------- -- -- ------ -------------
optional chaining 的使用
1. 避免崩溃
当访问属性时，如果对象不存在，访问值将会返回 undefined 而不是抛出错误。
--- ---- - ----- --- ---- - ----------- -- --------- ------------ -- ---------
2. 可选调用
当对象比较复杂时，联合调用会变得十分复杂，而可选调用则非常方便。
--- ---- - -------------------------------------------------------
如果 document.querySelector('#id') 返回 null 或 undefined，则后面的 querySelector 不会执行，elem 的值将是 undefined。
3. 引用链中的可选链
可选链可以用多个问号组合起来，在引用链中使用。
--- ---- - --- ------ --------------------- -- -- ---------------------- ----
上面示例中，user 对象没有 address 属性，因此查询 user?.address 不会产生错误，他会返回 undefined 并停止执行。
示例代码
下面是一个使用 optional chaining 的示例代码：
----- ---- - -
----- ------
------ ------------------
-------- -
----- ----------
------- ------------
--------- -------
-
--
----- -------- - -
----- -----------
------ ------------
-------- ------------------- -- --------------------- -- ----------------------- - ----------------------- ------------------------ --------------------------- - --
--在上面的代码中，我们使用了 optional chaining 进行判断 user 对象的属性是否存在，从而避免了因为空值或 undefined 导致程序崩溃的问题。
总结
在本篇文章中，我们介绍了如何使用 ECMAScript 2020 中的 optional chaining 优化代码，并提供了详细的语法及示例代码。使用 optional chaining 可以让我们更加方便和安全地访问对象和数组属性。在开发过程中，建议我们使用 optional chaining 进行代码优化，提高程序的健壮性和安全性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b31538add4f0e0ffc2647a