# 05. JavaScript operator

2022-04-29 12:42:12

The journey of life , You can't use your eyes to capture every bit of life in other people's stories . With your own hands , Create your own dreams .
I am a vegetable chicken front-end lover , It's been a few months since I was on the front road , Finally, I decided to take a look at the front-end classic books , Here are my notes , I hope you can correct me .

# 1、 The operator

`````` Operators describe a set of symbols that can be used to manipulate data values , It mainly contains mathematical operators 、 Bit operators 、 Relational operator 、 Equality operator, etc .
``````

## 1、 Unary operators

`````` Operators that operate on only one value , It's called a unary operator .
``````
The operator explain
++a Add value 1 After the operation , That is to add 1 Then proceed to the next operation
a++ First perform the operation and then add the value 1 , That is, take part in the operation first , Then add 1
- -a Subtract... From the value 1 After the operation , That is to reduce 1 Then proceed to the next operation
a- - Calculate first and then subtract the value 1 , That is, take part in the operation first , Then subtract 1
a = +num take + Putting the number in front of a number has no effect , It means a positive number
a= - num Putting a minus sign in front of a number means that the number is a negative number

`【 Unary operator rules 】：`

• For strings , If the character is a valid numeric format , Then change it to a numerical value . That is, from a string to a numeric value for operation .
• For strings , If it is not a valid numeric format , Set the value of the variable to NaN, The variable changes from a string to a numeric value .
• For boolean type , If it is false, Then it turns into 0 recompute .
• For boolean type , If it is true, Then it turns into 1 recompute
• For floating point , Add directly 1 Or minus 1 operation
• If it's an object , Call their valueOf() Method to get an actionable value . Apply the above rule to the obtained value .
• If it is NaN, Call toString() And apply the other rules again . Variable type changes from object to value .

【 The demo case 】：

``````let s1 = "2";
let s2 = "z";
let b = false;
let f = 1.1;
let o = {

valueOf() {

return -1;
}
};
s1++; //  Value becomes value  3
s2++; //  Value change  NaN
b++; //  Value becomes value  1
f--; //  Value change  0.10000000000000009（ Because floating point numbers are imprecise ）
o--; //  Value change -2
``````

## 2、 Bit operators

`````` Tips ： When looking at this part , If you are not familiar with the way numerical values are stored in the computer , It is suggested to review the principles of computer composition first , Knowledge of numerical operation .
``````

### 1、 Bitwise non

【 Representation form 】： ~( Wave sign )

【 effect 】： Returns the complement of a numeric value and converts it to a decimal number

【 case analysis 】：

``````let num1 = 25;    //  Binary system  00000000000000000000000000011001
let num2 = ~num1; //  Binary system  11111111111111111111111111100110
console.log(num2); // -26
``````

### 2、 Bitwise AND

【 Representation form 】： a & b

【 The essence 】： Bitwise and is to align each bit of two numbers , Then based on the rules in the truth table , Perform corresponding and operations for each bit .

【 Truth table 】：

【 case analysis 】：

``````let result = 25 & 3;
console.log(result); // 1
//  process analysis ：
//25 = 0000 0000 0000 0000 0000 0000 0001 1001
// 3 = 0000 0000 0000 0000 0000 0000 0000 0011
// --------------------------------------------
// Bitwise AND  = 0000 0000 0000 0000 0000 0000 0000 0001
//  Convert bitwise and results to decimal  = 1
``````

### 3、 Press bit or

【 Representation form 】： a | b

【 The essence 】： Bitwise and is to align each bit of two numbers , Then based on the rules in the truth table , Perform corresponding or operations on each bit .

【 Truth table 】：

【 case analysis 】：

``````let result = 25 | 3;
console.log(result); // 27
//  process analysis
// 25 = 0000 0000 0000 0000 0000 0000 0001 1001
// 3 = 0000 0000 0000 0000 0000 0000 0000 0011
//---------------------------------------------
//  or  = 0000 0000 0000 0000 0000 0000 0001 1011
//  It turns out to be decimal  ：27
``````

### 4、 Bitwise XOR

【 Representation form 】： a ^ b

【 Truth table 】：

【 case analysis 】：

``````let result = 25 ^ 3;
console.log(result); // 26
//  process analysis ：
// 25 = 0000 0000 0000 0000 0000 0000 0001 1001
// 3 = 0000 0000 0000 0000 0000 0000 0000 0011
//---------------------------------------------
// Exclusive or  = 0000 0000 0000 0000 0000 0000 0001 1010
//  The XOR result is converted to decimal  26
``````

### 5、 Move left

【 Representation form 】： <<

【 The essence 】： Move the number of bits of binary number according to the specified number of bits , The sign bit remains unchanged during the movement .

【 case analysis 】：

``````let oldNum = 2; //  It's binary  10
let newNum = oldNum << 5;  //  It's binary  1000000, Decimal system  64
``````

【 process analysis 】：

### 6、 Move the sign right

【 Representation form 】： >>

【 The essence 】： Move all bits by the specified number of bits , Contains sign bits .

【 case analysis 】：

``````let oldValue = 64; //  It's binary  1000000
let newValue = oldValue >> 5; //  It's binary  10, Decimal system  2
``````

【 process analysis 】：

### 7、 unsigned right shift

【 Representation form 】： >>>

【 The essence 】： All of the values will be 32 All bits move to the right . For positive numbers , Unsigned right shift has the same result as signed right shift . For negative numbers , Sometimes the difference can be very big .

## 3、 Boolean operator

### 1、 Logic is not

【 form 】：

**【 effect 】：** This operator always returns a Boolean value , No matter what data type is applied . Logical non operators first convert operands to Boolean values , Then reverse it .

`【 The rules 】:`

• If the operand is an empty string , Then return to true.
• If the operand is a non empty string , Then return to false.
• If the operand is not 0 The number （ Include Infinity）, Then return to false.

【 Case presentation 】：

``````console.log(!false); // true
console.log(!"blue"); // false
console.log(!0); // true
console.log(!NaN); // true
console.log(!""); // true
console.log(!12345); // false
``````

### 2、 Logic and

【 form 】： &&

【 Truth table 】：

`【 The rules 】：`

• If the first operand is an object , Then return the second operand .
• If the second operand is an object , Only the first operand evaluates to true Will return the object .
• If both operands are objects , Then return the second operand .
• If there is an operand that is null, Then return to null.
• If there is an operand that is NaN, Then return to NaN.
• If there is an operand that is undefined, Then return to undefined.

### 3、 Logic or

【 form 】： ||

【 Truth table 】：

`【 The rules 】：`

• If the first operand is an object , Returns the first operand .
• If the first operand evaluates to false, Then return the second operand .
• If both operands are objects , Returns the first operand .

## 4、 Multiplicative operators

### 1、 Multiplication operator

【 form 】： *

【 Precautions for use 】：

• If the operands are numeric , Perform conventional multiplication .
• If ECMAScript Cannot represent product , Then return to Infinity or -Infinity.
• If it is Infinity Multiply by non 0 Finite value of , Returns... According to the sign of the second operand Infinity or -Infinity.
• If there are operands that are not numeric , Use... In the background first Number() Convert it to a numeric value , Then apply the above rules

### 2、 Division operator

【 form 】： /

【 Precautions for use 】：

• If the operands are numeric , Then perform the conventional division operation .
• If it is right or wrong 0 The finite value of divided by 0, Returns... According to the sign of the first operand Infinity or -Infinity.
• If it is Infinity Divide by any number , Returns... According to the sign of the second operand Infinity or -Infinity.
• If there are operands that are not numeric , Use... In the background first Number() The function converts it to a numeric value , Then apply the above rules .

### 3、 Modulo operators

【 form 】： %

【 Precautions for use 】：

• If the operand is numeric , Then perform the conventional division operation , Returns the remainder .
• If the divisor is infinite , Divisor is a finite value , Then return to NaN.
• If the divisor is finite , Divisor is 0, Then return to NaN.
• If the divisor is finite , Divisor is infinite , Returns the divisor .
• If the divisor is 0, Divisor is not 0, Then return to 0.
• If there are operands that are not numeric , Use... In the background first Number() The function converts it to a numeric value , Then apply the above rules .

## 5、 Exponential operators

【 form 】： **

【 Case study 】：

``````console.log(Math.pow(3, 2); // 9
console.log(3 ** 2); // 9
console.log(Math.pow(16, 0.5); // 4
console.log(16** 0.5); // 4
``````

【 form 】： +

【 form 】： -

## 7、 Relational operator

【 It mainly includes 】： Less than （<）、 Greater than （>）、 Less than or equal to （<=） And greater than or equal to （>=）

## 8、 equality operator

• be equal to ：==
• It's not equal to ：！=
• Congruence ：===
• Incongruence ：！==

## 9、 Conditional operators

【 grammar 】：

``````variable = boolean_expression ? true_value : false_value;
``````

## 10、 Assignment operator

• Multiply and assign （*=）
• Assign value after division （/=）
• Assign a value after taking the module （%=）
• Value after subtraction （-=）
• Left shift assignment （<<=）
• Right shift after assignment （>>=）
• Assignment after unsigned right shift （>>>=）

## 11、 Comma operator

``````//  The comma operator can be used to perform multiple operations in a statement , As shown below ：
let num1 = 1, num2 = 2, num3 = 3;
``````

The latter operators are relatively simple , It's basically the same as we usually use mathematics , There is no detailed explanation here . If you have any questions, you can consult the official documents by yourself .