时间:2022-06-18 12:38:18 | 栏目:JavaScript代码 | 点击:次
项目中的一个小需求点,点击按钮,验证几十个条件框,判断所有条件框是否填写(选择)过数据(至少有一个条件判断为真)再执行对应操作
判断的条件框包含 Radio 单选框,Checkbox 多选框,Input 输入框,InputNumber 计数器, Select 选择器, Switch 开关等
项目使用的 Element 组件库 V2.15.6
不同条件对应的数据类型以及默认值
直接用 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 处理大量判断用这种方式使是不是更丝滑了 ^-^