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

参考文档

赞 (0)

相关推荐

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

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

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

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

  • javascript if条件判断方法小结

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

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

    目录 前言 代码实现 思路一 思路二 总结 参考文档 前言 项目中的一个小需求点,点击按钮,验证几十个条件框,判断所有条件框是否填写(选择)过数据(至少有一个条件判断为真)再执行对应操作 判断的条件框包含 Radio 单选框,Checkbox 多选框,Input 输入框,InputNumber 计数器, Select 选择器, Switch 开关等 项目使用的 Element 组件库  V2.15.6 不同条件对应的数据类型以及默认值 Radio 单选框  string  '' Checkbox

  • JS中call/apply、arguments、undefined/null方法详解

    JS中call/apply、arguments、undefined/null方法详解

    a.call和apply方法详解 -------------------------------------------------------------------------------- call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指

  • JS中队列和双端队列实现及应用详解

    JS中队列和双端队列实现及应用详解

    队列 队列 双端队列数据结构 应用 用击鼓传花游戏模拟循环队列 用双端对列检查一个词是否构成回文 生成 1 到 n 的二进制数 队列和双端队列 队列遵循先进后出(FIFO, 也称为先来先服务) 原则的. 日常有很多这样场景: 排队购票.银行排队等. 由对列的特性,银行排队为例, 队列应该包含如下基本操作: 加入队列(取号) enqueue 从队列中移除(办理业务离开) dequeue 当前排队号码(呼叫下一个人) peek 当前队列长度(当前排队人数) size 判断队列是不是空 isEmpty

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • js中使用使用原型(prototype)定义方法的好处详解

    经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存. 当然,这种说法没有任何问题,只是在实现上,并非只有使用prototype的方式才能达到这样的效果,我们可以将方法以函数的形式定义在构造函数之外,然后在构造函数中通过this.method = method的方式,这样生成的实例的方法也都通过索引指向一个函数,具体如下:

  • JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

    排序算法的介绍 排序也称排序算法 (Sort Algorithm),排序是将 一组数据 , 依指定的顺序 进行 排列的过程 . 排序的分类 1)  内部排序 : 指将需要处理的所有数据都加载 到 内部存储器(内存) 中进行排序. 2) 外部排序法: 数据量过大,无法全部加载到内 存中,需要借助 外部存储(文件等) 进行 排序. 常见的排序算法分类 算法的时间复杂度 度量一个程序(算法)执行时间的两种方法 1.事后统计的方法 这种方法可行, 但是有两个问题:一是要想对设计的算法的运行性能进行评测,

  • 浅谈js中几种实用的跨域方法原理详解

    浅谈js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同

  • JS中的算法与数据结构之列表(List)实例详解

    本文实例讲述了JS中的算法与数据结构之列表(List).分享给大家供大家参考,具体如下: 前言 前端很少有机会接触到算法,大多都交互性的操作,所以不少前端工程师会抱着这么一种想法:我是做前端的,为什么要学数据结构与算法?没有数据结构与算法,我一样很好的完成工作.实际上,算法是一个宽泛的概念,我们平时写的任何代码都可以成为算法,它是对一个问题的解决方案的准确而完整的描述,是解决一系列问题的清晰指令,它代表着用系统的方法描述解决问题的策略机制.随着现在互联网的飞速发展,前端工程师已不是靠几个选择器操

  • JS中的算法与数据结构之队列(Queue)实例详解

    本文实例讲述了JS中的算法与数据结构之队列(Queue).分享给大家供大家参考,具体如下: 队列(Queue) 我们之前说到了栈,它是一种比较高效的数据结构,遵循 先入后出(LIFO,last-in-first-out) 的原则.而今天我们要讨论的队列,它也是一种特殊的列表,它与栈不同的是, 队列只能在队尾插入元素,在队首删除元素,就像我们平时排队买票一样~ 队列用于存储按顺序排列的数据,遵循 先进先出(FIFO,First-In-First-Out) 的原则,也是计算机常用的一种数据结构,别用

  • JS中的算法与数据结构之栈(Stack)实例详解

    JS中的算法与数据结构之栈(Stack)实例详解

    本文实例讲述了JS中的算法与数据结构之栈(Stack).分享给大家供大家参考,具体如下: 栈(Stack) 上一篇我们说到了列表,它是一种最自然的数据组织方式,如果对数据的存储顺序要求不重要,那么列表就是一种非常适合的数据结构,但对于计算机其他的一些应用(比如后缀表达式),那么列表就显得有些无能为力, 所以,我们需要一种和列表功能相似但更复杂的数据结构. 栈,又叫堆栈,是和列表类似的一种数据结构,但是却更高效,因为栈内的元素只能通过列表的一端访问,称为栈顶,数据只能在栈顶添加或删除,遵循 先入后

随机推荐