在前端开发中，我们经常需要处理 undefined 或 null 这类空值。在 ECMAScript 2020 中，可选链式调用和空值合并运算符成为了新增的语言特性，它们可以帮助我们更加方便地处理这些空值，提高代码的可读性和可维护性。本文将介绍可选链式调用和空值合并运算符的语法规则、使用方法以及优化代码的案例。
可选链式调用
可选链式调用可以在对象中访问深层属性时，避免因为 undefined 或 null 引起的错误。在过去，访问对象中的属性时，我们通常需要通过 if 判断来避免空值的情况。
例如：
-- ---- -- --------- -- ---------------- - -- -- --------- -
在 ECMAScript 2020 中，我们可以使用可选链式调用来简化该写法，避免冗长的判断语句。
-- ------------------- - -- -- --------- -
在可选链式调用中，通过对属性或函数调用的部分加上问号（?.）来表示只有该部分不是 undefined 或 null 时，才执行后续的方法或属性访问操作。
可选链式调用除了可以避免空值导致的错误，还可以提高代码的可读性和可维护性。例如在处理 JSON 数据时，我们可以直接通过以下方式获取嵌套层级的属性：
----- ------ - ----------------------------
空值合并运算符
空值合并运算符可以用于给变量赋默认值，避免使用默认值时的冗长写法。在过去，我们使用 || 运算符来给变量赋默认值，但是当变量为 0 或者空字符串 '' 时，使用 || 运算符会有问题。
例如：
----- ---- - --------- -- ---------- -- - ---- --------------------
在 ECMAScript 2020 中，我们可以使用空值合并运算符 ?? 来简化该写法。空值合并运算符只在左侧的变量为空值（null 或 undefined）时才会使用右侧的默认值。
----- ---- - --------- -- ----------
空值合并运算符的使用可以有效地避免因为空值引起的异常，而且语法更加简洁，可读性更高。
实际案例
在实际开发中，我们可以通过可选链式调用和空值合并运算符来优化代码，让代码更加简洁易读。
例如，下面代码中，最开始的判断主要因为需考虑 query，以及 query 的 seriesData 数据有无数据，代码出现了大量冗余。
-------- ------------------- -
-- ------------- -- ----------------------- -- ------------------------------ - -- -
----- ------ - ------------------------
-- -- ---------
- ---- -
-- -- --------- ----
-
-我们可以使用可选链式调用对代码进行优化，简化判断条件。
-------- ------------------- -
----- ------ - ------------------------ -- ---
-- -------------- - -- -
-- -- ---------
- ---- -
-- -- --------- ----
-
-可以看到，使用可选链式调用和空值合并运算符后，代码更加简洁，易于理解。同时，这种方式还可以避免空值带来的异常，给代码的健壮性提供了保障。
总结
在 ECMAScript 2020 中新增的可选链式调用和空值合并运算符是优化代码的利器，可以帮助我们避免因空值导致的异常，同时让代码显得更加简洁易懂。作为前端开发者，理解并灵活应用这两个语言特性，是提高开发效率和代码质量的重要手段。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6497ccea48841e98944d3394