在 JavaScript ES11 中，引入了两个新的语法操作符：可选链和空值操作符。这两个新操作符可以使开发者更加轻松地处理对象的属性和方法，避免了因为属性或方法不存在导致的报错和异常情况。本文将详细介绍可选链和空值操作符的使用方法和示例代码，并探讨其在实际开发中的应用和指导意义。
1. 可选链操作符
在 JavaScript 中，如果一个对象的属性或方法不存在，尝试对其进行访问或调用时，会抛出 TypeError 异常。为了避免这种情况，我们通常需要使用 if 语句或三元运算符等手段进行判断，然后再进行访问或调用。这种方式虽然可行，但是会使代码变得冗长且难以维护。
可选链操作符 ?. 可以简化这种判断逻辑，使代码更加简洁和易读。它的作用是在对象的属性或方法访问中，如果前面的对象不存在或为 null 或 undefined，则不会抛出异常，而是直接返回 undefined。
下面是一个示例代码：
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
------- ---- ---- -----
----- ----------
------ ----
-
--
----- ------ - ---------------------
-------------------- -- ---- ---- ----
----- --- - ------------------
----------------- -- ---------
----- ----- - -------------------
------------------- -- ---------在上面的代码中，我们使用可选链操作符 ?. 来访问 user 对象中的 address 属性和其中的 street 属性。如果 address 属性不存在或为 null 或 undefined，则不会抛出异常，而是直接返回 undefined。同样地，如果 zip 属性或 phone 对象不存在，则也会返回 undefined。
2. 空值操作符
在 JavaScript 中，我们经常需要判断一个变量是否为 null 或 undefined，然后再进行操作。为了避免这种情况，我们可以使用空值操作符 ??，它可以为 null 或 undefined 的变量设置默认值。
下面是一个示例代码：
-- -------------------- ---- ------- ----- - - ----- ----- - - ---------- ----- - - -- ----- - - - -- ---------- --------------- -- --------- ----- - - - -- ---------- --------------- -- --------- ----- - - - -- ---------- --------------- -- -
在上面的代码中，我们使用空值操作符 ?? 来为变量 a 和 b 设置默认值。如果变量为 null 或 undefined，则会使用默认值。如果变量不为 null 或 undefined，则会使用其原始值。
3. 应用和指导意义
使用可选链和空值操作符可以使代码更加简洁和易读。它们可以避免因为属性或方法不存在导致的报错和异常情况，使代码更加健壮和可靠。在实际开发中，我们可以将它们与其他语法特性结合使用，如箭头函数、解构赋值、模板字符串等，以提高代码的可读性和可维护性。
需要注意的是，可选链和空值操作符只在较新的浏览器和 Node.js 版本中支持，如果需要在旧版本中使用，需要使用 polyfill 或转译工具进行转换。
4. 总结
本文介绍了 JavaScript ES11 中的两个新语法操作符：可选链和空值操作符。可选链操作符可以简化对象属性和方法的访问逻辑，避免因为属性或方法不存在导致的报错和异常情况；空值操作符可以为 null 或 undefined 的变量设置默认值，避免因为变量为 null 或 undefined 导致的异常情况。在实际开发中，我们可以将它们与其他语法特性结合使用，以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d777cd3423812e4b7f2d6