Hey, the new ES2020 features have been around for a while, but not everyone knows about them, so here are some cool features to try out!

1. BigInt

BigInt, one of the most anticipated features in JavaScript, has finally arrived. In effect, it allows developers to use larger integer representations for data processing and data processing in their JS code.

Currently, the maximum number of integers you can store in JavaScript ispow(2, 53) - 1. butBigIntIt actually allows you to do more.

However, as shown above, you need to append n to the end of the number. N indicates that this is a BigInt, and JavaScript engines (for V8 engines) should treat it differently.

This improvement is not backward compatible because the traditional number system is IEEE754(which cannot support numbers of this size).

2. Dynamic import

Dynamic imports in JavaScript give you the option of importing JS files as modules naturally and dynamically into your application. Just as you currently do with Webpack and Babel.

This feature will help you send code on demand (often referred to as code splitting) without the overhead of Webpack or other module bundlers. You can also conditionally load code in if-else blocks if you wish. The good news is that you actually imported a module, so it never contaminates the global namespace.

3. Null value merge

Null value merging adds the ability to actually check for null values and not false values. What is the difference between null and false values, you may ask?

In JavaScript, many values are false, such as “”, 0, undefined, null, false, NaN, etc.

However, you might want to check the number of times an infinite variable is empty, that is, whether it is undefined or null, just as a variable can have an empty string or even a false value.

In this case, you use the new null-value merge operator??

How you can clearly see | | operators always return true value, and null operators how to return a null value.

4. Optional link

The optional link syntax allows you to access deeply nested object properties without worrying about whether the property exists. If it exists, great! Otherwise, undefined is returned. This applies to object properties, as well as function calls and arrays. Super convenient! Like this example:

5. Promise.allSettled

The promise. allSettled method accepts an array of Promises and only resolves (resolved or rejected) when all Promises are settled.

Previously it was not available, even though logic like Race and all were available.

6. The matchAll String

MatchAll is a new method added to the String stereotype, related to regular expressions. This returns an iterator that returns all matched groups, one by one. Look at this example:

7. This global

If you write cross-platform JS code that runs on Node, in a browser environment, and inside a Web worker, it’s hard to master global objects.

This is because it is the browser window, the Node global window, and the Web worker itself. If there are more runtimes, the global object will be different.

Therefore, you will have to have your own implementation to detect the runtime and then use the correct global variables. So ES2020 brings globalThis, which always refers to global objects, no matter where you execute code:

8. Export the module namespace

In JavaScript modules, you can already use the following syntax:

import * as utils from './utils.mjs'
Copy the code

But so far, there is no corresponding export syntax:

export * as utils from './utils.mjs'
Copy the code

It is equivalent to:

import * as utils from './utils.mjs'
export { utils }
Copy the code

9. Better define the for-in order

The ECMA specification does not specify in which order for (x in y) should be run, although it has been formally standardized in ES2020, even though browsers have previously implemented a consistent order themselves.

10. import.meta

The import.meta object is created by the ECMAScript implementation with a null stereotype.

Imagine a module, module.js:

<script type="module" src="module.js"></script>
Copy the code

You can access meta information about a module using the import.meta object:

console.log(import.meta); // { url: "file:///home/user/module.js" }
Copy the code

It returns an object with a URL property indicating the base URL of the module. This will be the URL from which the script is retrieved (for external scripts) or the document base URL containing the document (for inline scripts).

My official account:Inside the front stack, sharing front-end knowledge, chewing up the feeling is wonderful ~