JavaScript中优雅处理多条件判断的两种方案

前言

在项目开发中遇到一个具体需求：点击按钮时，需要验证数十个条件输入框。核心逻辑是判断所有条件框是否至少有一个被填写或选择了数据（即至少有一个条件判断为真），只有满足该前提才执行后续操作。

这些待验证的条件输入框涵盖了多种类型，包括Radio单选框、Checkbox多选框、Input文本输入框、InputNumber数字计数器、Select选择器以及Switch开关等。

本项目前端框架采用Element组件库，版本号为V2.15.6。

不同输入控件对应的数据类型及其默认初始值如下所示：

• Radio单选框：字符串类型，默认值为空字符串''。
• Checkbox多选框：数组类型，默认值为空数组[]。
• Input输入框：字符串类型，默认值为空字符串''。
• InputNumber计数器：数字类型，默认值为0。
• Select 选择器
  • Select选择器中的单选选项：字符串类型，默认值为空字符串''。
  • Select选择器中的多选选项：数组类型，默认值为空数组[]。
• Switch开关：布尔类型，默认值为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判断语句极其冗长。仅仅写几个条件就会让代码变得非常长，这种写法让人感觉像是在处理一团混乱的代码。

那么，是否存在更优雅的实现方式呢？

思路二

可以将所有需要判断的变量放入一个数组中，利用map方法将它们转换为Boolean类型，然后使用includes方法检查数组中是否包含指定的Boolean值（即true）。

// 多条件判断开始，如下

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逻辑，处理大量判断时是否显得更加流畅和优雅？

总结

至此，关于如何在JavaScript中使if判断更加顺滑的文章介绍完毕。更多相关js中的if判断内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

参考文档

• developer.mozilla.org/zh-CN/docs/…
• developer.mozilla.org/zh-CN/docs/…
• developer.mozilla.org/zh-CN/docs/…