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

This article will explain in detail how the new function of JavaScript in ES2020 is, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge 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. Let's take a look at what has changed.

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 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 module namespace

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:

Translator's note: 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).

So much for sharing the new functions of JavaScript in ES2020. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.