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

This article focuses on "what are the new features of JavaScript and how to use them". Interested friends 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 new features of JavaScript and how to use them?"

ReplaceAll ()

First, we have a new string prototype method, replaceAll, which replaces each instance of the substring. Although we can do this using existing replace methods, we have to turn to regular expressions, such as:

"1990-01-01" .replace (/-/ g, "/")

ReplaceAll can be said to be more readable:

"1990-01-01" .replaceAll ("-", "/")

With replaceAll, regular expressions are not required. However, as long as the g flag is provided, it can still be used.

"1990-01-01" .replaceAll (/-/ g, "/"); support

Chrome:85+

Firefox:77+

Safari:13.1+

Node:15.0.0+

Promise.any

This year we have seen further improvements to asynchronous code handling, Promise.any, which accepts a set of Promise and returns the first parsed. If each Promise is rejected, an error is raised.

Let's take four Promise and see what happens:

Const p1 = new Promise ((resolve, reject) = > setTimeout (reject, 1000, "p1")); const p2 = new Promise ((resolve, reject) = > setTimeout (resolve, 2000, "p2")); const p3 = new Promise ((resolve, reject) = > setTimeout (reject, 3000, "p3")); const p4 = new Promise ((resolve, reject) = > setTimeout (resolve, 4000, "p4"))

Promise.any will return what was resolved first. In this case, p2. We can test with the following code:

Async function getFirstResolvedPromise () {

Const result = await Promise.any ([p1, p2, p3, p4])

Console.log (result)

}; getFirstResolvedPromise (); / / "p2"

Now we can deal with the Promise array in four ways:

Promise.all-returns the resolved Promise array, once all Promise are resolved

Promise.allSettled (added in 2020)-once all Promise are resolved or rejected, an array of Promise is returned, whether they are resolved or rejected

Promise.race-returns the first resolved or rejected Promise

Promise.any-returns the first resolved Promise

Support

Chrome:85+

Firefox:79+

Safari:14+

Node:15.0.0+

Logical assignment operator

The empty union operator has been introduced since 2020. We now have three logical operators:

& &-Logic and

| |-Logic or

??-empty merge operator

These abbreviations allow us to succinctly parse the expression based on whether a value is true or false-- or, in this case-- whether a value is empty (null or undefined).

Now we have a more concise shorthand for using these operators to assign values:

& & =-assign a variable if the variable is true

| | =-assign a variable if the variable is false |

?? =-assign a variable if the variable is empty

In the following code, each set of three statements is equivalent:

/ / Logic and assignment

A & = b

A = a & & b

A = a? B: a position / logic or assignment

A | | = b

A = a | | b

A = a? A: B _ blank / logical null assignment

A? = b

A = a? B

A = a = null | | a = undefined?b: a

In the following example, a when each expression runs, the variable is reassigned to a new value. This is the code:

Let a = true

Const b = false, c = null, d = 10 * * a & & = b

Console.log (a); / / falsea | | = c

Console.log (a) / / nulla? = d

Console.log (a); / / 10

These new assignment operators add mathematical assignment operators + =,-=, * =, / =, * * = and% =, as well as bit operators.

Support

Chrome:85+

Firefox:79+

Safari:14+

Node:15.0.0+

Numeric separator

Finally a feature has been widely adopted this year that significantly improves the readability of people dealing with large numbers or decimal places!

Now, we can use underscores to separate numbers.

Const a = 100000000 × Const b = 100,000X true. Log (a = b)

Although an and b are the same, b is more easily identified as 100 million. In practice, numeric delimiters are mainly used as thousand-bit delimiters, although this usage is not enforced. Numeric delimiters can be used for floating-point numbers and BigInt values (introduced in 2020). Here is some code to show how this works:

Const float = 3.141 "592" 653 "59" Const bigInt = 9 "007" 1999 "254" 740 "992n

They also support hexadecimal, octal and binary numbers, such as hexadecimal 0xFF_FF_FF or 0x_00_00_00.

Note that _ cannot be used at the beginning or end of a number (or 0 after the initials). In addition, it cannot be adjacent to the decimal point and cannot use multiple underscores consecutively.

Support

Chrome:75+

Firefox: 70 +

Safari:13+

Node:12.5.0+

At this point, I believe you have a deeper understanding of "what are the new features of JavaScript and how to use them?" 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.