在 ECMAScript 2020（ES11）中，JavaScript 引入了两个新的操作符：可选链和 nullish coalescing。这两个操作符都是为了简化代码、减少错误和提高代码可读性而设计的。
可选链操作符
在 JavaScript 中，我们经常需要访问一个嵌套对象的属性或方法，但是有时候这个对象可能不存在或者其中某个属性或方法也可能不存在。在以前，我们通常需要使用冗长的 if-else 语句或者三元表达式来判断这种情况，并且这样的代码非常难以维护。
为了解决这个问题，ES11 引入了可选链操作符，使得我们可以轻松地处理这种情况。可选链操作符（?.）可以用来检查一个变量是否为 null 或 undefined，如果是的话就不会执行它后面的属性或方法。
让我们来看一个例子：
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- ----------
-
--
------------------------------- -- ----------
--------------------------------- -- ---------
-- ----- -- ------------ -- ------------------ -
-------------------------------
-
--------------------------------- -- ----------在上面的例子中，我们使用了可选链操作符（?.）来检查 user、user.address 和 user.address.city 是否存在。如果其中某个变量不存在，那么这个表达式就会返回 undefined，而不会抛出错误。这样就可以避免使用 if-else 或三元表达式来检查变量是否存在。
nullish coalescing 操作符
在 JavaScript 中，有一些 falsy 值，比如空字符串、0、null 或 undefined。在以前，我们通常使用或运算符（||）来检查这种情况，并在变量为 falsy 值时使用默认值。
然而，或运算符（||）存在一个缺陷，它无法区分一个变量是真正的空值（null 或 undefined）还是一个 falsy 值。如果一个变量的值为 0 或空字符串，那么或运算符（||）会将它视为 falsy 值，这样就无法使用默认值了。
为了解决这个问题，ES11 引入了 nullish coalescing 操作符（??），它可以用来检查一个变量是否为 null 或 undefined，如果是的话就使用默认值。
让我们来看一个例子：
-- -------------------- ---- ------- ----- ---- - --- ----- -------- - ---- -- ------------ -- ----------- ----- -------- - ----- ----- ---- - -------- -- -------------- -- ------------- ----- -------- - --- ----- ---- - - ----- -------- -- ------------ --------- -------- -- ------------- -- ------------------ -- - ----- --- --------- ---- -
在上面的例子中，我们使用了 nullish coalescing 操作符（??）来检查 name 和 password 是否为 null 或 undefined。如果是的话，它就会使用默认值。这样就可以避免因为将空字符串或 0 视为 falsy 值而导致的错误。
总结
在 ECMAScript 2020（ES11）中，JavaScript 引入了可选链和 nullish coalescing 操作符，它们都是为了简化代码、减少错误和提高代码可读性而设计的。可选链操作符可以用来检查一个变量是否为 null 或 undefined，并在变量不存在时避免出现错误。nullish coalescing 操作符可以用来检查一个变量是否为 null 或 undefined，并在变量为 null 或 undefined 时使用默认值。使用这两个操作符可以减少代码量，并提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba287fadd4f0e0ff2b8109