From Window.console&&console.log (123) on JS and arithmetic logic (&&)

Source: Internet
Author: User

    • From Window.console&&console.log (123) on JS and arithmetic logic (&&)

Www.cnblogs.com Source: www.cnblogs.com Release Date: 2015-03-01


One, JS and arithmetic
Remember the first time I saw Window.console&&console.log (123), when I knew what it could do but didn't go into it, I finally figured it out after the study. To understand this, first understand the three points of knowledge
First: Short Circuit principle
This is very clear to everyone, when doing and computing, "True is true, a false is false", such as
True&&true==true
True&&false==false
False&&false==false
False&&true==false

Second: Which of the JS logical operations is false and which is true
In JS, 0, "", ", null, False, Undefined, Nan Boolean values are false, the rest is true---Please note that I am talking" boolean "

Console.log (False==false)//true
Console.log (0==false)//true
Console.log ("" ==false)//true
Console.log (' ==false ')//true
Console.log (Nan==false)//false
Console.log (Null==false)//false
Console.log (Undefined==false)//false

However, if you pass a Boolean conversion
Console.log (Boolean (false) ===false);
Console.log (Boolean (0) ===false);
Console.log (Boolean ("") ===false);
Console.log (Boolean (") ===false);
Console.log (Boolean (NaN) ===false);
Console.log (Boolean (null) ===false);
Console.log (Boolean (undefined) ===false);
They're finally happy to be false.


Then test the other:
Console.log (Boolean ([]) ===true);
Console.log (Boolean ({}) ===true);
Console.log (Boolean ({}) ===true);
Console.log (Boolean (' 0 ') ===true);
Console.log (Boolean ("0") ===true);
Console.log (Boolean (Function) ===true);
Console.log (Boolean (Object) ===true);
And a very rare infinity. Console.log (Boolean (Infinity) ===true);

Third: The JS operator (&&) Operation rules
Understand the first and second, in order to really understand the JS arithmetic rules, why say?
First of all, JS and the operation is to follow the principle of short circuit,
Second, the expressions on both sides of the,&& are eventually converted to Boolean values, i.e. {},[], "", nan,undefined and null, and so on, without exception the Boolean value, that is, the value of its Boolean () to be compared.
Next, the JS operator is special in that it returns the value of the expression, not the Boolean value of the expression

In general, there is an expression a1,a2, ... An (n>=2), when performed and calculated, A1&&a2&&......&&an, starting from A1,
1. If Boolean (Ai) ===true, execute Boolean (A (i+1)), (I>=1,i+1<=n)
1.1 If Boolean (A (i+1)) ===false, returns the value of a (i+1)
1.2 If I+1=n returns the value of a (i+1)
1.3 If Boolean (A (i+1)) ===true, repeat step 1
2. If Boolean (Ai) ===false, do not execute Boolean (A (i+1)), (I>=1), return the value of Ai


Examples are as follows
var a=1&&2//return 1
var a=0&&2//Return 0
var a=1&& "Test"//return "test"
var a= "" &&1//Return ""
var a=1&&undefined//return undefined
var a=1&&null//return NULL
var a=1&&[]&& "Test"//return "test"
var a=1&&[]&&undefined//return undefined
Why?
The above three points are already involved, such as Var a=1&&undefined the logic behind it is as follows
1. The first expression, 1, is not a Boolean value, so it is converted to a Boolean value of Boolean (1)
2.Boolean (1) ===true, so the next expression is executed undefined
3.undefined is not a Boolean value, so it is converted to a Boolean value of Boolean (undefined), Boolean (undefined) ===false
4. Compare true!==false on both sides of operator
3. Returns the value of the expression with a Boolean value of false, this example is undefined, assigned to a

See another example, var a=[]&& "test"
1. The first expression, [], is not a Boolean value and is therefore converted to a Boolean value of Boolean ([])
2.Boolean ([]) ===true, so the next expression "test" is executed
3. "Test" is not a Boolean value, so it is converted to a Boolean value of Boolean ("Test"), Boolean ("Test") ===true
4. Compare true===true on both sides of operator
3. Because the result of the entire evaluation is true, the value of the last expression with a Boolean value of TRUE is returned, this example is "test", assigned to a

Now, then, to analyze Window.console&&console.log (123)

In modern browsers, such as Chrome, because the JS engine implements the console and there is a console.log attribute, so
1. The first expression, Window.console, is not a Boolean value, so it is converted to a Boolean value of Boolean (Window.console)
2.Boolean (window.console) ===true, so executes the next expression Console.log (123)
3. Execute Console.log (123), print 123
4.console.log (123) No return value, or Console.log (123) return value is undefined
5.undefined is not a Boolean value, so it is converted to a Boolean value of Boolean (undefined), Boolean (undefined) ===false
6. Compare True!==false on both sides of operator
7. Returns the value of the expression with a Boolean value of false, this example is undefined, assigned to a

If the browser does not support the console, then
1. The first expression, Window.console, is not a Boolean value, so it is converted to a Boolean value of Boolean (Window.console)
2.Boolean (window.console) ===false, so the next expression is not executed
3. Returns the value of the expression with a Boolean value of false, this example is undefined

Second, the clever use of JS and operation
skillfully use and operation, it can really reduce a lot of code, such as Window.console&&console.log (123) with if to describe, the following program
if (window.console) {
if (&console.log) {
Console.log (123)
}
}
Look at an example, commonly used to display greetings according to time, 0 to 6 points, showing "late at night"; 6 to 12 shows "Good Morning" 12 to 18 "Good afternoon", 18 to 23 "Good evening"
function ShowTime (curtime) {
var greeting= "";
if (curtime>=0&&curtime<6) {
greeting= "is late";
} else if (curtime>=6&&curtime<12) {
greeting= "Good Morning";
} else if (curtime>=12&&curtime<18) {
greeting= "Good Afternoon";
} else {
greeting= "good Evening";
}
return greeting;
}
Console.log (ShowTime (5));
Console.log (ShowTime (9));
Console.log (showTime);

If the symbols are used and operational.
function ShowTime2 (curtime) {
var greeting= (curtime>=0&&curtime<6) && "late at Night") | | ((curtime>=6&&curtime<12) && "Good Morning") | | ((curtime>=12&&curtime<18) && "Good Afternoon") | | ((curtime>=16) && "Good Evening")
return greeting;
}
Console.log (ShowTime2 (5));
Console.log (ShowTime2 (9));
Console.log (ShowTime2 (22));
One line of code takes care of a bunch of if, of course, while streamlining the code, it also degrades the readability of the code, and if it is to be used and calculated, it is recommended to write appropriate comments to improve the readability of the code.

In addition, in JS, 0, "", "" and Nan's Boolean value is also false, if the program is only to judge undefined and null, use and operation, because the widening of the range of false judgment, will lead to unpredictable bugs.
If you're just judging undefined and null, use the IF bar honestly.

    • Related articles
    • JS Window Object ExtJS Window usage Detailed
      JS Window.onload loading multiple functions and appending functions JS window.open () Method Xiang Solution

From Window.console&&console.log (123) on JS and arithmetic logic (&&)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.