首页 JavaScriptJS知识点正文

Optional Chaining非常省时省力的语法

景先 JS知识点 2019-12-21 549 0

Optional Chaining

问题

dataJs
  .getData({
    type: this.type,
  })
  .then(_ => {
    if (_.data) {
      let data = _.data;
      if (data.result) {
        let result = data.result;
        if (result.details) {
          this.details = result.details;
        }
      }
    }
  });

简介

Optional Chaining(可选链),简称 OC,一个非常省时、省力、NB 的语法。表现形式为 ?.,一般使用场景分为 3 种,主要解决问题是当访问树状结构的对象时,需要逐个判断中间节点是否有效

obj?.prop; //静态调用
obj?.[expr]; //动态调用
func?.(...args); // 函数调用

原理

?.前面的变量为 null 或是 undefined 时,直接返回 undefined

a?.b;
a == null ? undefined : a.b;

a?.[x];
a == null ? undefined : a[x];

a?.b();
a == null ? undefined : a.b();

a?.();
a == null ? undefined : a();

例子

dataJs
  .getData({
    type: this.type,
  })
  .then(_ => {
        this.details = _.data?.result?.details;
    }
  });

安装

npm install --save-dev @babel/plugin-proposal-optional-chaining
// babel.config.js
module.exports = {
  ....
  plugins: ["@babel/plugin-proposal-optional-chaining"],
};

如果 ide 报错,建议卸载 vetur

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论