ES11 中可选链操作符与 Nullish Coalescing 操作符的使用案例
在开发 web 应用程序时，前端工程师经常会遇到需要处理传递到界面的数据，其中可能会包含许多层级的嵌套对象或数组，我们通常会使用条件语句来检查它们是否存在，然后访问它们的属性或元素。在 ES11 之前，JavaScript 并没有提供一种简单的方法来处理嵌套对象或数组（或其他深层次结构），这使得代码难以阅读、理解和维护。
ES11 引入了两个新的操作符：可选链操作符和 Nullish Coalescing 操作符，它们可以帮助 JavaScript 开发者优雅地处理这类问题。
可选链操作符
可选链操作符（?.）是一个新的操作符，可以在检查属性和方法是否存在的同时，访问它们。如果对象或属性不存在，则返回 undefined，而不是抛出 TypeError 异常。这意味着开发人员不再需要几行代码来检查对象是否存在，从而使代码更简洁、可读性更高。
示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
-------- -
----- ---- ------
------ -----
--
--
----------------------------------- -- --- ----
-------------------------------------- -- ---------
----------------------------------------- -- ------
----------------------------------------------------- -- ---------在上面的示例中，使用可选链操作符，我们可以优雅地访问 person 对象的 address 属性及其内部的 city 和 zipcode 属性。即使有一个属性不存在，代码也会正常运行，而不会抛出异常。
Nullish Coalescing 操作符
Nullish Coalescing 操作符（??）是另一个新的操作符，可以在检查一个值是否为 null 或 undefined 时，提供一个默认值。如果左侧表达式的值为 null 或者 undefined，则返回右侧表达式，否则返回左侧表达式的值。与 || 操作符不同，Nullish Coalescing 操作符不会将 false、0、NaN 或者空字符串视为 null 或 undefined。
示例：
-- -------------------- ---- ------- --- - - ----- --- - - -- ------------- -- --- -- - ------------- -- --- -- - --- --- - ----- --- ---- - --------- -- -------- ------- ------------------ -- -------- ------
在上述示例中，我们可以看到，使用 Nullish Coalescing 操作符，可以方便地提供默认值，而不需要写复杂的条件语句。
使用案例分析
以下是一个实际的使用案例，使用可选链操作符和 Nullish Coalescing 操作符来简化和优化代码。
假设我们的应用程序使用 API 从服务器获取数据，这些数据以 JSON 格式返回。在这个示例中，我们将从服务器获取一个对象，该对象包含有关用户身份验证状态的信息。我们使用 axios 库发起 API 请求并获取用户信息对象，然后使用可选链操作符访问对象的属性。在这个例子中，我们还使用 Nullish Coalescing 操作符来为缺失的属性提供默认值。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------------- -
--- -
----- - ---- - - ----- ----------------------------
----- ---------- - ---------------- -- ------
----- -------- - ---------------- -- -------- ------
----- ----- - ----------------- -- --- ----- -----------
----------------- -- ------ --- ----------------
----------------- ----- --------------
----------------- ------ -----------
-- ----- --------- ---- ---- -------
- ----- ------- -
---------------------
-
-上面的代码使用可选链和 Nullish Coalescing 操作符访问嵌套对象的属性和元素，这可以使我们的代码更简洁、可读性更高。如果对象或属性不存在，则在不抛出异常的情况下提供默认值。
结论
ES11 引入了可选链操作符和 Nullish Coalescing 操作符，使 JavaScript 开发人员更容易处理嵌套对象、数组以及深层次结构。这些操作符使代码更清晰、更简洁，同时提高了可读性和可维护性。因此，了解如何使用这些操作符是前端开发人员的一个重要技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67393ce6317fbffedf15ca7c