Small case-operators that JavaScript should pay attention

Source: Internet
Author: User
Tags bitwise operators

As a scripting language, JavaScript provides operators that operate data values like its predecessors, such as arithmetic operators, bitwise operators, Relational operators, and equal operators. You can use the JS operator in the same way as other common languages such as C and C #. However, this is far from the case. Its objects are not limited to specific types, but can be used for any type, at the same time, there is a big difference in processing.

 

Arithmetic Operators

You don't need to say much about the operations ++,-, +, and-on numeric types. js can perform this operation on any other types. Let's look at several instances:

First declare some variables. These variables are used in the example in this article:

       var a = 123;       var b = "123";       var c = "123d";       var e = true;       var f = false;       var g = {};       function h_f() { };       h_f.prototype.valueOf = function () { return 123; };       h_f.prototype.toString = function () { return 456; };       var h = new h_f();       var i_f = function(){};       i_f.prototype.toString = function () { return 123; };       var i = new i_f();

 

Then, perform the following operations:

       a++;b++;c++;e++;f++;g++;h++;i++;       console.log(a + "|" + b + "|" + c + "|" + e + "|" + f + "|" + g + "|" + h + "|" + i);

 

In the browser console, we can see the result: 124 | 124 | Nan | 2 | 1 | Nan | 124 | 124. In this way, we can draw a simple conclusion, JS will automatically call number () for the operand to convert the operand to a value first, and then execute the operation. For the number () conversion rules, see the small case that JavaScript should pay attention to-data type.

 

In fact, JS only performs the number () conversion operation on the operands when performing such numeric operations as ++,-, Mona +, Mona, and binary-, and, however, the addition operation for binary elements is not: if any value is a string, JS will automatically perform the tostring () operation for another operand, and then execute String concatenation.

 

Boolean operator (! , &, |)

In fact, most of us see them as a logical judgment statement, such as if (condition1 &&! Condition2 | condition3). In the small case of JavaScript, we know that JS is the default such statement to execute the Boolean () operation, however, we mainly discuss the operations in the following example.

 

console.log(!a + "|" + !b + "|" + !c + "|" + !e + "|" + !f + "|" + !g + "|" + !h + "|" + !i);

 

The variable is still in the previous example. The result is as follows: false | true | false, we can also consider it as a logical non-operator after the Boolean () operation is executed on the operator, but this is not true for &, |. (We usually use two non-operations, such !! A to simulate Boolean () conversion)

 

Example:

       console.log(e && a);       console.log(f && a);       console.log(b && a);       console.log(undefined && a);       console.log(null && a);

 

The result is 123, false, 123, undefined, and null. With such a result, we seem to be able to come up with the rule: if the Boolean () of the first operand is converted to true, the second operand is returned. If it is false, the first operand is returned.In fact, & the operation is a short-circuit operation. Only when the first operand is converted to true will the second operand be processed and the result will be returned. If it is false, the first operand will be returned directly.

 

| The opposite of the operand &. The second operand is processed and the result of the second operation is returned only when the first operand is converted to false.

 

In fact, we can see applications in many places, such as var obj = otherobj | {};. This operation is easy to understand. If otherobj exists, OBJ gets a reference. If it does not exist, it is equivalent to a new object. OBJ cannot always be null.

 

Relational operators (>,> =, <, <=)

With the above foundation, operations such as JS may be psychologically prepared and won't be so abrupt.

 

The rules are as follows:If both are numeric types, compare them directly. If both are strings, compare the character encoding values of the corresponding bits. If one is numeric, convert the other to numeric type; if it is an object, call the valueof method first. If there are no methods to call the tostring method, then execute the preceding rule. If one is a boolean type, convert the boolean type to a numerical type before comparison.

 

Equal operators (= ,! =, = ,! =)

Let's look at the example first:

       console.log(55 == "55");

 

Can you guess the result? False ??

Let's look at the following example:

       console.log(55 == "55");       console.log(55 === "55");

 

You may have to guess the answer: true or false.

 

First, perform full-level operations = ,! =, This operation is to compare the original value, without any conversion of the value, this is so determined, because we recommend that you use the full operation to avoid some strange bugs.

 

Then = ,! =, They will perform a forced conversion on the operands, and then compare: If the operand is a Boolean value, convert true to 1 and false to 0; if one is a string and the other is a number, convert the string to a number and then compare it. If one is an object and the other is not, call the valueof of the object and compare it according to the above rules.

 

Before the above comparison, some special operations will be executed: null and undefined are equal, return true; null and undefined do not undergo any type conversion; Nan is not equal to any value, even itself; if both are objects, they are equal only when the two operands are the same object.

 

This article does not provide a detailed description of all JS operators, but lists the unique characteristics of JS operators that are different from other common languages, at least it will not make us confused when reading some open-source framework js code, and it will make our JS Code more concise and safer (with fewer bugs ).

Related Article

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.