Judgment operation in JavaScript is one of the most common operations. The most conventional is of course if,
but the most commonly used and most flexible is another "person".
And operator
Utilizing the characteristics of the AND operator, when the first item is false, the first item will be returned directly without execution
Usage: statement1 && statement2
Note: statement1 needs to return a boolean value, otherwise it will be considered undefined
// 完整 demo 在文末
console.log(_true && true_fun());
// 执行 true_fun()
// 返回 true_fun() 的执行结果
console.log(_false && true_fun());
// 不执行 true_fun()
// 返回 _false
console.log(true_fun() && false_fun());
// 执行 true_fun() 后执行 false_fun()
// 返回 false_fun() 的执行结果
console.log(false_fun() && true_fun());
// 执行 false_fun()
// 不执行 true_fun()
// 返回 false_fun() 的执行结果
Conditional operator
Conditional operator is also called ternary expression, ternary operator,
the syntax of conditional operator is very straightforward, judge condition
condition is true execute statement1
condition is false execute statement2
Usage: condition? Statement1: statement2
// 完整 demo 在文末
console.log(_true ? true_fun() : false_fun());
// 执行 true_fun()
// 返回 true_fun() 的执行结果
console.log(_false ? true_fun() : false_fun());
// 执行 false_fun()
// 返回 false_fun() 的执行结果
Use anonymous arrays to achieve multiple result judgments
No matter if_else, &&, ?_: is a boolean value, it returns one of the two expected results.
When encountering more expected results, switch_case is used, or multi-layer if_else nesting is used to achieve
Although the function can be executed correctly, the amount of code is relatively large and the readability is relatively poor.
Here is a relatively lightweight method that can achieve multiple result judgments.
Everyone knows an array, pass in a legal subscript through [], and you can get the content
of the corresponding item. Using this function of the array, you can achieve multiple result judgments
Usage: [statement1, statement2, statement3 …][condition]
Note:
- Condition is not a boolean value, but the subscript value of the target item
- Change the anonymous array to a named array, which can be reused
// 完整 demo 在文末
var condition = 0
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
// 返回 statement1_fun 方法本身
// 返回结果后, 用 () 实现执行方法
console.log(["男", "女", "未知"][condition])
condition = 1
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
console.log(["男", "女", "未知"][condition])
condition = 2
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
console.log(["男", "女", "未知"][condition])
// 与前例同理
Use anonymous objects to achieve multiple result judgments
This method is actually an extension of "using anonymous arrays to achieve multiple result judgments". The
array becomes an object, and the incoming subscript becomes the incoming attribute name.
Use the diversity of object attribute names to achieve more complex judgment requirements.
Relatively, the code complexity will increase, the readability will become worse, and the simplicity of "one line of code" will be lost.
Usage: {statement1: “statement1”, statement2: “statement2”, statement3: “statement3”… }[condition]
Note: If you find the written code difficult to read, it means that the requirements you meet are not suitable for using this method
var condition = "a"
console.log({
a: "a", b: "b", c: "c" }[condition])
// 代码变得复杂了, 不利于阅读, 可能你最后会觉得 switch_case 或 多层 if_else 反而更好用
Complete Demo
It is easier to understand by executing a step alone
function true_fun() {
console.log("true")
return 1
}
function false_fun() {
console.log("false")
return 0
}
function statement1_fun() {
console.log("statement1_fun")
return "statement1_fun"
}
function statement2_fun() {
console.log("statement2_fun")
return "statement2_fun"
}
function statement3_fun() {
console.log("statement3_fun")
return "statement3_fun"
}
var _true = 1;
var _false = 0;
function step1() {
console.log(_true && true_fun());
// 执行 true_fun()
// 返回 true_fun() 的执行结果
console.log(_false && true_fun());
// 不执行 true_fun()
// 返回 _false
console.log(true_fun() && _true);
// 执行 true_fun()
// 返回 _true
console.log(true_fun() && false_fun());
// 执行 true_fun() 后执行 false_fun()
// 返回 false_fun() 的执行结果
console.log(false_fun() && true_fun());
// 执行 false_fun()
// 不执行 true_fun()
// 返回 false_fun() 的执行结果
};
function step2() {
console.log(_true ? true_fun() : false_fun());
// 执行 true_fun()
// 返回 true_fun() 的执行结果
console.log(_false ? true_fun() : false_fun());
// 执行 false_fun()
// 返回 false_fun() 的执行结果
};
function step3() {
var condition = 0
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
// 返回 statement1_fun 方法本身
// 返回结果后, 用 () 实现执行方法
console.log(["男", "女", "未知"][condition])
condition = 1
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
console.log(["男", "女", "未知"][condition])
condition = 2
console.log([statement1_fun, statement2_fun, statement3_fun][condition]())
console.log(["男", "女", "未知"][condition])
// 与前例同理
}
function step4() {
var condition = "a"
console.log({
a: "a",
b: "b",
c: "c"
}[condition])
// 代码变得复杂了, 不利于阅读, 可能你最后会觉得 switch_case 或 多层 if_else 反而更好用
}
step1()
step2()
step3()
step4()
end