Summary of Operator Operations That Are Very Error-Prone in JavaScript

Summary of Operator Operations That Are Very Error-Prone in JavaScript

Arithmetic operators

+ - * / % ()

Abnormal situation 1: Operations involving special value literals

  • Operations involving NaN: The results are all NaN
  • The operations that Infinity participates in depend on the situation, for example:
5/Infinity=0
5%Infinity=5
Infinity%5=NaN
Infinity+5=Infinity
Infinity / Infinity = NaN
Infinity - Infinity = NAN
Infinity % Infinity = NAN

Special value operations are not used in work and have no practical application significance, but you should understand them in case you encounter them in interviews.

Abnormal situation 2: Other types of data participate in mathematical operations.

+ operation involving strings (including the case where there are characters only on one side of the symbol): the + sign becomes a hyphen to connect the front and back to form the entire string.

For example:

        var a = 3 - "36" % 5 + "2" - 2
        console.log(a)
        var b = "36" % 5
        console.log(b)
        var c = 3 - "36" % 5 + "2"
        console.log(c)

Output:

20
1
twenty two

Implicit conversion: Except for the + operation involving strings, in other cases, when all other data types participate in mathematical operations, the computer automatically converts other data types into numeric types before participating in the operation. There is no need to use methods such as parseInt() and Number() in this process. The process is carried out secretly. This is an implicit conversion process.

Implicit Conversion

Other data types are implicitly converted to numeric types:

  • Corresponding numbers: Pure numeric strings will be converted to corresponding numbers "123" → 123
  • Converts to 1: true
  • Converts to 0: false, null, "" empty string, blank string
  • Convert to NaN: undefined, non-empty non-pure numeric string

Comparison Operators

Also called relational operator. A comparison operator compares its operands and returns a Boolean value. The result of the operation is either true or false.

> Greater than

< less than

>= Greater than or equal to

<= Less than or equal to

== is equal, only determines whether the value is equal, not the data type

!= Not equal, the exact opposite of equal

=== is equal to not only the value, but also the data type.

!== is not equal, which is the exact opposite of being equal to

Abnormal case 1: Special values ​​participate in comparison operations

  • NaN participates: Not equal to and Not completely equal to are true, all others are false
  • The operations that Infinity participates in depend on the situation, for example:
Infinity == Infinity -> True
Infinity === Infinity -> True
Infinity > Infinity -> False
Infinity >= Infinity ->True

Abnormal situation 2: Other data types participate in comparison operations (excluding string-to-string comparisons)

Other data types are also implicitly converted to numbers for comparison.

“123”→123 true→1 false→0 null→0 undefined→NaN “”→0 “abc”→NaN

The judgment of null is special: when null and 0 are judged, equality is false, >= and <= are true

null == undefined -> True

Abnormal situation 3: string to string comparison

No implicit conversion to numbers occurs, but the two strings are compared in Unicode order.

Character encoding order: from front to back 0-9, AZ, az, the front one is smaller than the back one

When comparing, the length of the two strings is not important. The comparison starts from the first character and continues until the size is determined. No more comparisons are made.

Logical operators

Logical operators are often used between Boolean values; when the operands are both Boolean values, the return value is also a Boolean value.

&& Logical AND operator
|| Logical OR operator
! Logical NOT operator

Abnormal situation

  • In addition to Boolean values, values ​​of other data types can also participate in logical operations. During the operation, the operand needs to be implicitly converted to a Boolean value to participate in the judgment calculation, and the final operation result is still the data at a certain position in the original.
  • Not all logical operations return Boolean values. The result obtained by other data is the data itself.

Rules for implicit conversion to Boolean values

  • Convert to false: NaN, 0, "" empty string, null, undefined
  • Convert to true: non-0, non-NaN number, non-empty string

When they are used on non-boolean values, the return value may be a non-boolean value. In fact, this operation is very simple:

  • (logical AND a && b) If a can be converted to false, then return a; otherwise, return b
  • (logical or a || b ) If a can be converted to true, then return a; otherwise, return b

Logical operator order of operation

Comprehensive operation order: NOT, AND, OR

Assignment Operators

= equal to
+= Addition and equality
-= minus equal to
*= Multiplication equals
/= Divide by equal to
%= remainder equal to
++ increment
--Decrement

Unary Operators

++ -- !

++ or -- symbols can be written before or after a variable. Different positions may result in different program execution results.

Take ++ as an example:

  • a++: The ++ symbol comes after the variable. The original value of a++ used in the program is not incremented by 1. When the variable a is used for the second time after that, a uses the new value after incrementing by 1. Participate first, then add yourself.
  • ++a: The ++ symbol is before the variable. During the execution of ++a, the new value of a plus 1 is used. When the variable a is used for the second time after that, the new value of a plus 1 is also used. First add yourself, then participate

Example 1

var a = 3; 
var b = a++; 
var c = ++a;
console.log(a,b,c)

Output:

5 3 5

Example 2

Output:

Operation priority

Priority from highest to lowest:

1. () has the highest priority

2. Unary operator ++ -- !

3. Arithmetic operators are * / % followed by + -

4. Relational operators > >= < <=

5. Equality Operator == != === !==

6. Logical operators && followed by ||

7. Assignment Operators

example

var a = 4; var num = 1 * (2 + 3) && a++ || 5 > 6 && 7 < 8 || !9; 
console.log(num)

Output:

4

Summarize

This concludes this article on the summary of operator calculations in JavaScript that are prone to errors. For more relevant JavaScript operator calculation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • js and or operator || && magic use
  • Detailed explanation of || and && operators in js
  • JavaScript ternary operator usage examples
  • Usage of javascript typeof and introduction of typeof operator [detailed]
  • Javascript bitwise negation operator (~)
  • Understanding and analysis of JS bitwise non (~) operator and ~~ operator
  • Analysis and examples of the difference between ternary operator and if else in JS
  • Detailed explanation of the usage and function of the JS operator single vertical bar "|" and "||"
  • Introduction to Javascript bitwise left shift operator (<<)
  • Teach you the operators of exponentiation, square root and variable format conversion in JS

<<:  MySQL 8.0.18 installation and configuration method graphic tutorial

>>:  Detailed explanation of several commands in Linux to obtain detailed hardware information

Recommend

How to build an ELK log system based on Docker

Background requirements: As the business grows la...

Vue.js style layout Flutter business development common skills

Correspondence between flutter and css in shadow ...

A detailed discussion of MySQL deadlock and logs

Recently, several data anomalies have occurred in...

Detailed explanation of Vue's calculated properties

1. What is a calculated attribute? In plain words...

NULL and Empty String in Mysql

I recently came into contact with MySQL. Yesterda...

Discussion on the browsing design method of web page content

<br />For an article on a content page, if t...

Use docker to deploy tomcat and connect to skywalking

Table of contents 1. Overview 2. Use docker to de...

Solution to mysql prompt "got timeout reading communication packets"

Error message: user: 'root' host: `localh...

Vue project implements graphic verification code

This article example shares the specific code of ...

Linux automatically deletes logs and example commands from n days ago

1. Delete file command: find the corresponding di...

Learn Vue middleware pipeline in one article

Often when building a SPA, you will need to prote...

18 Amazing Connections Between Interaction Design and Psychology

Designers need to understand psychology reading n...

Completely delete MySQL steps

Table of contents 1. Stop MySQL Server first 2. U...