There are a few common operators that can make your front-end code more concise. This article summarizes some common JS operators/operators, the purpose is to simplify the code.
1.?? Operator null value merge/null judgment
The null-value merge operator returns the first argument if it is not null or undefined, otherwise it returns the second argument
null ?? 3 //3 undefined ?? 3 / / 3 7?? 3 / / 7Copy the code
2.? . Operator null conductor (or chain judgment operator)
In JS, when reading an attribute in an object, it is often necessary to determine whether the object exists first to prevent errors.
let a = (obj && obj.name) || 'default';
Copy the code
The above code can be abbreviated with the NULL conductor as
let a = obj ? . name || 'default';Copy the code
3,?? The = operator is the logical null assignment operator
This assignment operator assigns a new value only if the current value is empty or undefined.
let a = null const b = 5 console.log(a ?? = b) // => 5 console.log(a = (a ?? b)) // => 5Copy the code
4. Ternary operators
If val is true, a takes the value ifTrue; otherwise, ifFalse
const a = val ? ifTrue : ifFalse
Copy the code
5. The ~~ operator is a two-bit operator
You can use the two-bit operator to replace math.floor () for positive numbers and math.ceil () for negative numbers. The advantage of the double-negated operator is that it performs the same operation faster.
Math. Floor (4.9) = = = 4 / / true / / for short: ~ ~ 4.9 = = = 4 / / trueCopy the code
Note, however, that ~~ is the same as math.floor () for positive numbers and math.ceil () for negative numbers:
~ ~ 4.5 / / 4 math.h floor (4.5) / / 4 math.h ceil (4.5) / / / / 5 ~ ~ 4.5-4 Math. Floor (4.5) / / - 5 math.h ceil (4.5) / / - 4Copy the code
6, && and | | or short-circuit operator
&& for false operation, judging from left to right, if encountered a false value, return false value, no longer execute, otherwise return the last true value
| | to take real operations, judging from left to right in turn, if you meet a true value, and then return true, later no longer perform, otherwise returns a false value finally
let param1 = expr1 && expr2
let param2 = expr1 || expr2
Copy the code
7, | 0 integer
For a digital | 0 can be integer, negative number also applies, num | 0
1.3 | 0 // 1
-1.9 | 0 // -1
Copy the code
8, &1
A numeral & 1 can be odd or even, and a negative numeral, num & 1
const num=3; !!!!! (num & 1) // true !! (num % 2) // trueCopy the code
9, _ numeric separator
ES2021 introduces the numeric separator _, which provides separation between groups of values, making a long numeric value easier to read. Chrome already provides support for numerical separators, which you can try out in your browser.
Console. log(number) // Output 100000000000000Copy the code
In addition, numeric separators can be used for the decimal part of the decimal system, as well as for binary and hexadecimal systems
0x11_1 === 0x111 // true Hexadecimal 0.11_1 === 0.111 // True Decimal 0b11_1 === 0B111 // true binaryCopy the code
Void operator
The void operator evaluates the given expression and returns undefined
The void operator allows the JS engine to recognize a function keyword as a function expression rather than a function declaration when using IIFE immediately.
Function iife() {console.log('foo')}() Void function IIFE () {console.log('foo')}() ~function IIFE () {console.log('foo')}() // You can also use a bit operator (function iife() {console.log('foo')})() // or simply use parentheses to represent the whole expressionCopy the code
It can also be used in arrow functions to avoid leakage, which allow the function body to return a value without using parentheses. This feature brings a lot of convenience to the user, but sometimes it also causes unnecessary trouble. If a function is called on the right side of the function that does not return a value, its return value can change, resulting in unexpected side effects.
Const func = () => void customMethod() // Especially when passing a function to an event or callback functionCopy the code
To be safe, use void to ensure that undefined is returned when you do not want the function to return anything other than a null value, so that changes to the customMethod return value do not affect the behavior of the arrow function.
The priority of the js operator
JavaScript operator priority describes the order in which operations are performed when a computer evaluates an expression. The higher-priority operations are performed first, followed by the lower-priority operations. For example, we often talk about multiplying and dividing before adding and subtracting.
Parentheses are used to change the order of evaluation determined by operator precedence. That is, the expression in parentheses is evaluated before its value is applied to the rest of the expression.
In fact, as in other languages, it is best to put parentheses directly, such as var a = 1; a = (a + 100) >>(a+1); Var a = 1; a = a + 100>>a+1; It’s always 25, it’s the same order, it’s more readable, isn’t it?
More highlights: Follow us