“Code Tailor “provides technology related information and a series of basic articles for front-end developers. Follow the wechat public account” Rookie of Xiaohe Mountain “to get the latest articles.

## preface

Before we get started, we want to let you know that this article is a summary of the “operators” section of the JavaScript language. If you already know the following things, you can skip this section and jump right into the exercises

- Unary operator
- Bitwise operators (understand)
- Boolean operator
- Multiplicative operator
- Exponential operator
- The additive operator
- Relational operator
- Equality operator
- Conditional operator
- The assignment operator
- Comma operator
- Order of operations

If you are a little bit forgotten about some parts, ππ» is ready for you!

## What is an operator?

In ECMA-262 a set of symbols described that can be used to manipulate data values are called operators

## What types of operators are available

### Unary operator

Operators that operate on only one value are called unary operators

**1. Increment/decrement operators**

**Increment operator**

There are two forms, namely ++ I and I ++ (slightly different)

```
let age = 29
++age
Copy the code
```

It’s actually equal to

```
let age = 29
age = age + 1 //console.log(age) = 30
Copy the code
```

**The difference between I ++ and ++ I**

- I++ : reference before adding
- ++ I: autoadd and then reference

**Decrement operator**

Similarly, there’s a slight difference between I — and — I

```
let age = 29
--age //console.log(age) = 28
let num = 2
let num1 = 20
let sum = num-- + num1 //console.log(sum) = 22;
// If so
let sum = --num + num1 //console.log(sum) = 21;
Copy the code
```

Note: This operator can work on any value, not just integers — strings, Bools, floating-point values, and even objects.

- For a string, if it is a valid numeric form, convert it to a numeric value and apply the change. The variable type changes from a string to a number.
- For strings, if it is not a valid numeric form, set the value of the variable to
`NaN`

. The variable type changes from a string to a number. - For booleans, if theta is
`false`

Is converted to`0`

Then apply the change. The variable type changes from a Boolean to a numeric value. - For booleans, if theta is
`true`

Is converted to`1`

Then apply the change. The variable type changes from a Boolean to a numeric value. - For floating-point values, add
`1`

Or minus`1`

. - If it is an object, it is called
`valueOf()`

Method to get a value that can be manipulated. Apply the above rules to the resulting values. If it is`NaN`

The call`toString()`

And apply the other rules again. The variable type changes from object to value.

**2. Unary plus and minus**

Unary plus and minus operators are familiar to most developers; they are used in ECMAScript the same way they were in high school math.

- ** unary plus: ** by a plus sign (
`+`

), placed before the variable, has no effect on the value

```
let num = 25
num = +num
console.log(num) / / 25
Copy the code
```

If applied to a non-numeric value, the same type conversion is performed as with the Number() conversion function;

**Note:**

- Boolean value
`false`

ε`true`

Convert to 0 and 1 - Strings are parsed according to special rules
- Object will call them
`valueOf()`

And (or)`toString()`

Method to get a value that can be converted

```
let a = '01'
let b = '1.2'
let c = 'c'
let d = false
let e = 1.2
a = +a // Changes to the value 1
b = +b // Changes to the value 1.2
c = +c / / to NaN
d = +d // Changes to the value 0
e = +e / / the same
Copy the code
```

**One yuan minus:**By a minus sign (`-`

Used to change a value into a negative value, such as 1 to -1.

```
let num = 25
num = -num
console.log(num) / / to 25
Copy the code
```

When applied to non-numeric values, unary subtraction follows the same rules as unary addition, converting them first and then taking negative values

```
let a = '01'
let b = '1.2'
let c = 'c'
let d = false
let e = 1.2
a = -a // Changes to the value -1
b = -b // Changes to a value of -1.2
c = -c / / to NaN
d = -d // Changes to the value 0
e = -e // εδΈΊ-1.2
Copy the code
```

### Bitwise operators (understand)

Low-level operations for numbers, that is, operations on the bits (bits) in memory that represent data

**1. According to a non**

Bitwise non-operators are represented by the tilde (~), which returns the complement of a numeric value

```
let num1 = 25 / / binary 00000000000000000000000000011001
let num2 = ~num1 / / binary 11111111111111111111111111100110
console.log(num2) / / - 26
Copy the code
```

**2. Bitwise and**

Bitwise and is to align each bit of two numbers and then perform the appropriate and operation on each bit based on the rules in the truth table

```
let result = 27 & 4
console.log(result) / / 0
/* 27 = 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 --------------------------------------------- AND = 0000 0000 0000 0000 0000 0000 0000 0000 */
Copy the code
```

**(3) or by location**

The bitwise or operator with a pipe (|) said, there are also two operands, bitwise or follow the truth table

```
let result = 27 | 4
console.log(result) / / 31
/* 27 = 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 --------------------------------------------- OR = 0000 0000 0000 0000 0000 0000 0001 1111 */
Copy the code
```

**4. According to ectopic or**

Bitwise xor is represented by a broken character (^), again with two operands, bitwise xor follows the truth table

```
let result = 27 ^ 3
console.log(result) / / 24
/* 27 = 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 --------------------------------------------- XOR = 0000 0000 0000 0000 0000 0000 0001 1000 */
Copy the code
```

**5. Shift to the left**

The left-shift operator, represented by two less-than signs (<<), moves all the bits of a value to the left by the specified number of bits

```
let oldValue = 2 // is binary 10
let newValue = oldValue << 5 // is equal to binary 1000000, that is, decimal 64
Copy the code
```

Note that after the shift, the right end of the value is left 5 bits empty. A left shift fills these Spaces with 0, making the result a full 32-bit value, and a left shift preserves the sign of the value it manipulates

**6. Signs move to the right**

A signed right shift, indicated by two greater than signs (>>), moves all 32 bits of a value to the right while preserving the sign (positive or negative). A signed shift to the right is actually the inverse of a shift to the left

```
let oldValue = 64 // is equal to binary 1000000
let newValue = oldValue >> 5 // is equal to binary 10, that is, decimal 2
Copy the code
```

**7. Unsigned right shift**

An unsigned right shift, represented by three greater than signs (>>>), shifts all 32 bits of the value to the right. For positive numbers, an unsigned right shift is the same as a signed right shift

```
let oldValue = 64 // is equal to binary 1000000
let newValue = oldValue >> 5 // is equal to binary 10, that is, decimal 2
Copy the code
```

For negative numbers, sometimes the difference can be huge. Unlike a signed right shift, an unsigned right shift adds 0 to the empty space regardless of the sign bit.

```
let oldValue = -64 / / equal to binary 11111111111111111111111111000000
let newValue = oldValue >>> 5 // Is equal to the decimal 134217726
/ * 11111111111111111111111111000000 = > equals - 64, 00000111111111111111111111111110 = > = 134217726 * /
Copy the code
```

### Boolean operator

**1. The logic**

The operand | The return value |
---|---|

object | false |

An empty string | true |

Non-empty string | false |

The number 0 | true |

Non-zero values (including Infinity) | false |

null | true |

NaN | true |

undefined | true |

```
console.log(!false) // true
console.log(!'blue') // false
console.log(!0) // true
console.log(!NaN) // true
console.log(!' ') // true
console.log(!12345) // false
Copy the code
```

**2. Logic and**

The first operand | Second operand | The results of |
---|---|---|

object | any | Returns the second operand |

true | object | Returns the second operand |

object | object | Returns the second operand |

null | any | If one of the operands is NULL, null is returned |

NaN | any | NaN is returned if one of the operands is NaN |

undefined | any | Returns undefined if one of the operands is undefined |

```
let found = true;
let clear = {};
let result = (found && clear); / / return the clear
Copy the code
```

**3. The logical or**

The first operand | Second operand | The results of |
---|---|---|

object | any | Returns the first operand if the first operand is an object |

false | object | If the first operand evaluates to false, the second operand is returned |

object | object | If both operands are objects, return the first operand |

null | null | If both operands are null, null is returned |

NaN | NaN | If both operands are NaN, NaN is returned |

undefined | undefined | If both operands are undefined, undefined is returned |

```
let myObject = preObject || afeObject
Copy the code
```

The preObject variable contains the preferred value and the afeObject variable contains the alternate value

- if
`preObject`

not`null`

, its value is assigned to`myObject`

; - if
`preObject`

ζ―`null`

,`afeObject`

Is assigned to`myObject`

. - This pattern is in
`ECMAScript`

Often used in code for variable assignments

### Multiplicative operator

ECMAScript defines three multiplication operators: multiplication, division, and modulo

**1. Multiplication operator**

The multiplication operator is represented by an asterisk (*) and can be used to compute the product of two numeric values. Its syntax is similar to that of C

```
let result = 12 * 34
Copy the code
```

Note:

Returns the operation of NaN | Returns the Infinity operation |
---|---|

Any operand is NaN | Infinity times Infinity |

Infinity times 0 | Infinity multiplied by a finite number that is not zero returns Infinity or -infinity based on the sign of the second operand |

**2. The division operator**

The division operator, represented by a slash (/), calculates the quotient of the first operand divided by the second operand

```
let result = 34 / 12
Copy the code
```

Note:

The operand | The results of |
---|---|

Any operand is NaN | NaN |

Infinity divided by Infinity | NaN |

It’s 0 divided by 0 | NaN |

Finite values that are not zero divided by zero | Returns Infinity or -infinity based on the sign of the first operand |

Infinity divided by any number | Returns Infinity or -infinity based on the sign of the second operand |

**3. Fetch operator**

The modulo (remainder) operator is represented by a percentage symbol (%)

```
let result = 16 % 5 / / 1
Copy the code
```

The operand | The return value |
---|---|

The numerical | remainder |

If the dividend is infinite, the divisor is finite | NaN |

If the dividend is finite, the divisor is 0 | NaN |

If I have Infinity divided by Infinity | NaN |

If the dividend is finite, the divisor is infinite | dividend |

If the dividend is 0, the divisor is not 0 | 0 |

If you have an operand that is not a Number, it is first converted to a Number behind the scenes using the Number() function | / |

### Exponential operator

ECMAScript 7 added the index operator (**), math.pow () now has its own operator, the result is the same

```
console.log(Math.pow(4.2); / / 16
console.log(4ε
εε± ζ2); / / 9
console.log(Math.pow(16.0.5); / / 4
console.log(16ε
εε± ζ0.5); / / 4
Copy the code
```

### The additive operator

The additive operators, the addition and subtraction operators, are generally the simplest operators in a programming language

**1. Add operator**

First operand | Second operand | The return value |
---|---|---|

The numerical | NaN | NaN |

Infinity | Infinity | Infinity |

-Infinity | -Infinity | -Infinity |

Infinity | -Infinity | NaN |

+ 0 | + 0 | + 0 |

0 | + 0 | + 0 |

0 | 0 | 0 |

string | string | Pieced together |

string | any | Converts the second operand to a character and concatenates it with the first operand |

Note: The first and second operands are in no particular order

```
let result = 10 + 10 / / 20
let result2 = 10 + '5' / / 105
Copy the code
```

**2. Subtraction operators**

First operand | Second operand | The return value |
---|---|---|

The numerical | NaN | NaN |

Infinity | Infinity | NaN |

-Infinity | -Infinity | NaN |

Infinity | -Infinity | Infinity |

-Infinity | Infinity | -Infinity |

+ 0 | + 0 | + 0 |

0 | + 0 | 0 |

0 | 0 | + 0 |

Add: If any of the operands is a string, Boolean, null, or undefined, it is converted to a value behind the scenes using Number(), and then the math is performed according to the previous rules

```
let result1 = 6 - true // True is converted to 1, so the result is 5
let result2 = NaN - 2 // NaN
let result3 = 6 - 3 / / 3
let result4 = 6 - ' ' // "" is converted to 0, so the result is 6
let result5 = 3 - '2' // "2" is converted to 2, so the result is 1
let result6 = 2 - null // null is converted to 0, so the result is 2
Copy the code
```

### Relational operator

The relational operator performs the comparison of two values, including less than (<), greater than (>), less than or equal to (<=), and greater than or equal to (>=), as we learned in math class

```
let result1 = 6 > 3 // true
let result2 = 4 < 3 // false
Copy the code
```

The operand | In behavior |
---|---|

Is the value | The numerical comparison |

They’re all strings | Compares the encoding of the corresponding character in the string one by one |

Any operand is a numeric value | The other operand is converted to a value, performing a numeric comparison |

Any operand is an object | Call its valueOf() method, or if there is no valueOf() method, call the toString() method, and perform the comparison according to the previous rules after the result is obtained |

Any of the operands is a Boolean | Convert it to a value and perform the comparison |

```
/ / added:
let result1 = NaN < 5 // false
let result2 = NaN> =5 // false
Copy the code
```

### Equality operator

Determining whether two variables are equal is one of the most important operations in programming

ECMAScript provides two sets of operators. The first group is equal and not equal, and they perform the conversion before the comparison. The second group is congruent and incongruent, which do not perform the conversion before the comparison.

**1. Equal and not equal**

The equals operator is represented by two equals signs (==) and returns true if the operands are equal

The unequal operator uses an exclamation mark and an equal sign (! =) means that true is returned if the operands are not equal

The operand | In behavior |
---|---|

Any of the operands is a Boolean | Convert them to values and compare them for equality (false :0 true :1) |

String + number | Try to convert strings to numeric values and compare for equality |

One operand is an object and the other is not | Call the valueOf() method of the object to get its original value and compare it according to the previous rules |

Any operand is NaN | The equality operator returns false and the unequal operator returns true |

Both operands are objects | Compare whether they refer to the same object |

Add :(1) NaN does not equal NaN

(2) null equals undefined

(3) Null and undefined cannot be converted to other types of values for comparison

**2. Congruence and incongruence**

The congruence and incongruence operators return true only if the comparison numbers are congruent or incongruent without conversion

```
let result1 = '34'= =34 // true, equal after conversion
let result2 = '34'= = =34 // false, unequal because of different data types
let result1 = '23'! =23 // false, equal after conversion
let result2 = '23'! = =23 // true, not equal, because the data type is different
let result1 = null= =undefined // true
let result1 = null= = =undefined // false, not the same data type
Copy the code
```

### Conditional operator

The conditional operator is one of the most widely used operators in ECMAScript

```
let min = num1 < num2 ? num1 : num2
If num1 is less than num2, num1 is returned; otherwise, num2 is returned
Copy the code
```

### The assignment operator

Simple assignments are represented by the equals sign (=), which assigns the value of the right-hand side to the variable on the left-hand side

```
let num = 100
Copy the code
```

Each mathematical operator, as well as others, has a corresponding compound assignment operator

By the value | * = |
---|---|

In addition to after the assignment | / = |

Take the module and assign it | % = |

And after the assignment | + = |

The assignment after reduction | – = |

Assign after left shift | < < = |

Assign after right shift | > > = |

Assignment after unsigned right shift | > > > = |

### Comma operator

The comma operator can be used to perform multiple operations in a single statement

```
let num0 = 1,
num1 = 2,
num2 = 3
Copy the code
```

### Order of operations

**1. The priority**

The Precedence of JavaScript operators is different. The higher-priority operator is executed first, and the lower-priority operator follows.

```
3 + 1 * 2 / / 6
Copy the code
```

In the previous code, the multiplication operator (*) took precedence over the addition operator (+), so the multiplication is performed first and the addition is performed later.

This is a simple prioritization problem, but it can get confusing if multiple operators are mixed up.

```
var x = 1
var array = []
var y = array.length <= 0 || array[0= = =undefined ? x : array[0]
Copy the code
```

Priority | | | — — — — — — — — — — — — — — — — – | — – | — – | | less than or equal to (< =) | | strictly equal (= = =) | | or (| |) | | 3 yuan (? π | | the equal sign (=) |

```
// So the code actually looks like this
var y = array.length <= 0 || array[0= = =undefined ? x : array[0]
Copy the code
```

Note: It is not necessary to remember the precedence of all operators, just use it to query.

**2. Left and right**

For operators of the same priority, the order of evaluation is always left to right in most cases. This is called the “left associativity” of the operators, starting from the left.

```
a + b + c
Copy the code
```

It’s easy to do something like this where you take the sum of a and B on the left-hand side, and then you take the sum of c

But some operators are evaluated from right to left, starting on the right. This is called “right combination” of operators. There are mainly assignment operators (=) and ternary condition operators (? π

```
h = x = y = z
i = a ? b : c ? d : e ? f : g
<== == ==>
h = x = y = z
i = a ? b : c ? d : e ? f : g
Copy the code
```

## Self-test:

**1: What does the following code output?**

```
; +true
!'Lydia'
Copy the code
```

- A:
`1`

and`false`

- B:
`false`

and`NaN`

- C:
`false`

and`false`

## Answer

**Answer: A**

The + sign operator converts true to Number type 1

And string Lydia translates to Boolean. The value is true. , so return false

**2: What does the following code output?**

```
function sum(a, b) {
return a + b
}
sum(1.'2')
Copy the code
```

- A.
`NaN`

- B.
`TypeError`

- C.
`"12"`

- D.
`3`

## Answer

**Answer: C**

When the + operator encounters a value added to a string, it converts the value to a string and concatenates it

**3: What does the following code output?**

```
!!!!!null!!!!!' '!!!!!1
Copy the code
```

- A.
`false`

`true`

`false`

- B.
`false`

`false`

`true`

- C.
`false`

`true`

`true`

- D.
`true`

`true`

`false`

## Answer

**Answer: B**

Null is false! Null returns true.! True or false.

`""`

ζ―` true`

. `!""`

θΏε `true`

. `!true`

θΏε `false`

.

1 is true.! 1 returns false.! False returns true.

**4: What does the following code output?**

```
console.log(3 + 4 + '5')
Copy the code
```

- A.
`"345"`

- B.
`"75"`

- C.
`12`

- D.
`"12"`

## Answer

**Answer: B**

Operator affinity is the order in which the compiler evaluates expressions, from left to right or right to left. This can only happen if all operators have the same priority. We have only one operator: +. In addition, correlation runs from left to right.

So let’s do 3 plus 4. It turns out to be the number 7.

7+ “5” implicitly translates to “75”. JavaScript converts the number 7 to a string, and we can concatenate two strings using the + operator.

**JavaScript series of operators, we end here, thank you for your support to the author! Your attention and praise will be the strongest motivation for us to move forward! Thank you!**