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

In this issue, the editor will bring you about the new functions of Javascript10 in ES2020. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Good news-the new ES2020 feature has been launched! This means that you should now have a complete understanding of the additions and improvements to Javascript in ES2020.

1 、 BigInt

The most anticipated new feature in BigInt,Javascript has finally landed. It allows developers to use larger integers for data processing in JS. Previously, the largest integer in Javascript was pow (2,53)-1. However, BigInt is not subject to this restriction.

However, as you can see above, you need to add an n after the number. This n indicates that this is a BigInt,Javascript engine that should be handled specially (whether it's V8 or other engines). Because the traditional digital system is IEEE754 (it does not support such large numbers), this improvement is not backward compatible.

2. Dynamic introduction

The dynamic introduction of Javascript allows you to dynamically introduce JS files into your application as a module. It's just like you use webpack and Babel. This feature can help you deal with demand-loaded code, split the code, and does not require webpack or other module processors. You can also load the code in the if-else block if you like. Introducing a module into the if-else block has the advantage of not polluting the global namespace.

3. Null value merging

Null merging can actually check the nullish value, not the falsely value. You might ask: what's the difference between nullish and falsely? There are many values in Javascript that are falsely. For example: empty string, the number 0, undefined, null, false, NaN and so on. However, in many cases you just want to check whether a variable is null-undefined or null, just as the variable can be an empty string or even a false value. In this example, you will see a new null merge operator:?

You can clearly see that the OR operator always returns a true value, but the null operator returns a non-null value.

4. Optional chain

The optional chain syntax allows you to access more deeply nested object properties without worrying about the existence of the properties. If it exists, it's good. Conversely, undefined is returned. It can manipulate not only object properties, but also function calls or arrays. This is more convenient! The following is a demonstration:

5 、 Promise.allSettled

The Promise.allSettled method receives a set of Promise and returns all the results-whether it's resolved or rejected. Previously, this was not possible, although there are similar implementations such as race and all. It just "runs all the promise-and doesn't care about their results".

6 、 String#matchAll

MatchAll is a new method on the String prototype chain that can associate regular expressions. It returns an iterator and returns all matching groups one by one. Let's look at a demonstration:

7 、 globalThis

If you have written JS code that can run on Node, browsers, or web-workers, you will spend a lot of time dealing with global objects. This is because the global objects vary from platform to platform, and self is found in window,Node and global,web workers in browsers. If there were more operating environments, this object would also be different. Therefore, you need to check the runtime environment to decide that the correct use is a global object. ES2020 brings us the globalThis object, which always references the global object, regardless of where the code runs:

8. Export the namespace of the module

The following syntax can always be used in the Javascript module:

Import * as utils from'. / utils.mjs'

However, until now, it is not possible to use the export syntax as follows:

Note: it is currently supported (2020-04-24)

Export * as utils from'. / utils.mjs'

The above results are the same as the following:

Import * as utils from'. / utils.mjs'export {utils} 9, clearly define the order of for-in

The order of for (x in y) is not explicitly defined in the ECMA specification. Although browsers have previously implemented a consistent order, they have now been incorporated into the official specification of ES2020.

10 、 import.meta

Import.meta is implemented by ECMAScript creation and defaults to null.

Consider this module, module.js:

You can access the module's meta information through the import.meta object:

Console.log (import.meta); / / {url: "file:///home/user/module.js"}

It returns an object that contains the url property, which represents the URL of the module. It could be the URL that gets the script (for external scripts), or the underlying URL that contains module documentation (for inline scripts).

I like the consistency and speed with which the Javascript community continues to grow. It's amazing to see how Javascript has evolved from a decade of boos to the most powerful, flexible and versatile language it is today.

These are the new functions of Javascript10 in ES2020 shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.