让 js 中的 if 判断如丝般顺滑-阿里云开发者社区

让 js 中的 if 判断如丝般顺滑

2022-04-23 113

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 项目中的一个小需求点，点击按钮，验证几十个条件框，判断所有条件框是否填写（选择）过数据（至少有一个条件判断为真）再执行对应操作判断的条件框包含 Radio 单选框，Checkbox 多选框，Input 输入框，InputNumber 计数器， Select 选择器， Switch 开关等。

项目中的一个小需求点，点击按钮，验证几十个条件框，判断所有条件框是否填写（选择）过数据（至少有一个条件判断为真）再执行对应操作

判断的条件框包含 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
}