How to make if judgment in js as smooth as silk

Preface

A small requirement point in the project, click a button to verify dozens of condition boxes, determine whether all condition boxes have been filled (selected) with data (at least one condition is true) and then perform the corresponding operation

The judgment condition box includes Radio single-select box, Checkbox multiple-select box, Input input box, InputNumber counter, Select selector, Switch switch, etc.

The project uses the Element component library V2.15.6

Data types and default values ​​corresponding to different conditions

• Radio radio button string ''
• Checkbox multiple selection box array []
• Input input box string ''
• InputNumber counter number 0
• Select
  • Single choice string ''
  • Multiple selection array []
• Switch switch boolean false

Code Implementation

Idea 1

Use if to judge directly, and then the code is as follows (the variable is a simulation variable)

// Multi-condition judgment begins, as follows 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 {
  // If the condition is not met, prompt this.$message({
    message: 'Please select the conditions and try again',
    type: 'warning'
  })
  return false
} 

In actual project scenarios, variable names have many semantic characters. If you only write a few ifs, you will end up writing a long string. Then you can’t write anymore after writing a few (it feels like you are writing a bunch of shit).

Can it be achieved in a more elegant way?

Idea 2

Put the variables to be judged into an array, use map to process them into Boolean type, and use includes to determine whether the array contains the specified Boolean value.

//Multi-condition judgment begins, as follows 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 {
  // If the condition is not met, prompt this.$message({
    message: 'Please select the conditions and try again',
    type: 'warning'
  })
  return false
} 

Well, if we use this method to handle a large number of judgments, it will be smoother. ^-^

Summarize

This is the end of this article on how to make the if judgment in js as smooth as silk. For more relevant content about if judgment in js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

Reference Documentation

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