随着前端开发的不断发展，JavaScript 也在不断更新演变，ECMAScript（简称 ES）也在不断更新。现在，最新的 ES11（ECMAScript2020）已经来了，其中包含了许多新功能和语法，本文主要介绍其中两个新特性：空值合并和可选链式调用操作符。
空值合并（Nullish Coalescing）
在 JavaScript 中，常常使用 || 运算符来进行默认值设置。例如：
----- ------ - -------------- -- --------------
这个语句的意思是，如果 providedOption 为真值（truthy），则使用 providedOption，否则使用 defaultOption。然而，这种语法有一个问题，就是对于 falsy 值（也就是值为 false、0、''、null、undefined、NaN 等），会被认为是未提供该选项而使用默认值。这样，如果我们想要给 providedOption 设置值为 0 或空字符串时，就会出现问题。此时，我们就可以使用空值合并操作符（??）来解决这个问题。
具体来说，空值合并操作符的行为是，只有在左侧为 null 或 undefined 时，才会使用右侧的默认值。例如：
----- ------ - -------------- -- --------------
这个语句的意思是，如果 providedResult 为 null 或 undefined，则使用 defaultResult，否则使用 providedResult。这样，就可以避免使用 falsy 值时出现问题。下面是一个示例：
----- - - ----- ----- - - --- ----- - - -- ----- ------- - - -- ---------- -- --------- ----- ------- - - -- ---------- -- --------- ----- ------- - - -- ---------- -- --------- ----- ------- - - -- ---------- -- --------- ----- ------- - - -- ---------- -- -- ----- ------- - - -- ---------- -- -
上面的代码中，result1、result2 和 result3 都是 'default'，这是因为 a、b 和 c 都是 falsy 值，所以使用了默认值。而 result4、result5 和 result6 的结果分别为 'default'、'' 和 0，这是因为使用了空值合并操作符，从而避免了使用 falsy 值时出现的问题。
可选链式调用（Optional Chaining）
在 JavaScript 开发中，经常需要访问对象的属性和方法，而有时候这些属性和方法可能不存在。此时，如果直接访问，就会出现 undefined 错误，需要进行繁琐的判断。ES11 中新增了可选链式调用操作符（?.），可以方便地进行链式访问，并在遇到 undefined 时自动停止访问。
具体来说，可选链式调用操作符的行为是，当左侧表达式结果为 null 或 undefined 时，整个表达式直接返回 undefined，不会继续执行右侧的访问操作。例如：
----- ---- - -----------
这个语句的意思是，如果 user 存在并且有 name 属性，则返回 user.name，否则返回 undefined。
另外，可选链式调用操作符还可以进行函数调用，例如：
----- ------ - -------------
这个语句的意思是，如果 obj 和 obj.foo 都存在，则调用 obj.foo，并返回其结果，否则返回 undefined。
下面是一个示例代码：
----- ---- - -
----- ------
-------- -
----- ----------
-
--
----- ---- - -------------------- -- ----------
----- ------- - ----------------------- -- ---------
----- ------- - ------------------ -- ---------上面的代码中，city 的值为 'Shanghai'，因为 user.address.city 存在。country 的值为 undefined，因为 user.address.country 不存在。getName 的值也为 undefined，因为 user.getName 不存在。
结论
空值合并和可选链式调用操作符是 ES11 中新增的两个重要特性，它们可以提高代码的可读性和可维护性，避免出现因为 null 或 undefined 而导致的错误。在编写前端代码时，可以适当运用这两个特性，提高代码的健壮性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6722f1992e7021665e0d8ca4