#JS 判断运算符

#事情起因

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

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

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

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

#安装插件

安装babel-plugin插件

• 空值判断运算符「??」@babel/plugin-proposal-nullish-coalescing-operator

1npm install @babel/plugin-proposal-nullish-coalescing-operator -D

• 链式判断运算符「?.」@babel/plugin-proposal-optional-chaining

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

#插件配置

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

1module.exports = {
2	presets: ["@vue/cli-plugin-babel/preset"],
3	env: {
4		production: {
5			plugins: [
6				/* 移除 console.log 打印信息 */
7				"transform-remove-console",
8				/* 兼容 链式判断运算符 ?. */
9				"@babel/plugin-proposal-optional-chaining",
10				/* 兼容 空值判断运算符 ?? */
11				"@babel/plugin-proposal-nullish-coalescing-operator"
12			]
13		}
14	}
15};

#最后总结

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

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