如何让js中的if判断如丝般顺滑详解
短信预约 -IT技能 免费直播动态提醒
前言
项目中的一个小需求点，点击按钮，验证几十个条件框，判断所有条件框是否填写（选择）过数据（至少有一个条件判断为真）再执行对应操作
判断的条件框包含 Radio 单选框，Checkbox 多选框，Input 输入框，InputNumber 计数器， Select 选择器， Switch 开关等
项目使用的 Element 组件库 V2.15.6
不同条件对应的数据类型以及默认值
- Radio 单选框 string ''
- Checkbox 多选框 array []
- Input 输入框 string ''
- InputNumber 计数器 number 0
- Select 选择器
- 单选 string ''
- 多选 array []
- Switch 开关 boolean false
代码实现
思路一
直接用 if 判断开干，然后大概代码如下(变量为模拟变量)
// 多条件判断开始，如下
if (obj.radio1 || obj.checkbox1.length > 0 || obj.input1 || obj.inputNumber1 > 0 || obj.select1 || obj.select2.length > 0 || obj.switch1 || obj.radio2 || obj.checkbox2.length > 0 || obj.input2 || obj.inputNumber2 > 0 || obj.select3 || obj.select4.length > 0 || obj.switch2 ...) {
// do something
} else {
// 条件不符，提示
this.$message({
message: '请选择条件后重试',
type: 'warning'
})
return false
}
实际项目场景中的变量名因为语义化字符很多， if 判断没写几个就写了很长一串, 然后写了几个就写不动了（感觉在写一坨 shi ）
能不能用更优雅的方式实现呢？
思路二
把这些需要判断的变量放到一个数组里，用 map 处理成 Boolean 类型，使用 includes 判断数组中是否包含指定的 Boolean 值
// 多条件判断开始，如下
const arr = [
obj.radio1,
obj.checkbox1.length,
obj.input1,
obj.inputNumber1,
obj.select1,
obj.select2.length,
obj.switch1,
obj.radio2,
obj.checkbox2.length,
obj.input2,
obj.inputNumber2,
obj.select3,
obj.select4.length,
obj.switch2
...
]
const arr1 = arr.map(item => Boolean(item))
if (arr1.includes(true)) {
// do something
} else {
// 条件不符，提示
this.$message({
message: '请选择条件后重试',
type: 'warning'
})
return false
}
好了，if 处理大量判断用这种方式使是不是更丝滑了 ^-^
总结
到此这篇关于如何让js中if判断如丝般顺滑的文章就介绍到这了,更多相关js中的if判断内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
参考文档
- developer.mozilla.org/zh-CN/docs/…
- developer.mozilla.org/zh-CN/docs/…
- developer.mozilla.org/zh-CN/docs/…
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
