Introduction to the

ES12 is a release released by the ECMA Association in June 2021. It is also known as ES12 because it is the twelfth version of ECMAScript.

It’s been a month since THE release of ES12. What are the new features and differences? Take a look.

Basically, ES12 introduced the replaceAll method for operating on strings, promise. any for combining promises, AggregateError for representing multiple sets of errors, and the new logical operator?? =, &&, | | =, weak references WeakRef, FinalizationRegistry registered for garbage collection, a digital 1 _000 separator, more precise method of Array sort an Array. The prototype. Sort.

The following article will explain one by one.

replaceAll

For those familiar with Java, there are two string replacement methods in Java: replace and replaceAll. The difference is that replace replaces a string while replaceAll matches regular expressions.

In javascript, however, the two have different meanings. In JS, replace means to replace the first string that occurs, while replaceAll literally means to replace all strings.

const string="flydean is a good fly"
console.log(string.replace("fly", "butterfly"));

Copy the code

The above value returns:

butterflydean is a good fly

Copy the code

If you use replaceAll:

const string="flydean is a good fly"
console.log(string.replaceAll("fly", "butterfly"));
butterflydean is a good butterfly

Copy the code

Private methods

Since JS has the concept of a class, it is possible to define methods in a class and call them from the instantiated class, as follows:

Class Student {getAge() {console.log(" always 18 ")}} Student = new Student(); student.getAge();Copy the code

The above code results:

"Always 18."Copy the code

But if we don’t want the getAge() method to be directly exposed to external use, that is, if we want getAge() to be a private method, we just need to prefix the method with #.

Class Student {#getAge() {console.log(" always 18 ")}} Student = new Student(); student.getAge();Copy the code

Run the same command, you will get the following error message:

Error: student.getAge is not a function
Copy the code

How do you deal with that? We know that private methods can be called from within a method, so just create a public method and call the private method within the public method, as follows:

Class Student {#getAge() {console.log(" always 18 ")} getPublicAge(){this.#getAge(); } } student= new Student(); student.getPublicAge();Copy the code

We can get the same result.

Private property

So we talked about private methods, but what about private properties?

In general, attributes can be modified with the GET modifier, which can then be accessed directly by the attribute name:

class Student {
  get Age() {
    return 18;
  }
 
}

student= new Student();
console.log(student.Age);

Copy the code

So we’re going to get 18 as a result.

Similarly, you can make an attribute private by preceded by a #, as follows:

class Student {
  get #Age() {
    return 18;
  }
 
}

student= new Student();
console.log(student.Age);

Copy the code

The above code will print undefined.

To access the above private property, call the private property method with the public property:

class Student {
  get #Age() {
    return 18;
  }
   get publicAge() {
    return this.#Age
  }
}

student= new Student();
console.log(student.publicAge);
Copy the code

Very useful.

Promise. Any () and AggregateError

Promise. Any can return the result of any early resolve. This situation is very common in real applications.

const prom1 = new Promise((resolve, reject) => { setTimeout( () => resolve("promise one"), Math.floor(Math.random() * 100) ); }); const prom2 = new Promise((resolve, reject) => { setTimeout( () => resolve("promise two"), Math.floor(Math.random() * 100) ); }); const prom3 = new Promise((resolve, reject) => { setTimeout( () => resolve("promise three"), Math.floor(Math.random() * 100) ); }); (async function() { const result = await Promise.any([prom1, prom2, prom3]); console.log(result); }) ();Copy the code

The above code randomly prints Promise one, Promise two, and Promise three.

If you change the above code to reject everything, AggregateError will be thrown:

const prom1 = new Promise((resolve, reject) => { setTimeout( () => reject("promise one rejected"), Math.floor(Math.random() * 100) ); }); const prom2 = new Promise((resolve, reject) => { setTimeout( () => reject("promise two rejected"), Math.floor(Math.random() * 100) ); }); const prom3 = new Promise((resolve, reject) => { setTimeout( () => reject("promise three rejected"), Math.floor(Math.random() * 100) ); }); try{ (async function() { const result = await Promise.any([prom1, prom2, prom3]); console.log(result); }) (); } catch(error) { console.log(error.errors); }Copy the code

The errors reported are as follows:

Uncaught (in promise) AggregateError: No Promise in Promise.any was resolved

Copy the code

Note that all promises must be rejected before AggregateError is thrown, and if any are partially successful, success will be returned.

Numeric separator

This new feature is designed to make it easier for programmers to look at code, but it may not be obvious if the numbers are large, such as the following long numbers:

Const number = 123456789;Copy the code

It’s hard to see how big this number is, so ES12 provides the number separator _.

Separators can be used to split binary or hexadecimal data, as well as decimal.

const number = 1_000_000_000_000;
const binary = 0b1010_0101_1111_1101;
const hex = 0xAF_BF_C3;

Copy the code

The above example represents decimal, binary and hexadecimal data respectively, which is very intuitive and easy to use.

New logical operator

We know that && and | | is for logical operation of the operator.

Such as:

1 && 2 
1 || 2 

Copy the code

Operations, such as ES12 provides && and | | binary operators, are as follows:

var x = 1;
var y = 2;
x &&= y;
x ||= y;

Copy the code

It also provides?? Binary operators such as:

var x; var y = 2; x ?? = y;Copy the code

The code above says, check if x is empty, if it is empty then assign the value of y to x.

conclusion

ES12 has several new features that are useful for you to try.

This article has been included in www.flydean.com/ecmascript-…

The most popular interpretation, the most profound dry goods, the most concise tutorial, many tips you didn’t know waiting for you to discover!

Welcome to pay attention to my public number: “procedures those things”, understand technology, more understand you!