This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021
A profound
Let’s look at a problem like this
console.log(true || false && false)
Copy the codeWhat is returned?
Is it true or false?
If you don’t know a thing or two about this topic, then this article is for you!
preface
Operator precedence of knowledge is really important, such as how to determine && and | | operation priority. If you can’t master the basics. You’re not even a beginner programmer.
At school or training institutions, teachers will only tell you that the () bracket operator has the highest precedence. Use () when you cannot determine the precedence order of the operators. This is a good idea, but as motivated young people, you must learn to prioritize the operators.
basis
Computer compilers run from left to right, but operators do not. There’s a point here called relevance.
Correlation between
Affinity is an important concept in operator precedence, which determines the order in which operators of the same precedence are executed.
There are usually three types of association, left association, right association and no association
a OP b OP c; Left correlation (left to right) is equivalent to parentheses (a OP b) OP c of the left subexpression, and right correlation (right to left) is equivalent to a OP (b OP C)
reference
Taken from MDN Web Docs
| priority | Operation type | Correlation between | The operator |
|---|---|---|---|
| 21 | parentheses |
N/A (unrelated) | (...). |
| 20 | Member access |
From left to right | ... .... |
Member access to be calculated |
From left to right | ... [...]. |
|
new(With parameter list) |
n/a | The new... (...). |
|
| A function call | From left to right | ... (...) |
|
| Optional chaining | From left to right | ? . |
|
| 19 | new(No parameter list) | From right to left | The new... |
| 18 | Increasing the rear(Operator follows) | n/a |
... ++ |
| The rear of diminishing(Operator follows) | ... -- |
||
| 17 | Logic is not | From right to left | ! ... |
| According to a non | ~... |
||
| One yuan addition | +... |
||
| One yuan subtraction | -... |
||
| Increasing pre – | + +... |
||
| Front of diminishing | -... |
||
| typeof | Typeof... |
||
| void | Void... |
||
| delete | The delete... |
||
| await | Await... |
||
| 16 | power | From right to left | ... * *... |
| 15 | The multiplication | From left to right |
... *... |
| division | ... /... |
||
| modulus | ... %... |
||
| 14 | add | From left to right |
... +... |
| subtraction | ... -... |
||
| 13 | According to a shift to the left | From left to right | ... < <... |
| According to the position moves to the right | ... > >... |
||
| Unsigned shift to the right | ... > > >... |
||
| 12 | Less than | From left to right | ... <... |
| Less than or equal to | ... < =... |
||
| Is greater than | ... >... |
||
| Greater than or equal to | ... > =... |
||
| in | ... The in... |
||
| instanceof | ... Instanceof... |
||
| 11 | The equal sign | From left to right |
... = =... |
| The equal sign | ... ! =... |
||
| All the equals sign | ... = = =... |
||
| Not all equal | ... ! = =... |
||
| 10 | Bitwise and | From left to right | ... &... |
| 9 | The bitwise exclusive or | From left to right | ... ^... |
| 8 | Bitwise or | From left to right | ... |... |
| 7 | Logic and | From left to right | ... &&... |
| 6 | Logic or | From left to right | ... | |... |
| 5 | A null value merge | From left to right | ... ?? ... |
| 4 | Conditional operator | From right to left | ... ? ... :... |
| 3 | The assignment | From right to left | ... =... |
... + =... |
|||
... - =... |
|||
... * * =... |
|||
... * =... |
|||
... / =... |
|||
... % =... |
|||
... < < =... |
|||
... > > =... |
|||
... > > > =... |
|||
... & =... |
|||
... ^ =... |
|||
... | =... |
|||
... && =... |
|||
... | | =... |
|||
... ?? =... |
|||
| 2 | yield | From right to left | Yield... |
| yield* | Yield *... |
||
| 1 | Expansion operator | n/a | . … |
| 0 | The comma | From left to right | ... ,... |
Practical application of the pit
&& and | |
Look at the following code
console.log(true || false && false) // true
Copy the codeThis is a very classic example, if we don’t know && priority than | | is high, we think the return value is false.
The ternary operators and ==
let value = "3"
let index = 3
let flag = value == index ? 1 : 2
console.log(flag) / / 1
Copy the codeThe equal sign (==) and full equal sign (===) have higher precedence than the ternary operator. So value == index first, return true. The final result is 1
If the ternary operator has a higher priority than the equal sign, the result will be completely reversed. The return value will be false
Addition, subtraction, multiplication, division and modulo
console.log(1 + 2 * 3 % 4) / / 3
Copy the codeMultiply, divide and modulo before adding and subtracting.
The multiplication and division operators have the same precedence as the modulo operators, so the calculation starts from left to right.
Pre-decrement, pre-increment and &&
let number = 1
console.log(--number && 7) / / 0
let number2 = 0
console.log(++number2 && 7) / / 7
Copy the codePre-decrement, pre-increment operators have higher precedence than &&, and decrement is counted first
Typeof and ternary operators
let flag = false
console.log(typeof flag) // boolean
console.log(typeof flag ? '2' : 1) / / 2
Copy the codeTypeof evaluates at a higher level than the ternary operator, so it returns 2.
Addition, subtraction, multiplication, division and magnitude of
let number = 3
console.log(number + 4 > 6) // true
console.log(number * 2 > 5) // true
Copy the codeThe operators of addition, subtraction, multiplication and division have precedence over size and compute addition, subtraction, multiplication and division first
&& and the ternary operators
console.log(1 && 0 ? 3 : 2) / / 2
Copy the codeAm& has a higher level of operation than the ternary operator and evaluates first
conclusion
Operator priority is a big module, and it’s very difficult!
Make sure you spend more time on it.