首页> JAVASCRIPT教程

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

withpy 2021-10-29

简介条件判断语句是程序开发过程中一种经常使用的语句形式,和大部分编程语言相同,JavaScript 中也有条件判断语句,这篇文章主要给大家介绍了关于如何让js中的if判断如丝般顺滑的相关资料,需要的朋友可以参考下

前言

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

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

相关文章

  • python实现由数组生成对称矩阵

    本文给大家分享的是由数组生成对称矩阵的思路并附上了使用Python实现的代码,希望大家能够喜欢

  • 小程序实现滑动块效果

    这篇文章主要为大家详细介绍了小程序实现滑动块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  • jupyter notebook 写代码自动补全的实现

    这篇文章主要介绍了jupyter notebook 写代码自动补全的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • Python3 实现减少可调用对象的参数个数

    今天小编就为大家分享一篇Python3 实现减少可调用对象的参数个数,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  • 微信小程序结合mock.js实现后台模拟及调试

    这篇文章主要介绍了微信小程序结合mock.js实现后台模拟及调试,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • Python 将Matrix、Dict保存到文件的方法

    今天小编就为大家分享一篇Python 将Matrix、Dict保存到文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧