> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# 判断运算符

## 事情起因

近期开发前端项目时，打包和发布代码都是基于 Jinkens 的自动化构建部署；项目采用的技术是基于 Vue2.x 和 Element UI 的后台管理系统。因为逻辑判断太多，看到“MDN”上的语法，就在实际开发中使用的链式运算符；本地开发过程中，无论是编译和打包都没有报任何错误。但是在提交代码后采用“Jinkens”构建前端项目时，竟然报错了，❌ 错在 ES2020 的这两个运算符“**?.**”和“**??**”，因为不支持导致的**Jinkens 打包失败**。

发现构建不通过，心想，只能改代码了。因为时间比较紧张，着急提交测试。但是一搜索，满屏都是 🆕 新运算符的判断写法，现在在改代码显然是来不及了。虽然整个项目从头到尾基本都是我一个人开发的，但是时间过去这么久了，有些地方的逻辑代码我再回去看看也需要浪费好些时间。最后只能在网上搜索相应的解决方案了。

前期开发使用链式判断运算符空值判断运算符，无论是测试环境部署还是本地项目运行或者打包，都没有一点问题，这次真是给我整了个措手不及。奈何要着急交付提交测试，只能硬着头皮尝试了。

给的最多的方案，就是说 ES 语法太新，没有做兼容处理，所以只能想办法，找对应的插件来兼容或解析“链式判断运算符”和“空值判断运算符”了，找了好久，最终找到解决问题的方案，现在做下记录，以便后续再次遇到的时候，能够快速解决。

## 安装插件

**安装**[**babel-plugin**](https://www.npmjs.com/search?q=keywords:babel-plugin)**插件**

- 空值判断运算符「??」[**@babel/plugin-proposal-nullish-coalescing-operator**](https://www.npmjs.com/package/@babel/plugin-proposal-nullish-coalescing-operator)


```sh [npm]
npm install @babel/plugin-proposal-nullish-coalescing-operator -D
```

```sh [yarn]
yarn add @babel/plugin-proposal-nullish-coalescing-operator -D
```

```sh [pnpm]
pnpm add @babel/plugin-proposal-nullish-coalescing-operator -D
```

```sh [bun]
bun add @babel/plugin-proposal-nullish-coalescing-operator -D
```

```sh [deno]
deno add npm:@babel/plugin-proposal-nullish-coalescing-operator -D
```

- 链式判断运算符「?.」[**@babel/plugin-proposal-optional-chaining**](https://www.npmjs.com/package/@babel/plugin-proposal-optional-chaining)


```sh [npm]
npm install @babel/plugin-proposal-optional-chaining -D
```

```sh [yarn]
yarn add @babel/plugin-proposal-optional-chaining -D
```

```sh [pnpm]
pnpm add @babel/plugin-proposal-optional-chaining -D
```

```sh [bun]
bun add @babel/plugin-proposal-optional-chaining -D
```

```sh [deno]
deno add npm:@babel/plugin-proposal-optional-chaining -D
```

## 插件配置

- 在 vue 项目中的 **“babel-config.js”** 中对文件进行相应的配置，可以根据自己的实际情况进行相应的调整。

```javascript title="插件配置"
module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
    env: {
        production: {
            plugins: [
                /* 移除 console.log 打印信息 */
                "transform-remove-console",
                /* 兼容 链式判断运算符 ?. */
                "@babel/plugin-proposal-optional-chaining",
                /* 兼容 空值判断运算符 ?? */
                "@babel/plugin-proposal-nullish-coalescing-operator",
            ],
        },
    },
};
```

## 最后总结

新的逻辑判断运算符使用起来很顺手，同时也一定程度上减少了因为逻辑判断导致的数据处理错误。最初判断一个多层次的数据对象是否存在某一个值，需要每层都做数值的判断处理，这样处理起来十分的麻烦，处理判断逻辑写的也比较多。

自从使用了 **链式判断运算符** 和 **空值判断运算符**，只要梳理清楚自己想要取的值，做相依的判断即可，原来好几个逻辑与和逻辑或的判断，现在一句话就可以搞定，高效的同时减少了代码量，也减少了逻辑判断，防止不必要的错误出现，从而提升工作效率，早点关电脑下班！！！🚗