Surprisingly, ES2021 has updated 5 apis like this

Author: Chen Da Yu Tou

Making: KRISACHAN

Tc39 will update some feature apis every year unless there are special circumstances. This year’s release is version 12, also known as ES12. Let’s take a look at the updated apis.

Numeric Separators (Numeric Separators)

As you know, our Number looks like this: 123456. But when you get a lot of money, it’s kind of unintuitive, and you have to do it every time you look at it, but now we can do this:

// The old scheme
const count1 = 123456789;

// New scheme
const count2 = 123 _456_789;

console.log(count2); / / 123456789
Copy the code

String.prototype.replaceAll()

The new replaceAll() replaces all matched characters directly, like this:

'What a beautiful jasmine, Jasmine, jasmine, you are sweet and beautiful.'.replaceAll('Jasmine'.'Roses');
// What a beautiful rose, rose, rose, you smell so beautiful
Copy the code

But if you use an identifier other than g in replaceAll(), or if you do not add g, you will get an error, for example:

'What a beautiful jasmine, Jasmine, jasmine, you are sweet and beautiful.'.replaceAll(/ Jasmine /.'Roses');
// Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument
Copy the code

So this is just grammatical sugar for G…

Logical Assignment Operators

Some operators have been updated to make it easier to write short chain expressions in the future.

And And equals (&&=)

**&&= ** Assignment is performed only if the left-hand operand is truthy.

let a = 1;
let b = 2;
a &&= b;
console.log(a); / / 15

/ / equivalent to the
if (a) {
    a = b;
}
console.log(a); / / 15
Copy the code

Or or equals (||=)

| | = contrary to && = * * * *, only when the left operand is falsy to perform the assignment.

let a = undefined;
let b = 2;

a ||= b;
console.log(a); / / 2

/ / equivalent to the
if(! a) { a = b; }Copy the code

Question question equals (?? =)

?? = Perform assignment only if the left-hand operand is null or undefined.

let a = undefined;
let b = 2; a ?? = b;console.log(a); / / 2

/ / equivalent to the
if (a === null || a === undefined) {
    a = b;
};
Copy the code

Promise.any

This is a big pity. Promise. All is the opposite, as long as there is one Promise which is a pity, then you will return the result directly.

Promise
  .any([
    Promise.reject('rejected'),
    Promise.resolve('fulfilled')
	])
	.then(res= > console.log(res))
	.catch(err= > console.error(err));
// fulfilled

Promise
  .any([
    Promise.reject('rejected1'),
    Promise.reject('rejected2')
	])
	.then(res= > console.log(res))
	.catch(err= > console.error(err));
// AggregateError: All promises were rejected

Promise
  .any([
    Promise.resolve('resolve1'),
    Promise.resolve('resolve1')
	])
	.then(res= > console.log(res))
	.catch(err= > console.error(err));
// resolve1
Copy the code

WeakRefs

WeakRef is short for **Weak References ** and its main purpose is to make Weak References to another object. This means that it does not prevent the GARBAGE Collector (GC) from collecting objects. This is useful when we don’t want to keep objects in memory forever. Use it with care, however, because it is possible that the referenced object has already been reclaimed by the time it is used. Even TC39 suggests not using it if you can.

const newRef = new WeakRef({
     name: 'head'.age: '26'.sex: 'male'
});

const obj = newRef.deref();

console.log(obj); // {name: "fishhead ", age: "26", sex:" male "}
Copy the code

The resources

What’s new in ECMAScript 2021
Ecma TC39
[ECMAScript] TC39 process
The TC39 Process