ES2021 is currently officially approved, ECMAScript 2022 has a draft specification and work continues.

ES2021 brings five new features, which are described below:

Logical assignment operator

//"Or Or Equals"
x ||= y;
x || (x = y);
/ / that
if(! x) { x = y; }// "And And Equals"
x &&= y;
x && (x = y);
/ / that
if (x) {
  x = y;
}

// "Question Question Equals"x ?? = y; x ?? (x = y);/ / that
if (x === null || x === undefined) {
  x = y;
}
Copy the code
const updateID = user= > {

  // We can do this
  if(! user.id) user.id =1

  // Or this
  user.id = user.id || 1

  // Or use logical assignment operator.
  user.id ||= 1
}
Copy the code
function setOpts(opts) { opts.cat ?? ='meow'opts.dog ?? ='bow';
}

setOpts({ cat: 'meow' })
Copy the code

Notice the difference!!

x = x || y; / / with x | | = y inequitable
x = x && y; // is not equivalent to x &&= y
x = x ?? y; / / x?? Is equal to y is not equivalent
Copy the code

The above expression will assign no matter what, but the logical assignment expression will only assign if the condition is true!

Numeric separator

Improves readability as a visual separation of numbers.

1 _000_000_000           // Ah, so a billion
101 _475_938. 38          // And this is hundreds of millions

let fee = 123 _00;       // $123 (12300 cents, apparently)
let fee = 12 _300;       $12,300 (Woah, that fee!)
let amount = 12345 _00;  // 12,345 (1234500 cents, apparently)
let amount = 123 _4500;  / / 123.45 (4 - fixed financial)
let amount = 1 _234_500; / / 1234500

let num1 = 1 _000_000
let num2 = 1000000
num1 === num2 // true
Copy the code

Promise.any

As long as there is a promise is a pity, then return a resolved promise; If all the promises are Rejected, return a Rejected Promise

Promise.any([
  fetch('https://v8.dev/').then(() = > 'home'),
  fetch('https://v8.dev/blog').then(() = > 'blog'),
  fetch('https://v8.dev/docs').then(() = > 'docs')
]).then((first) = > {
  // Any of the promises was fulfilled.
  console.log(first);
  / / to 'home'
}).catch((error) = > {
  // All of the promises were rejected.
  console.log(error);
});
Copy the code

Related supplements:

  • Promise. AllSettled: No matter every Promise is a pity or rejected, the return value is a resolved Promise [ES2020]

    Promise.allSettled([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result= > console.log('result:', result))
.catch(error= > console.error('error:', error));

// result:
// [{ status: "rejected", reason: 1 },
// { status: "fulfilled", value: 2 }]

Copy the code

  • Promise. All: Return a rejected Promise if there is a rejected Promise; This is a big pity. All promises will be fulfilled, and then return an resolved promise [ES2015]

    Promise.all([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result= > console.log('result:', result))
.catch(error= > console.error('error:', error));

// error: 1

Copy the code

  • This is a big pity or rejected Promise. Race: As long as there is a Promise which is fulfilled or rejected Promise, then immediately return a phase-out or rejected Promise [ES2015]

Promise.race([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result= > console.log('result:', result))
.catch(error= > console.error('error:', error));

// error: 1

Copy the code

String.prototype.replaceAll

Implements global substitution of strings. String.prototype.replace() replaces only the first matching String.

'x'.replace(' '.'_');
/ / - > '_x'

'xxx'.replace(/ (? :)/g.'_');
/ / - > '_x_x_x_'

'xxx'.replaceAll(' '.'_');
/ / - > '_x_x_x_'
Copy the code

WeakRefs and FinalizationRegistry objects

A WeakRef object contains a weak reference to the object, which is called the target or referent of the WeakRef object. A weak reference to an object means that it does not prevent the GC from collecting when the object should be collected by the GC. In contrast, a normal reference (strong by default) keeps its corresponding object in memory. Only if the object does not have any strong references does the JavaScript engine GC destroy the object and reclaim the memory occupied by the object. If that happens, then you can’t get the object through any weak references.

The FinalizationRegistry object lets you request a callback when the object is garbage collected.

let target = {};
let wr = new WeakRef(target);

//wr and target aren't the same


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

registry.register(myObject, "some value", myObject);
/ /... some time later, if you don't care about `myObject` anymore...
registry.unregister(myObject);
Copy the code

reference

  • ES2021 Features!
  • The ES2021 brings new features