?. js运算符的使用

可选链操作符是一个新的js api，它允许读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。目前处于Stage 3提案阶段，暂时不可以直接使用，可以通过babel编译器使用。

可选链操作符(?.)

语法

obj?.prop
obj?.[expr]
func?.(args)

使用介绍

比如，我们有一个对象obj，现在要访问它的深层属性baz。

const obj = {
  foo: {
    bar: {
      baz: 42,
      fun: ()=>{}
    },
  },
};

// 不使用?.
let baz = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz;

// 使用?.
let baz = obj?.foo?.bar?.baz; // 结果：42

函数调用和表达式

// 函数调用
obj.fn?.()
// 表达式
obj?.['prop' + 'Name]

我的应用

 this.interestLabelName = res.data?.cooperateIntentionName?res.data?.cooperateIntentionName.split(','):[];

使用

我们可以通过babel编译器来使用可以链操作符。

vsCode中使用会报错

cnpm install --save-dev @babel/plugin-proposal-optional-chaining

#下载#

在babel.config.js 插入（没有这个文件可以手动创建）

module.exports = {
    presets: [
      '@vue/app'
    ],
    plugins:[
      ["@babel/plugin-proposal-optional-chaining"]  //解析 可选链式语法
    ]
  }