Vue项目中支持可选链（链判断运算符）操作

前言

在开发过程中拿到一个内嵌比较深的值需要做很多的判断，来保证没有数据而报错，比如：

 const obj = {
            a: {
                b: {
                    c:"1"
                }
            }
        }
取c, 正确的做法是： const cValue = (obj && obj.a && obj.a.b && obj.a.b.c) || ''; // 需要判断4次，每一层是否有值

ES2020

Optional Chaining Operator（?.） ：直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。具体用法可参考ES6( ES6）

取c const cValue = obj?.a?.b?.c  //1 

如何在项目中支持可选链

1. 安装依赖（Babel）

为了避免出现兼容问题，装好对应的转换器

npm install @babel/plugin-proposal-optional-chaining

2.添加至项目.babel.config.js文件中：

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
 ]
}

友情提示：