Summary of ES10 and ES11 common knowledge points

“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Hello everyone, I am L. This time I have summarized the common knowledge points of ES10 and ES11.

ES10

Flat and flatMap

flat

The flat method flattens the array. It returns a new array, flat(1), and subtracts the array depth by one.

const nums = [10.20[2.9], [[8.10], [67.29]], 56]
const newNums = nums.flat()
console.log(newNums); // [10, 20, 2, 9, [8, 10], [67, 29], 56]
Copy the code

We can pass in the number n and subtract the depth of the array by n.

const newNums2 = nums.flat(2)
console.log(newNums2); // [10, 20, 2, 9, 8, 10, 67, 29, 56]
Copy the code

flatMap

The flatMap() method first maps each element using a mapping function and then compresses the result into a new array.

const nums2 = [10.20.30]
const newNums3 = nums2.flatMap(item= > {
  return item * 2
})

const newNums4 = nums2.map(item= > {
  return item * 2
})

console.log(newNums3); // [20, 40, 60]
console.log(newNums4); // [20, 40, 60]
Copy the code

Object.fromEntries

In ES8, we can convert an Object to entries through Object.entries. This method I summarized in this article 👉ES7 and ES8 common knowledge points summary

const obj = {
  name: 'haha'.age: 18
}

const  entries = Object.entries(obj)
console.log(entries); // [ [ 'name', 'haha' ], [ 'age', 18 ] ]
Copy the code

So we have an entry, how do we convert it to an object 🤔?

One way is to iterate over the array 👇.

const newObj = {}
for(const entry of entries) {
  newObj[entry[0]] = entry[1]}console.log(newObj); // { name: 'haha', age: 18 }
Copy the code

In FACT, ES10 provides the Object.fromEntries method, which can easily convert entries into objects without traversing them.

const newObj = Object.fromEntries(entries)
console.log(newObj); // { name: 'haha', age: 18 }
Copy the code

Application scenarios

Now that we know how Object. FromEntries works, how can it be applied?

Sometimes we parse the QUERY string of the URL, and we can create an object with new URLSearchParams(queryString).

const queryString = 'name = haha&age = 18 & height = 1.8'
const queryParams = new URLSearchParams(queryString)
console.log(queryParams); / / URLSearchParams {' name '= >' haha ', 'age' = > '18', 'height' = > '1.8'}
Copy the code

The resulting queryParams object is traversable.

for(const param of queryParams) {
  console.log(param);
}
Copy the code

We can think of this Object as entries and pass it as a parameter to Object.fromEntries to get an Object.

const paramObj = Object.fromEntries(queryParams)
console.log(paramObj); // {name: 'haha', age: '18', height: '1.8'}
Copy the code

TrimStart and trimEnd

If a string has a lot of Spaces at the beginning and end, how do we remove them? You can remove the leading and trailing whitespace using the trim method.

What if you want to remove the space at the head or tail? ES10 gives us the trimStart and trimEnd methods.

const message = ' hello world '
console.log(message.trim());
console.log(message.trimStart());
console.log(message.trimEnd());
Copy the code

ES11

bigInt

Before, we couldn’t properly represent large numbers. MAX_SAFE_INTEGER can be used to obtain the maximum security Number.

const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt); / / 9007199254740991
Copy the code

So what happens if you get a number larger than the maximum safe number?

We can see that javascript cannot guarantee that numbers greater than the maximum safe number are accurate.

console.log(maxInt + 1); / / 9007199254740992
console.log(maxInt + 2); / / 9007199254740992
Copy the code

In ES11, a new data type, bigInt, was introduced to represent large integers followed by n.

const bigInt = 900719925474099700n
Copy the code

If we want to add a large value to a small value, we need to convert the small value to bigInt.

const bigInt = 900719925474099700n
console.log(bigInt + 10);
Copy the code

TypeError: Cannot mix BigInt and other types, use explicit conversions TypeError: Cannot mix BigInt and other types, use explicit conversions TypeError: Cannot mix BigInt and other types, use explicit conversions

We can add n to the small numbers, convert them to bigInt, and then add them up. We can see that the result is correct.

const bigInt = 900719925474099700n
console.log(bigInt + 10n); // 900719925474099710n
Copy the code

If we have a value of type Number, we can use BigInt to convert it to BigInt.

const num = 100
console.log(bigInt + BigInt(num)); // 900719925474099800n
Copy the code

Similarly, we can convert a bigInt to a Number, but there is no guarantee that the resulting Number will be safe because the maximum safe Number may be exceeded.

const smallNum = Number(bigInt)
console.log(smallNum); / / 900719925474099700
Copy the code

Null-value operator

If a variable value is undefined or null, we hope to give a default value, so we can use logic or | |.

const foo = undefined
const bar = foo || 'default value'
console.log(bar); // default value
Copy the code

Use logic or | | there is a weakness, if we want to get the result is an empty string, or zero, then the result will still return to the default value.

const foo = ' '
const bar = foo || 'default value'
console.log(bar); // default value
Copy the code

To solve this problem, we can use ES11’s new null operator?? .

When foo is undefined or null, use the null operator?? The default value is returned.

const foo = undefined
const bar = foo ?? 'default value'
console.log(bar); // default value
Copy the code

When foo is an empty string, use the null operator?? The result is still an empty string.

const foo = ' '
const bar = foo ?? 'default value'
console.log(bar); 
Copy the code

Optional chain? .

When we want to get the value of an attribute in an object, we can pass. But sometimes we can’t tell if the desired attribute exists, and using this method will cause errors.

const info = {
  name: 'haha'./* friend: { bestFriend: { name: 'haha' } } */
}

console.log(info.friend.bestFriend.name); // TypeError: Cannot read property 'bestFriend' of undefined
Copy the code

We can use if to determine whether the property exists.

if(info && info.friend && info.friend.bestFriend) {
  console.log(info.friend.bestFriend.name);
}
Copy the code

Such judgments are complex and poorly readable and maintainable.

In ES11, optional chains have been added. .Can solve the problem.

console.log(info.friend?.bestFriend?.name); // haha
Copy the code

globalThis

When we get global objects from javaScript environments, different environments get them differently.

In the browser we get the global object either through window or this.

In the Node environment we get global objects through global.

// In the browser
console.log(window);
console.log(this);
Copy the code

// In the Node environment
console.log(global);
Copy the code

Using the above method, we also need to determine which environment we are in when we want to get the global object.

In ES11, globalThis was added to standardize fetching global objects.

console.log(globalThis);
Copy the code

In the browser environment

In the Node environment

Promise.allSettled

The relevant knowledge is in this article. The Promise class method

Previous articles 👇👇👇

Summary of ES7 and ES8 common knowledge points

Summary of ES6 Common Knowledge Points (3)

Summary of ES6 Common Knowledge Points (2)

Summary of ES6 Common Knowledge Points (1)

The 2021 year-end summary of an entry-level front-end programming debugger