Do you know the new features of JavaScript ES2021?

ECMAScript 2021 introduces some interesting and powerful features that will be familiar to you if you use other languages.

1.Replace All

replaceAll() can replace all characters specified in a string without using regular expressions. It has two parameters: the initial string and the string to be replaced.

The case is as follows:

let str = ‘JavaScript’;
console.log(myStr.replaceAll(“a”, “v”)); //output: JvvvScript
复制代码

2.Numeric Separators

Number separators are one of the useful features introduced in ES2021. They make it easier to read large numbers in JavaScript by using the underscore _ to provide separation between numbers.

The case is as follows:

let num = 1_000_000;
console.log(num); //output: 1000000
复制代码

Made long numbers more legible.

3.Promise Any

Promise.any() takes an array of Promises as arguments. If all Promises are resolved, return the first resolved Promise.any() . Returns an error if all Promises are rejected.

The case is as follows:

const promise1 = new Promise((resolve, reject) => {
 resolve(‘promise1 was resolved.’);
});
const promise2 = new Promise((resolve, reject) => {
 resolve(‘promise2 was resolved.’);
});
const promise3 = new Promise((resolve, reject) => {
 resolve(‘promise3 was resolved.’);
});

let result = Promise.any([promise1, promise2, promise3]);
console.log(result); //output: promise1 was resolved.
复制代码

In the above case Promise.any() returns promise1 because it is the first to be resolved. If all Promises are rejected, an AggregateError is returned with the reason for the rejection.

4.Weak Reference

WeakRef() is used to hold a weak reference to another object, which means it does not prevent the garbage collector from collecting the object. It is useful when we don't want to keep the object in memory forever.

Create a new WeakRef, pass an object as the argument to WeakRef(), then call deref() on the weak reference to read the reference.

The case is as follows:

const object = new WeakRef({
name: ‘John’,
age: 25
});

//取object
console.log(object.deref()); //output: {name: “John”, age: 25}

//取name.
console.log(object.deref().name); //output: John
复制代码

5.Logical Assignment Operators

ES2021 introduces three useful logical assignment operators: &&= , ||= , and ??= .

The logical assignment operator &&= is used between two values. If the first value is true, the second value will be assigned to it.

The case is as follows:

let firstNumber = 5;
let secondNumber = 20;

firstNumber &&= secondNumber; //output: 20

console.log(firstNumber); //output: 20 

//上述代码等价于
if(firstNumber){
 firstNumber = secondNumber;
} 
复制代码

The logical assignment operator ||= is also used between two values. If the first value is not true(false), assign the second value.

The case is as follows:

let firstNumber = null;
let secondNumber = 10;

firstNumber ||= secondNumber; //output: 10

console.log(firstNumber); //output: 10

//上述代码等价于
if(!firstNumber){
firstNumber = secondNumber;
}
复制代码

The logical assignment operator ??= checks if the first value is empty or undefined. If it is, assign the second value.

The case is as follows:

//当第一个值为 null 或为 undefined 时
let firstNumber = null;
let secondNumber = 10;

firstNumber ??= secondNumber; //output: 10

console.log(firstNumber); //output: 10 

//当第一个值为true时
firstNumber = 9;
firstNumber ??= secondNumber; //output: 9
console.log(firstNumber); //output: 9

//上述代码等价于
if(firstNumber == null || firstNumber == undefined){
 firstNumber = secondNumber;
} 
复制代码

这些运算符使赋值更容易，而无需使用条件语句。