随着 ECMAScript 2021 的发布，新的语言特性可选链（Optional Chaining）和 nullish 合并运算符（Nullish Coalescing Operator）被引入到了 JavaScript 中。这两个特性可以帮助开发者更加优雅地处理可能为 null 或 undefined 的值，从而提高代码的可读性和可维护性。
可选链
在 JavaScript 中，当我们需要访问一个对象的属性或方法时，如果该对象为 null 或 undefined，就会导致程序抛出 TypeError 异常。为了避免这种情况，我们通常需要使用 if 语句或三元运算符来判断该对象是否存在，再进行访问。
可选链（?.）提供了一种更加简洁优雅的方式来处理这种情况。它允许我们在访问对象的属性或方法时，如果该对象为 null 或 undefined，直接返回 undefined，而不会抛出异常。
下面是一个使用可选链的示例代码：
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
------- ---- ---- -----
----- ----------
------ ----
-
--
----- ------ - ----------------------
-------------------- -- ---- ---- ----
----- --- - -------------------
----------------- -- ---------在上面的代码中，我们使用了可选链来访问 user 对象的 address 属性和 street 属性。如果 address 或 street 为 null 或 undefined，将直接返回 undefined，而不会抛出异常。
nullish 合并运算符
在 JavaScript 中，当我们需要给一个变量赋值时，如果该变量的值为 null 或 undefined，我们通常会使用 || 运算符来提供一个默认值。但是，|| 运算符存在一个问题，它会将一些 Falsy 值（如 0、空字符串和 false）视为 null 或 undefined，从而导致错误的默认值被赋值给变量。
nullish 合并运算符（??）解决了这个问题。它只会在变量的值为 null 或 undefined 时，才会使用默认值。如果变量的值为 Falsy 值，nullish 合并运算符会将其视为有效值。
下面是一个使用 nullish 合并运算符的示例代码：
const name = null ?? 'Alice'; console.log(name); // 'Alice' const age = 0 ?? 18; console.log(age); // 0
在上面的代码中，我们使用了 nullish 合并运算符来给变量 name 和 age 赋值。如果 name 的值为 null 或 undefined，将使用默认值 'Alice'，而如果 age 的值为 0，将使用默认值 18。
结论
可选链和 nullish 合并运算符是 ECMAScript 2021 中非常实用的新特性，它们可以帮助我们更加优雅地处理可能为 null 或 undefined 的值，从而避免程序抛出异常和错误的默认值被赋值给变量。我们可以将它们应用于许多场景，例如访问对象的属性或方法、给变量赋值等。
在实际开发中，我们应该充分利用这两个特性，从而提高代码的可读性和可维护性。但是，我们也应该注意它们的使用场景，避免滥用导致代码难以理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677a23775c5a933a34114047
