If there are no special circumstances, some feature APIs will be updated every year. This year's release is the 12th edition, which is what we call "ES12". Let's take a look at which APIs have been updated.

Numeric Separators

As we all know, our "Number" is long like this: 123456. However, when the amount is large, it will not be intuitive. It has to be calculated every time, but now we can do this:

// Old scheme
const count1 = 123456789;

// New scheme
const count2 = 123_456_789;

console.log(count2); // 123456789

const totalFee = 1000.12_34
//Equivalent to
const totalFee = 1000.1234

String.prototype.replaceAll()

When you see the word replace all, you can easily associate it with replace. In JavaScript, the replace method can only replace the first instance character matched in the string, but cannot perform global multiple matching and replacement. The only way is to match and replace relevant rules through regular expressions

replaceAll returns a new string, and all characters that meet the matching rules will be replaced. The replacement rules can be strings or regular expressions.

The new replaceAll() can directly replace all matching characters, as follows:

'What a beautiful jasmine, jasmine, jasmine, you are fragrant and beautiful'.replaceAll('Jasmine Flower', 'rose');
// What a beautiful rose, rose, rose, you are fragrant and beautiful

However, if you use an identifier other than # g in # replaceAll(), or do not add # g, an error will be reported, for example:

'What a beautiful jasmine, jasmine, jasmine, you are fragrant and beautiful'.replaceAll(/Jasmine Flower/, 'rose');
// Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument

So this is just the grammar sugar of g...

Promise.any

When any promise in the promise list is successfully resolved, the result status of the first resolve will be returned
If all promise s are reject ed, an exception is thrown to indicate that all requests have failed

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

WeakRefs

When we create a variable through (const, let, var), the garbage collector GC will never delete the variable from memory as long as its reference still exists and can be accessed.  

WeakRef is short for Weak References. Its main purpose is to make a weak reference to another object. This means that it will not prevent GC (garbage collector) from collecting objects. This is useful when we don't want to keep objects in memory forever. However, you should be careful when using it, because the referenced object may have been recycled when you want to use it. Even the TC39 proposal suggested that if it could not be used, it would not be used.

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

const obj = newRef.deref();

console.log(obj); // {name: "fish head", age: "26", sex: "male"}

Logical Assignment Operators

Logical operators and assignment expressions. The new feature combines logical operators (& &, ||,?) And assignment expressions.

Some operators have also been updated this time. It will be much more convenient to write short chain expressions in the future.

And and equals operator (& & =)

&&=Assignment is performed only when the left operand is true.

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

// Equivalent to
if (a) {
    a = b;
}
console.log(a); // 2

Or or equals (||=)

||=In contrast to & & =, assignment is performed only when the left operand is false.

let a = undefined;
let b = 2;
a ||= b;
//Equivalent to
a = a || (a = b)
console.log(a); // 2

// Equivalent to
if (!a) {
    a = b;
}

&&And | assignment operation: https://blog.csdn.net/muzidigbig/article/details/109909755

 

Question question equals (??=)

??= Assignment is performed only if the left operand is null or undefined.

let a = undefined;
let b = 2;

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

// Equivalent to
if (a === null || a === undefined) {
    a = b;
};