## current position：Home>05. JavaScript operator

# 05. JavaScript operator

2022-04-29 12:42:12【Hold the [email protected]】

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 operands are objects , Then return to false.
- 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 numeric 0, Then return to true.
- If the operand is not 0 The number （ Include Infinity）, Then return to false.
- If the operand is null, Then return to true.
- If the operand is NaN, Then return to true.
- If the operand is undefined, Then return to true.

**【 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 .
- If both operands are null, Then return to null.
- If both operands are NaN, Then return to NaN.
- If both operands are undefined, Then return to undefined

## 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 any operand is NaN, Then return to NaN.
- If it is Infinity multiply 0, Then return to NaN.
- If it is Infinity Multiply by non 0 Finite value of , Returns... According to the sign of the second operand Infinity or -Infinity.
- If it is Infinity multiply Infinity, Then return to 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 any operand is NaN, Then return to NaN.
- If it is Infinity Divide Infinity, Then return to NaN.
- If it is 0 Divide 0, Then return to NaN.
- 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 it is Infinity Divide Infinity, 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
```

## 6、 Additive operators

### 1、 Addition Operator

**【 form 】：** +

### 2、 Subtraction operator

**【 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 （%=）
- Add and assign （+=）
- 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 .

copyright notice

author[Hold the [email protected]],Please bring the original link to reprint, thank you.

https://en.qdmana.com/2022/119/202204291113110084.html

## The sidebar is recommended

- Construction and development of automatic test platform based on HTTP runner
- Application of RT thread - use RT thread on stm32l051 (v. conclusion of wireless temperature and humidity sensor)
- Expose Dubbo to HTTP service
- Put the front end into the spring cloud project
- Front end learning day 4 - CSS
- Vue URL jump page with parameters
- JavaScript Chapter 13 traversal of arrays and implicit parameters of function methods
- These CSS efficiency improvement skills, you need to know!
- Beijing has opened the pilot of unmanned operation of passenger cars, and the driverless air outlet has arrived
- Test theory series - Test Case elements and design methods Part II

## guess what you like

How to make the peak value of measured output voltage not less than 2V

Hexo quickly set up its own blog

Gee synthetic cloudless landsat-8 and sentry-2 data

Prototype object creation method case JavaScript specific implementation steps

YAF CLI and HTTP access modes

Simple HTML + CSS animation web page production DW simple animation web page production

The correct way for web programmers to make a pink girl series happy birthday blessing web page (HTML + CSS + JS)

HTML + CSS + JS to make simple animation web pages

HTML gourmet web page production DW static web page production div + CSS gourmet web page implementation and production

Programmer 520 Tanabata Valentine's Day confession code HTML + JS + CSS petal photo album web page template programmer confession necessary

## Random recommended

- Element notify notification prompt text wrap
- Belkin: it's too early to talk about real wireless space charging
- JavaScript ES6 set (set) type* ω *
- Understand JavaScript function execution process and scope chain
- Java project: nursing home management system (java + springboot + thymeleaf + HTML + JS + MySQL)
- Java project: drug management system (java + springboot + HTML + layui + bootstrap + seals + MySQL)
- An error is reported when installing hexo during hexo deployment. What is the reason and how to solve it (tag git | keyword path)
- [front end basics] Linux command: Project Automation deployment
- Less than 100 or win Porsche, Maserati "special supply" 3.0T technical analysis
- Introduction to basic methods of math built-in objects in JavaScript
- CSS matches the nth element of the parent element
- What is the commercialization process of unmanned robotaxi after China allows driverless steering wheel?
- A lot of trouble, cook also worried: a quarter less than $8 billion
- Ajax realizes no refresh paging (no refresh paging shopping cart source code)
- [flutter topic] 101 what is flutter elements Yyds dry goods inventory
- What is the commercialization process of unmanned robotaxi after China allows driverless steering wheel?
- A lot of trouble, cook also worried: a quarter less than $8 billion
- Element acquisition of data structure c language sequence stack
- Set video label based on Vue
- CSS realizes div width adaptation, and the proportion of height and width is fixed
- How to create JavaScript custom events
- Is there any recommendation for wireless signal and wired signal power amplification circuit?
- Introduction to basic methods of math built-in objects in JavaScript
- 1000km pure electric endurance is meaningless? Then why does the car factory still try its best to extend the endurance?
- [let's implement a simple vite!] Chapter 4 - compiling single file components
- 3-11xss htmlspecialchars bypass demo
- How to conduct architecture design deeply reveal Alibaba cloud serverless kubernetes (2)
- Heapdump performance community special series 7: front door opener of large factory -- Application Practice of fluent
- 1、 HTML base tag
- Don't leave the crane unless necessary! A case of novel coronavirus nucleic acid positive was found in Heshan, Guangdong
- [Architect (Part 20)] self defined template of scaffold and summary of phase I
- How does JavaScript understand this algorithm
- [live review] openharmony knowledge empowerment lesson 2, phase 5 - becoming a community talent
- Understand the basic history and knowledge of HTTP
- Influence of lazy loading of Web front-end training on Web Performance
- Guangxi 2021 Guangxi landscape - blessing Lake Changshou Island
- Responsive gulp Chinese network of web front end
- Twaver-html5 basic learning (26) background
- CSS learning notes [3] floating, not separated from document flow, inheritance and stacking
- Webengine loading local html is invalid, and html is the dynamic address generated by JS, which can be solved