Shulou(Shulou.com)06/03 Report--

This article focuses on "what are the powerful operators in JS". Friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the powerful operators in JS.

1. Numeric separator _

ES2021 introduces the numeric separator _, which provides separation between groups of values, making it easier to read a long number. Chrome already provides support for numeric separators, which can be tried in browsers.

Let number = 10000000000000000000000000 / 0 too much console.log (number) / / output 100000000000000 without numeric separator

In addition, numeric separators can also be used in decimal, binary and hexadecimal systems.

0x11_1 = 0x111 / / true hexadecimal 0.11binary 1 = = 0.111 / / true decimal 0b11_1 = 0b111 / / true binary

two。 Comma operator

What, can a comma be an operator? Yes, I have seen such a simple function that swaps the first and second items of the array and returns the sum of the two terms:

Function reverse (arr) {return [arr [0], arr [1]] = [arr [1], arr [0]], arr [0] + arr [1]} const list = [1,2] reverse (list) / / returns 3, where list is [2,1]

The comma operator evaluates each of its operands (from left to right) and returns the value of the last Operand.

Expr1, expr2, expr3...

The result of the last expression expr3 is returned, and other expressions are only evaluated.

3. Zero merge operator?

Zero merge operator? Is a logical operator that returns the right Operand when the left Operand is null or undefined, otherwise it returns the left Operand.

Expr1?? Expr2

The null merge operator is generally used to provide default values for constants to ensure that constants are not null or undefined. Previously, it was generally used | | to do this variable = variable | | 'bar'. However, because | | is a Boolean logic operator, the Operand on the left is cast to a Boolean value for evaluation. Any false values (0,', NaN, null, undefined) will not be returned. This leads to unpredictable consequences if you use 0,'', and NaN as valid values.

It is precisely because of | | that there is such a problem. The emergence of is to solve these problems,? The latter is returned only when undefined or null is on the left,?? It can be understood as a perfect solution of "Yes".

You can feel it by executing the following code in the browser:

Undefined | | 'default' / /' default' null | | 'default' / /' default' false | | 'default' / /' default' 0 | | 'default' / /' default' undefined? 'default' / /' default' null? 'default' / /' default' false? 'default' / /' false' 0? 'default' / / 0

In addition, the abbreviation of the assignment operator can be used when assigning a value.

Let a = {b: null, c: 10} a.b? = 20a.c? = 20 console.log (a) / / output {b: 20, c: 10}

4. Optional chain operator?.

Optional chain operator?. Allows you to read the value of a property deep in the chain of connected objects without having to verify that each reference in the chain is valid. ?. The function of the operator is similar to. Chain operator, the difference is that it does not cause an error if the reference is null or undefined, and the expression short circuit returns a value of undefined.

When you try to access object properties that may not exist, the optional chain operator makes the expression shorter and more concise.

Const obj = {a: 'foo', b: {c:' bar'}} console.log (obj.b?.c) / output bar console.log (obj.d?.c) / / output undefined console.log (obj.func?. ()) / / No error report, output undefined

In the past, you might have used obj & & obj.a & & obj.a.b to get a deeply nested child attribute, but now you can obj?.a?.b it directly.

In addition to getting the properties of an object, the optional chain can also be used in the index arr?. [index] of the array, in the judgment func?. (args) of the function, or when trying to call a method that may not exist.

When calling a method that may not exist on an object (in scenarios where the version or the current user's device does not support this feature), using an optional chain allows the expression to return undefined instead of throwing an exception when the function does not exist.

Const result = someInterface.customFunc?. ()

5. Private methods / properties

In a class, you can mark it as private by adding a # private tag to the front of the attribute. In addition to the fact that the attribute can be marked as private, getter/setter can also be marked as private and methods can be marked as private.

Class Person {getDesc () {return this.#name +'+ this.#getAge ()} # getAge () {return this.#age} / / Private method get # name () {return 'foo'} / / Private accessor # age = 23 / / Private attribute} const a = new Person () console.log (a.age) / / undefined cannot directly access console.log (a.getDesc ()) / / foo 23

6. Bit operators > > and >

The signed right shift operator > > moves the first Operand to the right by the specified number of digits, the excess displacement to the right is discarded, the high position complements its symbolic bit, the positive number adds 0, and the negative number adds 1. Because the new leftmost bit has the same value as the previous leftmost bit, the symbol bit (leftmost bit) does not change.

(0b111 > > 1) .toString (2) / / "11" (- 0b111 > > 1) .toString (2) / / "- 100s" doesn't feel like intuition

It is easy to understand the positive number, but how to understand the negative number? the negative number is stored according to the complement code in the computer, and the complement code is calculated by adding one to the back. when shifting, the form of the complement code is moved to the right, and the leftmost symbol bit is filled. After the shift, add a complement code again to get the processed original code.

1 1111001 / / complement 1 1111100 / / the arithmetic is shifted to the right and the complement code is 1 0000100 / / the truth value of the original code is obtained.

Generally, we use > > to divide a number by 2, which is equivalent to discarding decimal places and then Math.floor:

10 > > 1 / 5 13 > > 1 / 6 equals 13.9 > > 1 / 6-13 > > 1 / /-7 equals-13.9 > > 1 / /-7

The unsigned right shift operator > moves the symbol bit to the right as part of the binary data, and the high bit always makes up 0. There is no difference between the positive integer and the arithmetic right shift. For negative numbers, because the symbol bit is filled with 0, there is no need to ask for the complement code after becoming a positive number, so the result is always non-negative. Even if you move 0 bits to the right, the result is nonnegative.

(0b111 > 1) .toString (2) / / "11" (- 0b111 > 1) .toString (2) / / "11111111111111111111111111100"

It can be understood this way.

-111 / / True value 1 000000000000000000000000000111 / original code 1 1111111111111111111111111001 / complement 011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

Left shift operator > > =, logical null value? =.

3. Find the power operator: var1 * * var2 is equivalent to Math.pow, and the result is the var2 power of var1

twelve。 Operator precedence

Because of the operator precedence, variable = 1, 2 means to assign the variable to 1 and then return the number 2, rather than the variable to the return value 2 of 1, 2, because the = operator takes precedence over the comma operator. Another example is the expression 6-2 * 3 = 0 & & 1 Magi-* = & & the four operators with the highest priority * operate first, and then the result of the-operator is that the zero priority operator takes precedence over & & and the result of true & & 1 is 1, so this is the result of the operation.

The following table arranges operators in order of priority from high (20) to low (1), but this is not up-to-date, at least does not include optional chains, it is recommended to refer to this table or MDN.

At this point, I believe you have a deeper understanding of "what are the powerful operators in JS?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.