The ES2021 Update!

June 22, 2021, ES2021 standard released, Github link. The standard is officially released in June each year as the official version of the year.

Anyone can make a proposal to the Standards Committee (also known as the TC39 Committee) to change the language standard.

A new grammar goes through five stages from proposal to formal standard. Changes at each stage need to be approved by the TC39 Committee.

1. Stage 0 – Strawman
2. Stage 1-Proposal
3. Stage 2 – Draft
4. Stage 3
5. Stage 4-Finished

Once a proposal makes it to Stage 2, it will almost certainly be included in a later formal standard. All current ECMAScript proposals can be viewed on TC39’s official website tc39.es/ ECMA262.

Update the content

This specification, the 12th edition, introduces the replaceAll method for Strings; Promise.any, a Promise combinator that short-circuits when an input value is fulfilled; AggregateError, a new Error type to represent multiple errors at once; logical assignment operators (?? =, && = | | =); WeakRef, for referring to a target object without preserving it from garbage collection, and FinalizationRegistry, to manage registration and unregistration of cleanup operations performed when target objects are garbage collected; separators for numeric literals (1_000); and Array.prototype.sort was made more precise, reducing the amount of cases that result in an implementation-defined sort order.

Above is the original text from TC39.es/ECMA262 /. A brief introduction to the syntax added to JavaScript this year, but not a lot.

There are five new features:

1. The logical assignment operator 🙁?? =.&& =.| | =)
2. Numeric delimiter 🙁1 _000)
3. Promise.any & AggregateError
4. String.prototype.replaceAll
5. WeakRefs & FinalizationRegistry objects

Quick learning

Logical assignment operator

ES2021 introduces three new logical assignment operators that combine logical operators with assignment operators.

// or the assignment operator
x ||= y
/ / is equivalent to
x || (x = y)

// And the assignment operator
x &&= y
/ / is equivalent to
x && (x = y)

// The Null assignment operatorx ?? = y/ / is equivalent to
x ?? (x = y)
Copy the code

These three operators | | =, && =?? = is equivalent to performing the logical operation first, then performing the assignment based on the result of the operation, as the case may be.

One use for them is to set default values for variables or properties.

// The old way
user.id = user.id || 1;

// New way of writing
user.id ||= 1;
Copy the code

In the example above, the user.id attribute is set to 1 if it does not exist, and the new version is more compact than the old one.

Numeric separator

ES2021, which allows JavaScript numeric values to be delimited by an underscore (_).

let budget = 1 _000_000_000_000;
budget === 10支那12 // true
budget === 1000000000000
Copy the code

String.prototype.replaceAll

Previously, the string instance method replace() could only replace the first match.

'aabbcc'.replace('b'.'_')
// 'aa_bcc'
Copy the code

In the example above, replace() simply replaces the first b with an underscore.

If you want to replace all matches, you have to use the g modifier of the regular expression.

'aabbcc'.replace(/b/g.'_')
// 'aa__cc'
Copy the code

Regular expressions aren’t that convenient and intuitive after all, and ES2021 introduces the replaceAll() method, which replaces all matches at once.

'aabbcc'.replaceAll('b'.'_')
// 'aa__cc'
Copy the code

It is used in the same way as replace(), returning a new string without changing the original string.

WeakRef

WeakSet and WeakMap are weakreference-based data structures, and ES2021 goes a step further by providing WeakRef objects for directly creating weak references to objects.

let target = {};
let wr = new WeakRef(target);
Copy the code

In the example above, target is the original object, and the constructor WeakRef() creates a new object wR based on target. Here, WR is an instance of WeakRef, which is a weak reference to Target. The garbage collection mechanism does not count this reference, that is, the REFERENCE of WR does not prevent the original object target from being cleared by the garbage collection mechanism.

FinalizationRegistry

ES2021 introduces the sweeper registry feature FinalizationRegistry, which specifies the callback functions to be executed after the target object is cleared by the garbage collection mechanism.

First, create a new registry instance.

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

In the above code, FinalizationRegistry() is the system-provided constructor that returns an instance of the sweeper registry that registers the callback function to be executed. The callback function is passed in as an argument to FinalizationRegistry(), which itself takes one argument, heldValue.

The register() method of the registry instance is then used to register the target object to be observed.

registry.register(theObject, "some value");
Copy the code

In the example above, theObject is theObject being observed. Once theObject is cleared by the garbage collection mechanism, the registry calls the callback function that was registered earlier, passing some value as an argument (the previous heldValue).

Promise.any

ES2021 introduces the promise.any () method. The method takes a set of Promise instances as parameters and returns them wrapped as a new Promise instance.

const p = Promise.any([p1, p2, p3]);
Copy the code

As long as one parameter instance becomes a depressing state, the packaging instance will become a depressing state. If all parameter instances become the Rejected state, the wrapper instance becomes the Rejected state.

Promise.any() throws an AggregateError instance rather than a generic Error object. It is equivalent to an array, with each member corresponding to an error thrown by the Rejected operation.

Reference: es6.ruanyifeng.com/