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

This article mainly explains "what are the new functions of ES2021". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the new functions of ES2021"?

Brief introduction

ES2021 (ES12) will be released in mid-2021. In this article, you will learn about the five most interesting features: String.prototype.replaceAll (), numeric delimiter, logical assignment operator, Promise.any (), WeakRef, and Finalizers.

The five features described in this article are currently in phase 4. This means that they have been completed and will be implemented in the JavaScript engine. This means that you won't waste your time learning something that may never happen.

These features will be released soon. If you are interested, you can go to the official Ecma TC39 GitHub (https://github.com/tc39/proposals)) for more information about other proposals. This Github library tracks all proposals and their current stages.

String.prototype.replaceAll ()

Start with a small function, replaceAll (), which is a supplement to the JavaScript language. You can now use the replace () method when you want to replace a matching pattern that appears multiple times in a string, but the problem is that it can only replace the one that appears for the first time.

This doesn't mean that replace () can't replace all the matching patterns that appear, but you have to use regular expressions. If you can accept it, then it's fine. But for many js programmers, regular expressions are not their type (actually too lazy to learn!).

If you are such a js programmer, you will definitely like the new replaceAll () method. It works like replace (), except that replaceAll () can replace all patterns that occur without regular expressions.

ReplaceAll () can also accept regular expressions, and you can use it instead of replace ().

/ / declare a string let str = 'There are those who like cats, there those who like watching cats and there are those who have cats.' / / replace all "cats" with dogs: strstr = str.replaceAll (' cats', 'dogs') console.log (str) / / Output: / /' There are those who like dogs, there those who like watching dogs and there are those who have dogs.' / / with replace (): strstr = str.replace (/ cats/g) 'dogs') console.log (str) / / Output: / /' There are those who like dogs, there those who like watching dogs and there are those have dogs.'

Numeric separator

This is a very small feature of JavaScript ES2021 that makes it easier for you to deal with large numbers. Numeric delimiters provide an easy way to make large numbers easier to read and use. The syntax is also simple: an underscore _.

/ / Number const num without numeric delimiter = 3685134689 / / Number const num with numeric delimiter = 3 "685" 134 "689

But digital delimiters only provide some visual help. When used, it does not have any effect on the value itself.

/ / Number const num with numeric separator = 3" 685 "134" 689 / / output: console.log (num) / / Output: / / 3685134689

Logical assignment operator

JavaScript allows the use of logical operators in a Boolean context. For example, in if... Whether it is true or false is detected in the else statement and the ternary operator. ES2021's logical assignment operator combines the logical operator with the assignment expression (=).

There are already some assignment operators in JavaScript, such as addition assignment (+ =), subtraction assignment (- =), multiplication assignment (* =), and so on. The logical operators & &, | | and?? have been added to ES2021. ([null value merge) support.

/ / Logic and assignment operator (& & =) / x & & = y / / the above code is equivalent to: xx = x & d / / or: if (x) {x = y} / / example 1: let x = 3 let y = 0 x & & = y console.log (x ) / / Output: / / 0 / / example 2: let x = 0 let y = 9 x & & = y console.log (x) / / Output: / / 0 / / case 3: let x = 3 / / Truthy value. Let y = 15 / / Truthy value. X & & = y console.log (x) / / Output: / / 15 / / logical or assignment operator (| | =): X | | = y / / equivalent to: xx = x | y / or: if (! x) {x = y} / / example 1: let x = 3 let y = 0 x | | = y console.log (x) / / Output: / / 3 / / example 2: let x = 0 let y = 9 x | | = y console.log (x) / / Output: / / 9 / / case 3: let x = 3 let y = 15 x | | = y console.log (x) / / Output: / / 3 / Null merge assignment operator (?): / / x? = y / / equivalent to: xx = x? Y / / or: if (x = = null | | x = = undefined) {x = y} / / example 1: let x = null let y = 'Hello' x?? = y console.log (x) / Output: / /' Hello' / / case 2: let x = 'Jay' let y =' Hello' x?? = y console.log (x) / Output: / / 'Jay' / / example 3: let x = 'Jay' let y = null x?? = y console.log (x) / / Output: / /' Jay' / / example 4: let x = undefined let y = 'Jock' x?? = y console.log (x) / Output: / /' Jock'

Take a look at the example above. The first is x & & = y. Y is assigned to x only if x is true. The second is x | | = y, which assigns y to x only if x is false. If x is true and y is false, no assignment is made.

If both x and y are fake, the same thing will happen. Finally, there is x = y. Y is assigned to x only if x is null or undefined. No assignment is made if x is neither null nor undefined, nor if y is null or undefined.

Promise.any ()

The Promise.race () and Promise.all () methods are introduced in ES6, and ES2020 adds Promise.allSettled (). ES2021 adds another way to make Promise processing easier: Promise.any ().

The Promise.any () method accepts multiple promise and returns promise if any one of them is completed. It returns the first promise completed by Promise.any (). If all promise are rejected, Promise.any () returns AggregateError, which contains the reason for the rejection.

/ / example 1: all completed: / / create promises: const promise1 = new Promise ((resolve, reject) = > {setTimeout (() = > {resolve ('promise1 is resolved.')}, Math.floor (Math.random () * 1000))}) const promise2 = new Promise ((resolve, reject) = > {setTimeout () = > {resolve (' promise2 is resolved.')} Math.floor (Math.random () * 1000)}) const promise3 = new Promise ((resolve, reject) = > {setTimeout () = > {resolve ('promise3 is resolved.')}, Math.floor (Math.random () * 1000))})) (async function () {/ / Await the result of Promise.any (): const result = await Promise.any ([promise1, promise2, promise3]) console.log (result) / Output: / / 'promise1 is resolved.',' promise2 is resolved.' Or 'promise3 is resolved.'}) () / example 2: partial completion: const promise1 = new Promise ((resolve, reject) = > {setTimeout () = > {resolve (' promise1 is resolved.')}, Math.floor (Math.random () * 1000))}) const promise2 = new Promise ((resolve, reject) = > {setTimeout () = > {reject ('promise2 was rejected.')} Math.floor (Math.random () * 1000))}) (async function () {/ / Await the result of Promise.any (): const result = await Promise.any ([promise1, promise2]) console.log (result) / / Output: / / 'promise1 is resolved.'}) () / case 3: all rejected: const promise1 = new Promise ((resolve, reject) = > {setTimeout () = > {reject (' promise1 was rejected.')} Math.floor (Math.random () * 1000)}) const promise2 = new Promise ((resolve, reject) = > {setTimeout () = > {reject ('promise2 was rejected.')}, Math.floor (Math.random () * 1000))})) (async function () {/ / Use try...catch to catch the AggregateError: try {/ / Await the result of Promise.any (): const result = await Promise.any ([promise1, promise2])} catch (err) {console.log (err.errors) / / Output: / / ['promise1 was rejected.',' promise2 was rejected.']}) ()

Weak reference: WeakRef

The last eye-catching feature is WeakRefs. In JavaScript, when you create a reference to create an object, this reference prevents the object from being recycled by gc, which means that JavaScript cannot delete the object and free its memory. As long as a reference to the object exists all the time, you can make the object exist forever.

ES2021 has a new class WeakRefs. Allows you to create weak references to objects. This allows you to track existing objects without preventing them from being garbage collected. Useful for caching and object mapping.

You must create a new WeakRef with the new keyword and put some objects in parentheses as parameters. When you want to read the reference (the referenced object), you can do this by calling deref () on the weak reference. Here is a very simple example.

Const myWeakRef = new WeakRef ({name: 'Cache', size:' unlimited'}) console.log (myWeakRef.deref ()) / / Output: / / {name: 'Cache', size:' unlimited'} console.log (myWeakRef.deref (). Name) / Output: / / 'Cache' console.log (myWeakRef.deref (). Size) / / Output: / /' unlimited'

Finalizers and FinalizationRegistry

There is another feature closely linked to WeakRef, called finalizers or FinalizationRegistry. This feature allows you to register a callback function that will be called when the object is reclaimed by gc.

/ / create FinalizationRegistry: const reg = new FinalizationRegistry ((val) = > {console.log (val)}); () = > {/ / create a new object: const obj = {} / / register the "obj" object finalizer: / / the first parameter: the object for which you want to register the finalizer. / / the second parameter: the value of the callback function defined above. Reg.register (obj, 'obj has been garbage-collected.')}) () / / output: / /' obj has been garbage-collected.' when "obj" is recycled by gc

Officials advise against using WeakRef and finalizer easily. One reason is that they may be unpredictable, and the other is that they don't really help gc get the job done, which may actually make gc's job more difficult. You can learn more about the reasons in its proposal (https://github.com/tc39/proposal-weakrefs#a-note-of-caution)).

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