The 12th release of the ECMAScript language specification (ES2021). Let’s see how to use them.

String.prototype.replaceAll

If the original replace can only be replaced by a regular expression, I believe that many beginners have collapsed this pit.

const a = '112233';
a.replace('1'.'x');  // x12233
Copy the code

If we want to replace them all, we can only use the global regular expression:

a.replace(/1/g.'x');  // xx2233
Copy the code

Using replaceAll now achieves the same effect without the re, and is much more intuitive:

a.replaceAll('1'.'x');  // xx2233
Copy the code

Promise.any & AggregateError

After batch methods like All, Race, and allSettled, a new ANY comes along.

Race accepts the value of the first reslove in the Promise array as its own reslove, which means that as long as there is a depressing state, it will also be a depressing state. Here’s an example:

const a = Promise.resolve("ok");
const b = Promise.reject("err1");
const c = Promise.reject("err2");

Promise.any([a, b, c]).then(ret= > {
  console.log(ret);  // ok
});
Copy the code

When all Promises are Rejected, it will throw an AggregateError summary error message:

const a = Promise.reject("err1");
const b = Promise.reject("err2");
const c = Promise.reject("err3");

Promise.any([a, b, c]).catch(err= > {
  console.log(err.errors);  // ['err1', 'err2', 'err3']
});
Copy the code

Logical Assignment Operators

?? , &&, | | this three joined the assignment operator, for example to compare image:

/ / the original
a = a ?? b;
a = a && b;
a = a || b;

/ / newa ?? = b; a &&= b; a ||= b;Copy the code

Note: a += b changes the value of a, so does not const a.

WeakRef & FinalizationRegistry (Weak reference and garbage collection listening)

WeakRef

In general, a reference to an object is strongly referential, which means that as long as a reference to an object is held, it is not garbage collected. Only if the object does not have any strong references does the garbage collection destroy the object and reclaim the memory occupied by the object.

WeakRef, on the other hand, allows you to preserve a weak reference to another object without preventing the weakly referenced object from being garbage collected.

Constructor(object)

const target = { key: "value" };
const ref = new WeakRef(target);
Copy the code

WeakRef.prototype.deref()

The deref method returns the target object of the instance, or undefined if the target object has been garbage collected.

const targetObj = ref.deref();
if (targetObj) {
  console.log(targetObj.key); // value
} 
Copy the code

FinalizationRegistry

FinalizationRegistry lets you perform callbacks when an object is garbage collected.

Constructor(callback)

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

FinalizationRegistry.prototype.register(target, heldValue[, unregisterToken])

Among them

targetThat’s the target object
heldValueThis is the value that can be read by the callback, of any type
unregisterTokenOptional, cancel the listening reference, the requirement isobject, generally can put the target object

registry.register(theObject, {"useful": "info about target"});
Copy the code

FinalizationRegistry.prototype.unregister(unregisterToken)

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

Note: Use these two features with caution.

Numeric Literal separator

To improve readability of large numbers, it is now possible to use _ as a numeric separator:

const num = 1 _000_000_000 / / 1000000000
Copy the code

Similar to the 1,000,000,000 we often see, of course the partition line does not have to be split three bits apart.

Array.prototype.sort

As mentioned this time, array sort has been stabilized and was previously specified in ES2019. See the 9 new features that ES2019(ES10) brings.

collection

New features of ES2021(ES12
New features for ES2020(ES11)
Nine new features that ES2019(ES10) brings
ES2018 (ES9) new features
ES2017 (ES8) new features
ES2016 (ES7) new features

New features of ES2021(ES12