ES2020新特性：链判断运算符?.的优雅使用

"这篇文档介绍了JavaScript ES2020中新增的运算符——空值合并运算符(?.)和可选链(.?)，以及它们如何让代码变得更优雅、更安全。文档通过示例展示了如何使用这些运算符来避免深度访问对象属性时因中间路径为null或undefined而导致的错误。" 在JavaScript ES2020中，引入了两个非常有用的运算符，它们极大地提高了代码的可读性和安全性。这两个运算符分别是空值合并运算符(?.)和可选链(.?)。 空值合并运算符(?.)允许我们在尝试访问可能不存在的对象属性或调用可能未定义的方法时提供默认值。例如，当我们想要获取`message`对象中`body`的`user`的`firstName`属性，但不确定这些层级是否存在时，传统做法是使用逻辑与操作符(&&)来逐级检查。然而，使用空值合并运算符，我们可以直接写成`message?.body?.user?.firstName`。如果`message`、`body`、`user`中的任何一层是null或undefined，表达式将立即停止执行，并返回undefined，而不是抛出错误。如果不为空，则继续执行并返回`firstName`的值。为了防止返回undefined，通常会与或操作符(||)结合使用，为表达式提供一个默认值，如`message?.body?.user?.firstName || 'default'`。 可选链(.?)则是在链式调用中用于安全地访问深层属性或调用深层方法。如果链式调用的前一个对象为null或undefined，那么整个表达式会返回undefined，不会尝试访问后面的属性或方法。例如，`myForm.querySelector('input[name=foo]')?.value`会检查`querySelector`返回的元素是否为null或undefined，如果是，则返回undefined，否则返回元素的`value`属性。这避免了当试图访问不存在的元素时抛出TypeError。 运算符的其他用法包括访问动态属性和调用函数。例如，`obj?.[expr]`可以用来安全地访问由表达式`expr`确定的动态属性，而`func?.(args)`则用于安全地调用函数`func`，只有当`func`存在且为函数类型时才会执行。需要注意的是，如果`a?.b()`中的`b`不是一个函数，或者`a?.()`中的`a`不是一个函数，那么这些表达式将会报错。 这两个运算符的引入，使得JavaScript开发者能够编写更简洁、更健壮的代码，特别是在处理复杂的数据结构和深层的属性访问时。它们减少了对冗余条件检查的需求，提高了代码的可读性和维护性。在实际开发中，合理利用这些特性可以提升代码质量，减少潜在的运行时错误。