如何让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判断内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

参考文档

时间: 2021-10-09

JavaScript for循环 if判断语句(学习笔记)

今天学习了JavaScript里面的for循环以及if的判断语句 for(初始值:循环条件:操作){ 满足条件要执行的代码语句 } 初始值:循环前的初始化变量,通常为赋值表达式:建议用var赋值,可以加快运行速度. 循环条件:每次循环前要计算的条件,是运算符类别中的条件运算符,返回值为true或false,当返回值为true时执行循环,为false时退出循环.(往往是i>=n;或用逻辑运算符) 操作:每循环一次以后要计算的表达式,通常是递增++或递减--等赋值表达式. for语句中的三个参数,第

javascript if条件判断方法小结

条件语句用于基于不同的条件来执行不同的动作. 条件语句 通常在写代码时,您总是需要为不同的决定来执行不同的动作.您可以在代码中使用条件语句来完成该任务. 在 JavaScript 中,我们可使用以下条件语句: •if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码•if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码•if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行•switch 语句 - 使用

JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)

我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况.一般情况下,可以用 if/else 或 switch 来实现多个条件判断,但会出现一个问题:随着逻辑复杂度的增加,代码中的 if/else 和 switch 会越来越臃肿.本文将带你尝试写出更优雅的判断逻辑. 比如说下面这样一段代码: const onButtonClick = (status) => { if (status == 1) { sendLog('processing') jumpTo('IndexPage') } else

用js限制网页只在微信浏览器中打开(或者只能手机端访问)

用js限制网页只在微信浏览器中打开 js $(function(){ //判断页面是否是在微信浏览器打开 //对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器 var useragent = navigator.userAgent; if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') { window.location.href = "wxError.html";//若不是微信浏览器,跳转到

PHP 开发者该知道的 5 个 Composer 小技巧

Composer 是新一代的PHP依赖管理工具.其介绍和基本用法可以看这篇<Composer PHP依赖管理的新时代>.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方便. 1. 仅更新单个库 只想更新某个特定的库,不想更新它的所有依赖,很简单: composer update foo/bar 此外,这个技巧还可以用来解决"警告信息问题".你一定见过这样的警告信息: Warning: The lock file is not up to date wi

JS 中可以提升幸福度的小技巧(可以识别更多另类写法)

1. 类型强制转换 1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN '32' * 1 // 32 'ds' * 1 // NaN null * 1 // 0 undefined * 1 // NaN 1 * { valueOf: ()=>'3' } // 3 常用: 也可以使用+来转化字符串为数字 + '123' // 1

前端开发必知的15个jQuery小技巧

下面这些简单的小技巧能够帮助你玩转jQuery. 1.返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class=

客户端js性能优化小技巧整理

下面是一些关于客户端JS性能的一些优化的小技巧: 1. 关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2. 如果需要遍历数组,应该先缓存数组长度var len=arr.len

js 对象使用的小技巧实例分析

本文实例讲述了js 对象使用的小技巧.分享给大家供大家参考,具体如下: js中中,Object,Array ,Function 等都属于引用类型,他们的变量名都是指向对象的指针. 这样就有一个好处,当处理一个复杂json树的时候,想要单独改变其中某一个子对象属性时,不需要根据对象id遍历查找到这个对象了,而是可以直接通过事件方式将这个对象通过参数的方式赋值给一个专属变量,这个变量就指向这个对象,这样就可以随意改变对象属性了.改变这个变量对应的对象,整个json树中的这个对象也被相应的改变. 下面

JS实现的进制转换,浮点数相加,数字判断操作示例

本文实例讲述了JS实现的进制转换,浮点数相加,数字判断操作.分享给大家供大家参考,具体如下: <script> document.write("整数转换函数:parseInt(数据,底数)<br>"); document.write("10101=>" + parseInt("10101",2)+"<br>"); document.write("77=>" +

泛谈JS逻辑判断选择器 || &&

前言 || 与 &&在JS里与其它语言不一样,这是选择器运算符,而非逻辑运算符. 对于||来说,若判断为true,则返回第一个值,为false返回第二个值. &&相反,若判断为 true,则返回第二个,为 false为返回第一个值. 绝对不是像其它语言那样返回true或false,而是会返回第一个值或第二个值. 简单的测试代码 先是true与false的测试,后将false改为数值0. 除了|| 与&&之外易让人疑惑外,JS里的假值表也算是个大疑点. let

利用Node.js获取项目根目录的小技巧

假设我们的js文件写在server目录中,但是我们的资源文件存储在app/img目录中. 实现功能 如下图,我们需要在server/index.js文件中使用fs读取app/img/favicon.ico文件. 实现方法 在node.js只提供了一个 dirname全局变量.通过 dirname可以获得"C:\wwwroot\yidata\server".这时需要用到path. 首先 import path from 'path'; (ES6)或var path = require (