How to elegantly solve the situation of many if conditions in js?
problem description
case: there is a input box of such a form. It is required that the input data should not be greater than 10 or less than 1. It is also required that the difference between the value entered last time and that entered last time should not be more than 5. There are also various xxx conditions. According to my personal habit, I can write a lot of if return . (because of return, I didn"t use & & . By the way, I would like to ask you how to connect to return? after the & & logic operator.)
the environmental background of the problems and what methods you have tried
for the first question, my personal habit is to write more than one if return but feel inelegant.
the second question is why the logic operator & & cannot be followed by return . How to solve?
related codes
first question:
handleSubmit = (value) => {
if(value < 1 || value > 10) {
console.error("xxx");
return;
}
if(value - oldValue > 5) {
console.error("xxx");
return;
}
// xxxx
console.log("success!");
}
second question:
handleSubmit = () => {
value == 1 && return; //
}
Thank you!
I've seen a lot of this kind of problem. In my opinion, as long as the code can run correctly, you don't have to pursue the more metaphysical concept of "elegance". Is not entangled in the business code.
of course, if-else if it is very long, then readability is bound to decline. Let me give you two suggestions:
- make good use of strategy mode
- Business abstraction makes use of map, filter and other operations in fp
if you do these two things well, if-else will be much less. If the project is very complex, you can also introduce some simple Monad to extract the if-else logic, such as the common Maybe , Either , and so on.
on the second question, first of all, you need to distinguish the difference between an expression and a statement. return is a statement rather than an expression, so it cannot be used with the & & operator.
input data Filter recommends regular,
the second can be assigned with an intermediate variable. Finally, return
handleSubmit = () => {
var temp;
value == 1 && temp = '';
return temp
}
- this only depends on whether these
various xxx conditions can sum up the rules of reusability, for example, maybe your requirements have changed, there are multiple input and each value range is no longer 1q10 but any number. If not, there is no need to choose another way.
-
because return is not an expression, there is no way to evaluate it. should not be understood as b if a , but rather as choosing the value of a or b , for example, a is true , and choose the value of b .
var x;
var a = !x&&(y=2)
a//2
handleSubmit = () = > {
value == 1 && return; //
}
value = = 1 & & return is an expression, while return is a statement that cannot be written in an expression.
combined with the answer on the first floor, the judgment sentence of if condition can be abstracted with policy pattern and appended code
const NumberMap={
value_1_10:(value)=>{
return value < 1 || value > 10
},
value_5:(value,oldValue)=>{
return value - oldValue > 5
}
//...
}
let handleSubmit = (value) => {
if (NumberMap.value_1_10(value)) {
console.error("xxx");
return;
}
if (NumberMap.value_5(value,oldValue)) {
console.error("xxx");
return;
}
// xxxx
console.log("success!");
}
although the amount of code has not been greatly reduced, it is hoped that abstracting the judgment logic separately to facilitate future expansion will be helpful to you
.
