This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

This translation: levelup.gitconnected.com/top-5-javas…

What is called “small volume not deficient”? Meaning is to learn knowledge points, a little volume, also won’t be very tired, also won’t be killed by others, just a little volume, never lose, even a small profit wave, alas, very comfortable ~~

ES12 was released on June 22 this year. Have you used it yet?

In 4 minutes, I’ll give you a quick look at the 5 key points of ES12.

1. Number separator

Number separators are underscores added between numbers to make them more readable; When the code is parsed, the underline is automatically removed;

For chestnut 🌰

// Decimal number divided by thousands let n1 = 1_000_000_000; console.log(n1); // This will print: 1000000000 // Decimal number, divided by thousands, with decimal point let n2 = 1_000_000_000.150_200 console.log(n2); // This will print: 1000000000.1502 // Hexadecimal numbers grouped by bytes let n3 = 0x95_65_98_FA_A9 console.log(n3); // This will print: 641654651561 // This will print: 641654651561 // Let n4 = 155_326_458_156_248_168_514n console.log(n4); // This will print: 155326458156248168514nCopy the code

2. replaceAll

Repalce (/a/g,”a1″) replaces all with replaceAll()

For chestnut 🌰

// Declare a string const orgStr = 'JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm.'; // replace the first selected element with replace let newStr = orgstr.replace ('JavaScript', 'TypeScript'); console.log(newStr); // replaceAll selected elements with replaceAll let newStr2 = orgstr.replaceall ('JavaScript', 'TypeScript'); console.log(newStr2);Copy the code

3. Promise.any()

Promise.any() and promise.all () converse:

The former is the array of promises executed, and any Promise resolve (or all reject) goes into.then;

The latter is all Promise resolve (or a reject) that goes into.then.

Lift chestnut 🌰 : Either Promise resolve will return

// create promise1 const promise1 = new Promise((resolve, Resolve setTimeout(() => resolve("The first promise has been resolved."), 2000); }); // create promise2 const promise2 = new Promise((resolve, Resolve setTimeout(() => resolve("The second promise has been resolved."), 1000); }); // create promise3 const promise3 = new Promise((resolve, Resolve setTimeout(() => resolve("The third promise has been resolved."), 3000); }); (async function () { const data = await Promise.any([promise1, promise2, promise3]); // The first resolve is returned immediately to data console.log(data); })();Copy the code

Lift chestnut 🌰 : All Promise reject

// create promise1 const promise1 = new Promise((resolve, reject) => { // After 1 second reject the first promise. setTimeout(() => reject("The first promise has been rejected."), 1000); }); // create promise2 const promise2 = new Promise((resolve, reject) => { // After 500 miliseconds reject the second promise. setTimeout(() => reject("The second promise has been rejected."), 500); }); Async function () {try {const data = await promise. any([promise1, promise2]); console.log(data); } catch (error) {// All Promise reject; console.log("Error: ", error); Error: AggregateError: All promises were rejected}})();Copy the code

4. Three logical assignments

ES12 introduces three new logical assignment operators:

  • | | =Logic or assignment, equivalent to:a || (a = b)
  • && =Logic and assignment are equivalent to:a && (a = b)
  • ?? =Logical merge assignment, equivalent to:a ?? (a = b)

For chestnut 🌰 : | | =

/ / when | | = on the left side of the value is false, then change the value after the assignment for the equal sign let myPlaylist = {songsCount: 0, songs: []}. myPlaylist.songsCount ||= 100; console.log(myPlaylist); // This will print: {songsCount: 100, songs: Array(0)}Copy the code

Ju Li 🌰 : &&=

Let myFiles = {filesCount: 100, files:[]}; let myFiles = {filesCount: 100, files:[]}; myFiles.filesCount &&= 5; console.log(myFiles); // This will print: {filesCount: 5, files: Array(0)}Copy the code

Ju Li 🌰 :?? =

/ / when?? Let userDetails = {firstName: 'Katina', age: 24} userdetails.lastname?? = 'Dawson'; console.log(userDetails); // This will print: {firstname: 'Katina', age: 24, lastname: 'Dawson'}Copy the code

5. Private class methods/attributes

Class By default, Class methods and properties are public. In ES12, you can create private methods and properties with # plus a prefix.

Class User {constructor() {constructor() {return {generateAPIKey() {return "d8cf946093107898cb64963ab34be6b7e22662179a8ea48ca5603f8216748767"; } getAPIKey() {// Call private method return this.#generateAPIKey(); } } const user = new User(); const userAPIKey = user.getAPIKey(); console.log(userAPIKey); // This will print: d8cf946093107898cb64963ab34be6b7e22662179a8ea48ca5603f8216748767Copy the code

You can also set private getters and setters inside a class;

Class Str {// set the private attribute #uniqueStr; The constructor () {} / / private Setter set # generateUniqueStringByCustomLength (length = 24) {const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let randomStr = ""; for (let i = 0; i < length; i++) { const randomNum = Math.floor(Math.random() * characters.length); randomStr += characters[randomNum]; } this.#uniqueStr = randomStr; } / / public Setter set setRandomString (length) {this. # generateUniqueStringByCustomLength = length; } private Getter get #fetchUniqueString() {return this. } public Getter get getRandomString() {return this.#fetchUniqueString; } } const str = new Str(); // Call the public Setter, and then access the private Setter str.setrandOMString = 20; // Call the public Getter, and then access the private Getter const uniqueStr = str.getrandOmString; console.log(uniqueStr); // Every time the Getter is executed after the Setter, a random string is printedCopy the code

OK, that’s the end of this share, have a good weekend O(∩_∩)O, MY name is Anthony gold digger, the public account of the same name, a day to dig a dead, a day to dig a gold, goodbye ~~