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

This article mainly explains "what are the new features of ES 2021". The explanation content in this article is simple and clear, and it is easy to learn and understand. Please follow the ideas of Xiaobian to study and learn "what are the new features of ES 2021" together.

String.protype.replaceAll

Before ES2021, to replace all specified characters in a string, we could do this:

const fruits = '?+?+?+ '; const fruitsfruitsWithBanana = fruits.replace(/\+/g, '? '); console.log(fruitsWithBanana); //???

ES2021 proposes the replaceAll method and mounts it on the prototype of String, which can be used as follows:

const fruits = '?+?+?+ '; const fruitsfruitsWithBanana = fruits.replaceAll('+', '? '); console.log(fruitsWithBanana); //??????

Promise.any

Promise.any method is similar to Promise.race-it takes the value of the first promise as its return value whenever a promise in a given iteration succeeds, but differs from Promise.race in that it waits until all promises fail before returning the failed value:

const myFetch = url => setTimeout(() => fetch(url), Math.floor(Math.random() * 3000)); const promises = [ myFetch('/endpoint-1'), myFetch('/endpoint-2'), myFetch ('/endpoint-3'), ]; //use.then .catch Promise.any(promises) //any promise succeeds. .then(console.log) //e.g.'3' .catch(console.error); //all promises fail//use async-await try { const first = await Promise.any(promises); //any promise returns successfully. console.log(first); }catch (error) { //all promises fail console.log(error); }

WeakRef

The WeakRef proposal includes two new features:

You can create a weak reference to an object through the WeakRef class

You can use the FinalizationRegistry class to execute custom methods after an object has been garbage collected

These two new features can be used together or separately, depending on your needs.

A WeakRef object contains a weak reference to an object called a target or reference. By weakly referencing an object, you can get that object collected by garbage collection without any other references.

WeakRef is mainly used to cache and map large objects. It can be used when you want an object to be garbage collected in time without being referenced elsewhere.

function toogle(element) { const weakElement = new WeakRef(element); let intervalId = null; function toggle() { const el = weakElement.deref(); if (! el) { return clearInterval(intervalId); } const decoration = weakElement.style.textDecoration; const style= decoration === 'none' ? 'underline' : 'none'; decoration = style; } intervalId = setInterval(toggle, 1000); } const element = document.getElementById("link"); toogle(element); setTimeout(() => element.remove(), 10000);

FinalizationRegistry receives a registry callback function, which can be used to register an event listener for a specified object. When this object is garbage collected, the listening event will be triggered. The specific steps are as follows.

First, create a registry:

const registry = new FinalizationRegistry(heldValue => { // .... });

Then register a specified object, and you can also pass some parameters to the registrar callback:

registry.register(theObject, "some value");

logical assignment operator

The difference between assignment operators and expressions can be seen here.

Logical assignment operators combine logical operators and assignment expressions. There are two types of logical assignment operators:

or equal to (||=）

and equal to (&&=)

//or equal to| a | b | a ||= b |a (after calculation)|| true | true | true | true | | true | false | true | true | | false | true | true | true | | false | false | false | false | a ||= b //Equivalent to: a|| (a = b); //and equals| a | b | a &&= b |a (after calculation)|| true | true | true | true | | true | false | false | false | | false | true | false | false | | false | false | false | false | a &&= b //equals: a && (a = b);

decimal separator

With this feature, we use the "(_, U+005F)" delimiter to group numbers and improve the readability of numbers:

1_000_000_000 //billion 101_475_938.38 //billions const amount = 12,345_00; // 12,345 const amount = 123_4500; // 123.45 const amount = 1_234_500; // 1,234,500 0.000_001 //parts per million 1e10_000 // 10^10000 const binary_liquids = 0b1010_0001_1000_0101; const hex_liquids = 0xA0_B0_C0; const bigInt_literals = 1_000_000_000n; const octal_literal = 0o1234_5670; Thank you for reading. The above is the content of "What are the new features of ES 2021?" After studying this article, I believe you have a deeper understanding of what are the new features of ES 2021. The specific use situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.