ES2020 “可选链“ for vue/cli 3+

最新推荐文章于 2024-07-19 10:53:52 发布

@Andy

最新推荐文章于 2024-07-19 10:53:52 发布

阅读量568

点赞数

文章标签： js vue javascript html5 es6

本文链接：https://blog.csdn.net/weixin_43098527/article/details/109726667

版权

ES2020 “可选链” for vue/cli 3+

平时开发过程中一定有多层对象嵌套当取可选值如 obj.a.b.c时，如果b不存在则会报错

这样报错并不是我们想要的结果，通常我们希望无值则return null
为了避免报错我们可以选择三元运算符，且运算符或if else来避免

    console.log(
            this.obj
                ? this.obj.a
                    ? this.obj.a.b
                        ? this.obj.a.b.c
                        : undefined
                    : undefined
                : undefined
        )

在这里插入图片描述
这样写就很不优美了
所以现在可以用 es2020 提供的 “可选链” 如图

 console.log(this.obj?.a?.b?.c)

在vuecli3 中引入可选链
1：安装依赖 cnpm install @babel/plugin-proposal-optional-chaining -S
2:在babel.config.js中的 plugins中添加 “@babel/plugin-proposal-optional-chaining”
在这里插入图片描述