Since the major ES6 release in 2015, it has become the norm to release new features every year, so go go go go.

1. Logical assignment operators
New logic assignment operator | | =, && =?? =
  • | | = : x | | = y is equivalent to x = x | | y
let a = 0
a ||= 2
console.log(a) / / 2
Copy the code
  • ?? = : x ?? = y is the same thing as x = x? y (?? Check whether the value is null or undefined.
let a = 0
let b;
console.log(a ?? =3, a) / / 0 0
console.log(b ?? =3, b) / / 3. 3
Copy the code
  • &&= : x &&= y is equivalent to x = x && y
let a = 1
a &&= 2
console.log(a) / / 2

// also equivalent to
// if(x) x = y
Copy the code
2. String.prototype.replaceAll

ReplaceAll returns a new string that matches all patterns replaced by the second argument passed

const str = 'Ghost and Snake'
console.log(str.replaceAll('god'.'worm')) // The cow ghost snake worm
Copy the code
3. Numeric delimiters

Number separators are intended to facilitate the intuitiveness of numbers

const bill = 1 _223_144_555; / / 1.2 billion
console.log( bill === 1223144555) // true
Copy the code
4. Promise.any

The promise.any () method is a new Promise method that takes a series of promises and resolves them into the value of the first Promise successfully resolved. In other words, promise. any successfully resolves any Promise, and if all promises are rejected, then reject.

const pro1 = new Promise((resolve, reject) = > setTimeout((x) = > resolve(x), 300.'300'))
const pro2 = new Promise((resolve, reject) = > setTimeout((x) = > resolve(x), 200.'200'))
const pro3 = new Promise((resolve, reject) = > setTimeout((x) = > resolve(x), 100.'100'))

Promise.any([pro1, pro2, pro3]).then(v= > console.log(v)).catch(e= >console.log(e))  / / 100
Copy the code
5. WeakRef

WeakRef object allows you to retain a weak reference to another object, and will not prevent the weak reference object from being recycled by GC. Specifically, MDN 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.

const weakRef = new WeakRef({
   name:"Jay Chou";
});
console.log(weakRef.deref().name)  / / jay Chou
Copy the code
  • MDN example
class Counter {
  constructor(element) {
    // Remember a weak reference to the DOM element
    this.ref = new WeakRef(element);
    this.start();
  }

  start() {
    if (this.timer) {
      return;
    }

    this.count = 0;

    const tick = () = > {
      // Get the element from the weak reference, if it still exists
      const element = this.ref.deref();
      if (element) {
        element.textContent = ++this.count;
      } else {
        // The element doesn't exist anymore
        console.log("The element is gone.");
        this.stop();
        this.ref = null; }}; tick();this.timer = setInterval(tick, 1000);
  }

  stop() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = 0; }}}const counter = new Counter(document.getElementById("counter"));
counter.start();
setTimeout(() = > {
  document.getElementById("counter").remove();
}, 5000);
Copy the code

How do I use ES2021 functionality in a code base

The latest versions of major browsers (e.g. Chrome85+, Firefox 79+ Safari14) already support the new ES2021 features. To use them in older browsers, you can use the Babel tool.

For details, see the support for ES2021 in the Babel documentation

reference

  1. Support for ES2021 in Babel documentation
  2. ES2021 new Features
  3. New ES2021 features you may have missed