JavaScript 语言的版本更新是前端开发人员需要了解和掌握的重要内容。在 ES11 中，有两个新特性非常有用，分别是可选链路径操作符和空值合并运算符。
可选链路径操作符
在 JavaScript 代码中，我们经常需要访问对象的嵌套属性，但是如果对象中某个属性为 null 或 undefined，会导致代码出现异常：
----- ---- - -
----- -------
-------- -
----- ---- ------
------- -----------
--
--
---------------------------------- -- ------------- ------ ---- -------- --------- -- ---------在上面的代码中，我们尝试访问 user.address.zipcode 属性，但是由于 address 属性中没有 zipcode 属性，所以会导致出现异常。
使用可选链路径操作符，我们可以更加安全地访问对象的属性，避免代码异常：
----- ---- - -
----- -------
-------- -
----- ---- ------
------- -----------
--
--
----------------------------------- -- --------------在上面的代码中，我们使用 ?. 运算符访问属性，如果 address 属性为 null 或 undefined，user.address?.zipcode 表达式会直接返回 undefined，而不会产生异常。
注意，可选链路径操作符可以用在对象的多个属性之间，例如：
----- ---- - -
----- -------
-------- -
----- ---- ------
------- -----------
--
--
------------------------------------------------ -- ---------在上面的代码中，我们使用了三个可选链路径操作符，代码不会报错。如果任何一个属性为 null 或 undefined，整个表达式都会直接返回 undefined。
空值合并运算符
JavaScript 中常常需要为某些变量设置默认值，我们通常使用 || 运算符实现。例如：
----- ------- - ----------- -- ------- --------
在上面的代码中，如果 showMessage 变量为 falsy 值（例如 null、undefined、false、0、'' 等），那么表达式的结果就是 'Hello, world!'。
ES11 新增的空值合并运算符 ?? 是 || 的增强版，它只有在左操作数为 null 或 undefined 时才返回右操作数的值。例如：
----- ------- - ----------- -- ------- --------
在上面的代码中，只有当 showMessage 变量为 null 或 undefined 时，message 才会被赋值为 'Hello, world!'。
除了我们常用的字符串默认值外，空值合并运算符还可以配合其他复杂类型的默认值。例如：
----- ---- - - ----- ------- ---- ----- -- -------------------- -- ---- -- --
在上面的代码中，user.age 为 null，所以 user.age ?? 18 表达式的结果为 18。
结论
可选链路径操作符和空值合并运算符是 ES11 新增的两个实用特性，能够帮助我们更加优雅地处理对象属性的访问和变量默认值的设置。在实际开发中，合理使用这两个特性可以提高代码的可读性和健壮性。
参考
- ECMAScript 2020 Language Specification
- Understanding the JavaScript optional chaining operator
- Nullish Coalescing in JavaScript
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6721ffa42e7021665e09d66a