前言
在前端开发中，我们经常会遇到空值的情况，例如对象属性不存在或者函数返回值为空等。在处理这些情况时，我们通常需要进行一些判断和处理。在 ECMAScript 2021 中，引入了 optional chaining 和 nullish 合并操作符，这两个新特性可以更好地处理空值，提高开发效率和代码可读性。
Optional Chaining
Optional chaining 是一个新的运算符，用于简化访问对象属性的过程。它可以处理对象属性不存在的情况，避免了使用繁琐的 if 判断语句。
基本用法
我们先来看一下 optional chaining 的基本用法。假设有一个对象 person，它有一个属性 name，但是没有属性 age：
----- ------ - - ----- ------- --
我们可以使用 optional chaining 访问属性 age，如果属性不存在，则返回 undefined：
------------------------------------ -- ---------
上面的代码中，?. 是 optional chaining 运算符，它表示如果属性 age 存在，则调用 toString 方法，否则返回 undefined。
多层嵌套
在实际开发中，我们经常会遇到多层嵌套的对象，例如：
----- ------ - -
----- --------
---- ---
-------- -
----- ----------
------- -----------
-
--如果我们要访问属性 address.city，传统的写法可能是这样的：
-- --------------- -- -------------------- - --------------------------------- -
使用 optional chaining，我们可以简化代码：
---------------------------------- -- ---------
函数调用
除了访问对象属性，optional chaining 还可以用于函数调用。假设有一个函数 getUser，它返回一个对象，对象中有一个属性 name，但是有时候函数可能返回 null：
-------- --------- - ------ ----- -
我们可以使用 optional chaining 调用函数 getUser，并访问返回值的属性 name：
----------------------------- -- ---------
注意事项
需要注意的是，optional chaining 只能处理 undefined 和 null，不能处理其他 falsy 值（例如 0、''、false 等）。如果属性的值为其他 falsy 值，仍然会报错。例如：
----- ------ - -
----- ---
---- ---
-------- -
----- ----------
------- -----------
-
--
---------------------------------------- -- ---------- ------ ---- -------- ------------- -- --Nullish 合并操作符
Nullish 合并操作符是一个新的运算符，用于简化处理空值的过程。它可以判断一个值是否为 null 或 undefined，如果是，则返回默认值。
基本用法
我们先来看一下 Nullish 合并操作符的基本用法。假设有一个变量 x，它可能为 null 或 undefined：
----- - - -----
我们可以使用 Nullish 合并操作符，判断 x 是否为空值，如果是，则返回默认值：
------------- -- ----------- -- ---------
上面的代码中，?? 是 Nullish 合并操作符，它表示如果 x 为 null 或 undefined，则返回 'default'，否则返回 x 的值。
多个变量的合并
在实际开发中，我们经常需要判断多个变量是否为空值，并返回第一个非空值。例如：
----- - - ----- ----- - - ---------- ----- - - -------- ------------- -- - -- --- -- -------
上面的代码中，a 和 b 都为空值，所以返回 c 的值。
注意事项
需要注意的是，Nullish 合并操作符只能判断 null 和 undefined，不能判断其他 falsy 值（例如 0、''、false 等）。如果需要判断其他 falsy 值，仍然需要使用 || 运算符。例如：
----- - - --- ------------- -- ----------- -- ---------
使用示例
下面是一个使用 optional chaining 和 Nullish 合并操作符的示例代码：
----- ---- - -
----- --------
---- ---
-------- -
----- ----------
------- -----------
-
--
-------- --------- -
------ -----
-
------------------------------------ -- ----------- -- -------
-------------------------------------- -- ----------- -- ---------
------------------------------ -- ----------- -- ---------
--------------------------- -- ----------- -- ---------上面的代码中，我们使用 optional chaining 和 Nullish 合并操作符，处理了访问对象属性和函数返回值可能为空的情况，避免了使用繁琐的 if 判断语句，提高了代码的可读性和效率。
总结
在 ECMAScript 2021 中，optional chaining 和 Nullish 合并操作符是两个非常实用的新特性，它们可以更好地处理空值，提高开发效率和代码可读性。在实际开发中，我们可以灵活运用这些新特性，避免繁琐的判断语句，写出更加简洁优雅的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e01db21886fbafa4d56224