场景说明

之前好长一段时间项目中从对象中获取深层次的对象属性我都是这样干的：

//获取vue父组件对象中的某个属性
let foData=null;
if(this.$parent && this.$parent.data && this.$parent.data.d_cont){
    foData=this.$parent.data.d_cont
}

这代码是不是又臭又长？于是有了下文。

可选链操作符

MDN文档可以从文档得知：当使用可选链时，如果对象属性存在将返回值，否则返回undefined。

let obj={
    name:'zerotower',
    company:{
       name:'xxx科技公司',
       year:16,
       city:'Beijing'
    }
}
const companyYear=obj?.company?.year //16
const companyStuff=obj?.company?.stuff //undefined

如果没有了可选链，我们可能就要这样写了：

let companyYear=0;
let companyStuff=0;
if(obj && obj.company && obj.company.year){
    companyYear=obj.company.year
}
if(obj && obj.company && obj.company.stuff){
    companyStuff=obj.company.stuff
}
//又臭又长

逻辑空赋值

我们有时希望取到特殊值（0，undefined,null）时给定一个默认值，例如上面的

companyStuff  //给定0作为默认

但是使用可选链的时候，可能会取到undefined,好吧，可能你要加上这一句

if(companyStuff===undefined){
    companyStuff=0
}

又多了三行代码，实在是不爽！于是，你可以使用逻辑空赋值语法

const companyStuff=obj?.company?.stuff ?? 0

具体语法参见MDN 如果取不到company属性，就会把默认值0赋过去，就不用再写三行又臭又长的代码了。

在项目中引入

下载库包

npm i @babel/plugin-proposal-optional-chaining --save-dev npm i @babel/plugin-proposal-nullish-coalescing-operator --save-dev

配置babel

//babel.config.js
module.exports = {
    presets: [[
        "@babel/preset-env",
    ]],
    plugins: [
        // 双问号
        '@babel/plugin-proposal-nullish-coalescing-operator',
        // 可选链
        '@babel/plugin-proposal-optional-chaining'
    ]
}

大功告成！由于我是使用了vite，如果你和我一样，请使用

npm i @rollup/plugin-babel --save-dev

//vite.config.js
import { getBabelOutputPlugin } from "@rollup/plugin-babel";
...
export default defineConfig({
    ...
    build: {
    rollupOptions: {
      plugins: [
        getBabelOutputPlugin({
          configFile: resolve(__dirname, "babel.config.js"),
        }),
      ],
    },
  }
    ...
})

在项目中使用可选链以及双问号