新版本的 ECMAScript 引入了三个新的逻辑赋值运算符

(1) 可选链接运算符(Optional Chaining Operator) 处于 ES2020 提案的第 4 阶段，因此应将其添加到类型中。它改变了会见工具内下属性的方法，尤其是深层嵌套的属性。它也可以作为 TypeScript 3.7 + 中的成果行使。

信托大部门开拓前端的的小搭档们城市碰着 null 和未界说的属性。JS 说话的动态特征使其无法不遇到它们。出格是在处理赏罚嵌套工具时，以下代码很常见：

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

    // I have a title! 

} 

上面的代码用于 API 相应，我必需理会 JSON 以确保名称存在。可是，当工具具有可选属性或某些设置工具具有某些值的动态映射时，也许会碰着相同环境，必要搜查许多界线前提。

这时辰，假如我们行使可选链接运算符，统统就变得越发轻松了。它为我们搜查嵌套属性，而不必显式搜刮梯形图。我们所要做的就是行使 “?” 要搜查空值的属性之后的运算符。我们可以随意在表达式中多次行使该运算符，而且假如未界说任何项，它将尽早返回。

(2) 对付静态属性用法是：

object?.property 

(3) 对付动态属性将其变动为：

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 

(4) 对付要领的挪用你可以这样写

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?.()  //不会执行 

(5) 与无效归并一路行使

提供了一种要领来处理赏罚未界说或为空值和表达提供默认值。我们可以行使??运算符，为表达式提供默认值

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

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

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

console.log(title); // codercao 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!