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!