The 11th release of the ECMAScript language specification (ES2020). Let’s see how to use them.

String.prototype.matchAll

As we know, the original String prototype already provides the match method, as in:

const str = 'hello1hello2hello3'
const reg = /hello(\d+)/
const match = str.match(reg) // ["hello1", "1", index: 0, input: "hello1hello2hello3", groups: undefined]
Copy the code

At this point we find that he can only get one set of matches when we try to add global G to the re.

const matches = str.match(reg) // ["hello1", "hello2", "hello3"]
Copy the code

You can only get a string[] that has only the full matching result, which is missing in the non-global case.

And matchAll gave me what I wanted:

const matchIterator = str.matchAll(reg) // RegExpStringIterator 
Copy the code

We find that the result returned is an Iterator that can be iterated using for of.

for (const match of matchIterator) { console.log(match); ["hello1", "1", index: 0, input: "hello1hello2hello3", groups: undefined]}Copy the code

If you want an array, you can use… Operator or array.from () conversion.

const matches1 = [...str.matchAll(reg)]
const matches2 = Array.from(str.matchAll(reg))
Copy the code

BigInt

MIN_SAFE_INTEGER to number.max_safe_INTEGER. The Number type can only safely represent the values between -(2^53-1) and 2^53-1, that is, the Number.MIN_SAFE_INTEGER to Number.

To solve this problem, the BigInt type was introduced:

const bigIntNum1 = 9007199254740991n
const bigIntNum2 = BigInt(9007199254740991)
Copy the code

BigInt is a primitive data type like Number:

typeof 1 // number
typeof 1n // bigint
Copy the code

Dynamic imports are loaded on demand

The ES2020 proposal introduces the import() function to dynamically load modules:

import('./foo.js') 
Copy the code

Import () returns a Promise object, and we can get the corresponding export content in then.

// foo.js export a = 1 export b = 2 // home.js import(`./foo.js`) .then(({a, B})=> // load successful callback}). Catch (err => {// load failed callback})Copy the code

The addition of import() solves the previous problem of static parsing in ESM, which can only be added at the top level.

Promise.allSettled

Promise.allsettled provides another way to handle asynchronous tasks concurrently.

Compare that to our usual promise.all:

  • allSettledWait for all resolve or reject tasks to change status;allAll tasks change status after resolve.
  • allSettledWhatever the asynchronous task isfulfilledorrejected, the final state is onlyfulfilled;allOnce a mission becomesrejectedThe state of itself will becomerejected.
  • allSettledIt gives us more freedom to handle the results of all the concurrent tasks.
const resolved = Promise.resolve(true);
const rejected = Promise.reject('custom error');

Promise.allSettled([resolved, rejected]).then(results => {
  console.log(results)
})

// [
//    { status: 'fulfilled', value: true },
//    { status: 'rejected', reason: 'custom error' }
// ]
Copy the code

As above: allSettled is not entered in a catch callback, the then callback returns the result of each asynchronous task.

globalThis

Previously, if you wanted to write code that supported both Node and Browser environments, getting global objects would be a bit tricky:

  • In the Browser environment, the global object is window, but Node and Web Worker have no window.
  • Self also points to the top-level object in Browser and Web Worker, but Node has no self.
  • In Node, the global object is global, but no other environment supports it.
  • And this, which is context sensitive and error-prone.

To get a global object, encapsulate a global function:

function getGlobal() { if (typeof self ! == 'undefined') { return self } if (typeof window ! == 'undefined') { return window } if (typeof global ! == 'undefined') {return global} throw new Error(' not found ')}Copy the code

Under the ES2020 standard, we can get global objects in any context and environment through globalThis.

Nullish COALescing Operator Indicates the null value merge Operator

Set the default value is the most common practice is to use | | :

Const VIP = the userInfo. VIP | | 'non-vip'Copy the code

However, in the JS hollow string, 0 and so on are treated as false when judging. The result of the above VIP 0 will become non-VIP. This is obviously incorrect. To meet our expectations, we need to write:

const vip = userInfo.vip == null ? 'Non-VIP' : userinfo.vipCopy the code

Using the null-value merge operator, however, gives us a succinct way of writing:

const vip = userInfo.vip ?? 'the VIP'Copy the code

Optional chaining Optional chain

Do you remember writing the following code to determine a multilevel object:

if (a && a.b && a.b.c && a.b.c.d) {
  // do more
}
Copy the code

It’s easy to get TypeError achievements if you don’t.

In the latest optional chain, you don’t have to, you can write:

if (a? .b? .c? .d) { // do more }Copy the code

In? The following fields, if any, return the corresponding value, does not return undefined:

const obj = { a: 1 } obj? .a // 1 obj? .b // undefined obj? .a? .b // undefinedCopy the code