A brief discussion of " && " and " || " in javascript

Sometimes, we will find a lot of " && " and " || " in the jQuery framework or other js plug-ins. So what do these two signs mean? how to use? I think it's still necessary to delve a little deeper.

1. Principle:

&& Operator characteristics: As long as one of the logical operation expressions is false, the value of false will be taken. If it is true, the value will be taken after it, and if it is false, it will be taken before it.

|| Operator characteristics: As long as one of the logical operation expressions is true, the value of true will be taken. If it is true, it will be taken first, and if it is false, it will be taken last.

In js logical operations, we know that the five data types 0, "", null, false, undefined, and NaN will be judged as false. Then, during the logical operation of js, we can make corresponding judgments based on the above principles and these five data types. Go directly to the DEMO...

2. Original DEMO:

Show the problem first! ! !

If we want to judge the grade based on the student's performance, for example: 90 points means A, 80 points means B, 60 points means C, and the rest means D.

Then we can do this:

JS code:

var score = 90;
var grade = '';
if(score === 90){
 grade = "A";
}else if(score === 80){
 grade = "B";
}else if(score === 60){
 grade = "C";
}else{
 grade = "D";
}
console.log("当前学生等级为：" + grade); // 当前学生等级为：A

Or this:

var score = 90;
var grade = '';
switch(score){
 case 90:
  grade = "A";
  break;
 case 80:
  grade = "B";
  break;
 case 60:
  grade = "C";
  break;
 default:
  grade = "D";
  break;
};
console.log("当前学生等级为：" + grade); // 当前学生等级为：A

3. Optimize DEMO:

In fact, if we use "&&" and "||", we don't have to be as troublesome as above.

var score = 90;
var grade = (score===90 && 'A') || (score===80 && 'B') || (score===60 && 'C') || 'D';
console.log("当前学生等级为：" + grade); // 当前学生等级为：A

The above code can be understood like this:

If the value of score is equal to 90, then the logical expression of score===90 is established (that is, true) , the subsequent assignment operation of 'A' will be executed, and the subsequent "||" logical operation can also be ignored (because the characteristic of the "||" operator is that once the previous one is true, there is no need to execute it later).

If the value of score is not equal to 90, then the logical expression score===90 does not hold (that is, it is false). According to the characteristics of the "&&" operator, we know that "(score=== 90 && 'A')" this code will not execute the subsequent assignment operation of 'A'. At the same time, since the whole code "(score===90 && 'A')" is false, then according to "|| " characteristic, the entire logical expression will continue to be executed.

By analogy, if all the previous logical expressions are not true, then according to the characteristics of "||" (if all are false, the last one will be taken), the final grade assignment will be "D".

We can also use JSON form to process the above logical operations:

var score = 90;
var grade = {90:"A", 80:"B", 60:"C"}[score] || 'D';
console.log("当前学生等级为：" + grade); // 当前学生等级为：A

Here we use the properties of the JSON object to read, when "JSON object.property value" When it exists (is true), the key value of the corresponding attribute (A, B or C) will be obtained. When the score attribute value does not exist in the JSON object, the content after "||" will be executed, that is, grade will be assigned the value "D".

Of course, we will find that the above numerical comparison is not very practical. For example, when a student's score is 85 points, the grade will also become "D", which is obviously inappropriate! ! !

So we can further optimize the above code and change the "equality comparison" of numerical values ​​to "range interval comparison".

var score = 85;
var grade = (score>=90 && 'A') || (score>=80 && 'B') || (score>=60 && 'C') || 'D';
console.log("当前学生等级为：" + grade); // 当前学生等级为：B

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more articles on “ && ” and “ || ” in JavaScript, please pay attention to the PHP Chinese website!