你需要知道的JavaScript ES2021特性 - JavaScript

2021年4月12日02:21:13 发表评论 808 次浏览

本文通过实际示例了解JavaScript ES2021特性。

介绍

JavaScript是一种比较流行的编程语言，尤其是在web开发中。多亏了ECMAScript版本，JavaScript每年都会发布很多有用的新特性。ECMAScript 2021推出了一些有趣而强大的功能，我们可以在JavaScript中使用这些功能。他们还没有被释放，但我们可以看一下。

在本文中，我们将发现一些在JavaScript中需要了解的有用的ES2021特性。让我们开始吧。

1. 数字分隔符

数字分隔符是ES2021中引入的有用特性之一。它们通过在数字之间使用下划线_来分隔，使得在JavaScript中更容易读懂大数字。

看看下面的例子:

let myNumber = 1_000_000;
console.log(myNumber); //output: 1000000
let num = 0.000_0002;
console.log(num); //output: 2e-7

这使得在编辑代码时阅读大数字变得更加容易。

2. replaceAll

replaceAll()方法是我非常喜欢ES2021的特性之一。此方法允许你替换字符串中指定的所有字符，而不使用regex。

方法replaceAll()接受两个参数:我们想要替换的字符和我们想要替换它的字符。

下面的例子将帮助你更好地理解它:

let myStr = ‘Prograssing’;
console.log(myStr.replaceAll(“s”, “m”)); //output: Programming

如你所见，我们使用replaceAll()将所有s字符替换为m字符。这允许你轻松地替换字符串上的内容，在这种情况下你不需要再使用regex。

3. 弱引用

ES2021的另一个很酷的特性是WeakRef()。它用于保存对另一个对象的弱引用，这意味着它不会阻止垃圾收集器收集对象。当我们不想将对象永远保存在内存中时，它是非常有用的。

为了创建一个新的WeakRef，我们传递一个对象作为WeakRef()的参数，并在弱引用上调用deref()来读取引用。

看看下面的例子:

const myObject = new WeakRef({
name: ‘John’,
age: 25
});
//Read the object.
console.log(myObject.deref()); //output: {name: “John”, age: 25}
//Access name.
console.log(myObject.deref().name); //output: John

这只是一个简单的例子给你一个概念。我建议只在需要时使用弱引用。

4. Promise Any

Promise.any()接受数组作为参数。如果所有承诺都已解析，Promise.any()将返回第一个解析的承诺。如果所有承诺都被拒绝，你将得到一个错误。

下面是一个例子:

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.

如上所述，Promise.any()返回promise1，因为它是第一个被解析的promise。如果所有承诺都被拒绝，我们将得到一个AggregateError，其中包含拒绝的原因。

5. 逻辑赋值操作符

ES2021引入了三个有用的逻辑赋值操作符:&&=、||=和??=。

两个值之间使用逻辑赋值操作符&&=。如果第一个值为true，则将第二个值赋给它。

下面是一个例子:

let firstNumber = 5;
let secondNumber = 20;
firstNumber &&= secondNumber; //output: 20
console.log(firstNumber); //output: 20
//Here is an equivalent to it:
if(firstNumber){
 firstNumber = secondNumber;
}

逻辑赋值操作符||=也用于两个值之间。如果第一个值不为真(假)，第二个值将被赋给它。

下面是一个例子:

let firstNumber = null;
let secondNumber = 10;
firstNumber ||= secondNumber; //output: 10
console.log(firstNumber); //output: 10
//Here is an equivalent to it:
if(!firstNumber){
 firstNumber = secondNumber;
}

逻辑赋值操作符??=检查第一个值是null还是未定义。如果是，则将第二个值赋给它。

下面是一个例子:

//when first value is null or undefined
let firstNumber = null;
let secondNumber = 10;
firstNumber ??= secondNumber; //output: 10
console.log(firstNumber); //output: 10
//when first value is truthy
firstNumber = 9;
firstNumber ??= secondNumber; //output: 9
console.log(firstNumber); //output: 9
//Here is an equivalent to it:
if(firstNumber == null || firstNumber == undefined){
 firstNumber = secondNumber;
}

如你所见，这些操作符使得不使用条件语句就可以更容易地赋值。