在 JavaScript ES11 中，引入了两个新的操作符：可选链操作符和空值合并操作符。这两个操作符可以使我们更加方便和高效地处理对象和变量的值，特别是在涉及到嵌套对象和函数的时候。在本文中，我们将详细介绍可选链操作符和空值合并操作符的用法，并提供示例代码和实际应用场景。
可选链操作符
可选链操作符 ?. 用于安全地处理对象的属性和方法，特别是在访问嵌套对象或函数时。如下示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ---- -----
-
--
--------------------------------- -- -- ---- -----
------------------------------------ -- -- ---------
-- --------
---------------------------------- -- -- ---- -----
------------------------------------- -- -- ---------------可以看到，使用可选链操作符 ?. 可以使我们在不确定对象的属性或方法存在时，避免出现异常并返回 undefined。
同时，可选链操作符可以嵌套使用，方便处理嵌套对象的属性和方法，如下示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ---- ------
-------- -
----- ----
-
-
--
------------------------------------------- -- -- ----
---------------------------------------------- -- -- ---------------可以看到，当在嵌套对象中使用可选链操作符时，只要前面的属性或方法不存在，后面也会返回 undefined。
空值合并操作符
空值合并操作符 ?? 用于设置默认值，当操作符左侧的值为 null 或者 undefined 时，返回默认值，否则返回操作符左侧的值。如下示例：
const name = null || undefined || 'Alice'; console.log(name); // 输出 'Alice' // 使用空值合并操作符 const name2 = null ?? undefined ?? 'Bob'; console.log(name2); // 输出 'Bob'
可以看到，使用空值合并操作符 ?? 可以更加简洁和清晰地设置默认值，特别是在涉及到 null 或 undefined 值的时候。
同时，空值合并操作符也可以与可选链操作符组合使用，方便地处理对象的属性和变量的值，如下示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ---- ------
-------- ----
-
--
----------------------------------- -- --------- -- -- ----------- ----可以看到，使用空值合并操作符 ?? 可以方便地设置默认值，而不需要进行繁琐的判断。
实际应用场景
可选链操作符和空值合并操作符在实际应用中非常实用。如下示例：
-- -------------------- ---- -------
----- -------- - -
----- --------
---- ---
-------- -
------ --------------------
------ ----
-
--
-- ------------------
-----------------------------------
----------------------------------
---------------------------------------------
----------------------------------------- -- ----------可以看到，使用可选链操作符和空值合并操作符可以方便地处理嵌套对象和变量的值，避免出现异常，并设置默认值。
总结
可选链操作符和空值合并操作符是 JavaScript ES11 中新增的两个操作符，可以方便、高效地处理对象和变量的值。在实际应用中，特别是涉及到嵌套对象和变量的时候，可选链操作符和空值合并操作符更加实用，能够使代码更加简洁、清晰、减少错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fedf9895b1f8cacdd8b93d