纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

参谋总长萨博   2021-10-12 我要评论
想了解怎样让js中的if判断如丝般顺滑详解的相关内容吗,参谋总长萨博在本文为您仔细讲解js中的if判断的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js的if条件判断,js的if条件判断,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 处理大量判断用这种方式使是不是更丝滑了 ^-^

总结

参考文档


相关文章

猜您喜欢

  • MyBatis缓存机制 带你深入理解MyBatis缓存机制

    想了解带你深入理解MyBatis缓存机制的相关内容吗,曾吹雨在本文为您仔细讲解MyBatis缓存机制的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:mybatis缓存,mybatis一级缓存,mybatis缓存机制,下面大家一起来学习吧。..
  • Java 多线程 一文精通Java 多线程之全方位解读

    想了解一文精通Java 多线程之全方位解读的相关内容吗,青素i在本文为您仔细讲解Java 多线程的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,多线程,Java,Thread,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.zeLdagames.net 【行业软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式