Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use the function of JavaScript ES2020". In the daily operation, I believe that many people have doubts about how to use the function of JavaScript ES2020. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to use the function of JavaScript ES2020"! Next, please follow the editor to study!

New features:

Dynamic import

Vacancy merge operator

Optional link operator

Private class variable Private

Promise.allSettled

For more information and all other content, please see the official ECMAScript language specification

Dynamic import

One of these is that we can import dependencies dynamically using async / await. This means that we don't have to import everything first, and we can import dependencies only when we need them. As a result, the performance of the application is improved by loading modules at run time.

How does it improve performance? Using the regular module system, we statically import the module at the beginning of the program. Whether we need them now or in the future, we must import them first. In addition, all code from the import module is evaluated at load time. Therefore, it slows down the application unnecessarily. Why? Because it downloads the imported module and evaluates the code for each module before executing the code.

Let's look at an example.

If (calculations) {const calculator = await import ('. / calculator.js'); const result = calculator.add (num1, num2); console.log (result);}

In the code snippet above, you can see that we import the calculator module only when we want to perform the calculation. Therefore, we will not unnecessarily slow down the application by loading all the code before the runtime. Therefore, dynamic import is a convenient supplement.

Vacancy merge operator

"the null merge operator is a logical operator that returns its right Operand when its left Operand is null or undefined, otherwise it returns its left Operand."

Basically, the Nullish merge operator allows us to check whether the value is null or undefined, and in that case provide a fallback value. Let's look at an example:

Let score = 0 setlet pass = score? 60 console.log (pass)

In the above snippet, the value is pass0. The reason is? Operator does not force zero to a forged value. The variable pass gets only 60 assigned if the variable score is undefined or null.

But what's the difference between two pipes "| |"? And this operator? When a dual pipe "| |" is used, it always returns a real value, which can lead to some unexpected results. When using the null merge operator, we can be more stringent, so the default value is allowed only if the value is null or undefined.

For example, suppose we have the following code:

Let score = 0 setlet pass = score | | 60 console.log (pass)

In the above example, a value of 0 is considered a false value when used. |. In the code snippet above, the value pass is 60, which is not what we want. Therefore, the double question mark allows us to check whether the variable is empty, which means that the variable is undefined or empty.

Promise.allSettled

Using the optional linking operator, we can access deeply nested properties from the object. If the property exists, the operator returns its value. If the property does not exist, the operator returns undefined.

Const person = {name: "Catalin Pit", employer: {name: "Catalins Tech",}}; console.log (person?.employer?.name)

The above code snippet illustrates an example of accessing deeply nested object properties. However, we can use it on arrays and function calls. In the following code snippet, you can see that we check whether the array exists and, if so, access the third value. In addition, you can check to see if a function exists in API and, if so, call it.

Const allowedValues = [1,5,10,13,90,111]; console.log (allowedValues?. [2]); / / functional callconst response = myAPI.getData?. ()

In short, the optional linking operator is very convenient, and it also helps us to make our code more readable and short.

Private class variable

From now on, we can also create private variables in classes in JavaScript. All you need to do to make a private variable is to add a hash symbol to the variable. For example, # firstName is a private variable that cannot be accessed outside the class.

Trying to call this variable outside the class results in SyntaxError.

Class Person {# firstName = "Catalin"; getFirstName () {console.log (this.#firstName)}} const person1 = new Person (); person1.getFirstName () / "Catalin" / / Returns "undefined" console.log (person1.firstName); / / Returns "Uncaught SyntaxError: Private field'# firstName' must be declared in an enclosing class" console.log (person1.#firstName)

In the above code, you can see a private class variable at work. We received an error when we tried firstName to access variables outside the class. Therefore, it is convenient to add when we do not want to expose data outside the class.

At this point, the study on "how to use the functions of JavaScript ES2020" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.