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

一、案例效果

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

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

二、操作方法

1. 安装依赖(Babel)[为了避免出现兼容问题,装好对应的转换器]
npm install @babel/plugin-proposal-optional-chaining
2. 添加至项目.babel.config.js文件中
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
 ]
}
或者

Vue项目中支持可选链(链判断运算符)操作_第1张图片

备注: