可选链接运算符【?.】

可选链接运算符（Optional Chaining Operator） 处于ES2020提案的第4阶段，因此应将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深层嵌套的属性。它也可以作为TypeScript 3.7+中的功能使用。
前端都会遇到null和未定义的属性。JS语言的动态特性使其无法不碰到它们。特别是在处理嵌套对象时，以下代码很常见：

if (data && data.children && data.children[0] && data.children[0].title) {
    // 
} 

上面的代码用于API响应，我必须解析JSON以确保名称存在。但是，当对象具有可选属性或某些配置对象具有某些值的动态映射时，可能会遇到类似情况，需要检查很多边界条件。
这时候，如果我们使用可选链接运算符，一切就变得更加轻松了。它为我们检查嵌套属性，而不必显式搜索梯形图。我们所要做的就是使用“？” 要检查空值的属性之后的运算符。我们可以随意在表达式中多次使用该运算符，并且如果未定义任何项，它将尽早返回。
对于静态属性用法是：

object?.property

对于动态属性将其更改为：

object?.[expression]

上面的代码可以简化为：

let title = data?.children?.[0]?.title;

然后，如果我们有:

let data;
console.log(data?.children?.[0]?.title) // undefined
data  = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao

这样写是不是更加简单了呢？由于操作符一旦为空值就会终止，因此也可以使用它来有条件地调用方法或应用条件逻辑。

const conditionalProperty = null;
let index = 0;
console.log(conditionalProperty?.[index++]); // undefined
console.log(index);  // 0

对于方法的调用你可以这样写：

object.runsOnlyIfMethodExists?.()

例如下面的parent对象，如果我们直接调用parent.getTitle(),则会报Uncaught TypeError: parent.getTitle is not a function错误，parent.getTitle?.()则会终止不会执行。

let parent = {
    name: "parent",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      console.log(this.name)
    }
  };
  parent.getName?.()   // parent
  parent.getTitle?.()  //不会执行 

与无效合并一起使用
提供了一种方法来处理未定义或为空值和表达提供默认值。我们可以使用??运算符，为表达式提供默认值。

console.log(undefined ?? 'codercao'); // codercao

因此，如果属性不存在，则可以将无效的合并运算符与可选链接运算符结合使用以提供默认值。

let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao