JavaScript的新功能有哪些及怎么使用

本篇内容主要讲解“JavaScript的新功能有哪些及怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript的新功能有哪些及怎么使用”吧!

replaceAll()

首先，我们有一个新的字符串原型方法replaceAll，它替换子字符串的每个实例。虽然我们可以使用现有的 replace 方法来做到这一点，但我们不得不求助于正则表达式，例如：

"1990-01-01".replace(/-/g, "/");

replaceAll 可以说更具可读性：

"1990-01-01".replaceAll("-", "/");

使用replaceAll，不需要正则表达式。但是，只要提供了g标志，它仍然可以使用。

"1990-01-01".replaceAll(/-/g, "/");

支持

Chrome：85+

Firefox：77+ 

Safari：13.1+

Node：15.0.0+

Promise.any

今年已经看到了对异步代码处理的进一步改进Promise.any，它接受一组 Promise 并返回第一个解析的。如果每个 Promise 都被拒绝，则会引发错误。

让我们拿四个 Promise 看看会发生什么：

const p1 = new Promise(( resolve , reject ) => setTimeout(reject, 1000, "p1"));
const p2 = new Promise(( resolve , reject ) => setTimeout(resolve, 2000, "p2"));
const p3 = new Promise(( resolve , reject ) => setTimeout(reject, 3000, "p3"));
const p4 = new Promise(( resolve , reject ) => setTimeout(resolve, 4000, "p4"));

Promise.any将返回先解决的。在这种情况下，p2。我们可以使用以下代码进行测试：

async function getFirstResolvedPromise() { 
  const result = await Promise.any([p1, p2, p3, p4]); 
  console.log(result);
};

getFirstResolvedPromise(); // "p2"

现在我们可以使用四种方法来处理 Promise 数组：

• Promise.all — 返回已解决的 Promise 数组，一旦所有 Promise 都已解决

• Promise.allSettled （2020 年新增）— 一旦所有 Promise 都已解决或被拒绝，则返回一个 Promise 数组，无论它们是已解决还是已拒绝

• Promise.race — 返回第一个已解决或被拒绝的 Promise

• Promise.any — 返回第一个已解决的 Promise

支持

Chrome：85+ 

Firefox：79+

Safari：14+

Node：15.0.0+

逻辑赋值运算符

自 2020 年引入空合并运算符??以来，我们现在拥有三个逻辑运算符：

• && — 逻辑与

• || — 逻辑或

• ?? — 空合并运算符

这些简写允许我们根据一个值是真还是假——或者，在这种情况下——一个值是否为空（null或undefined）来简洁地解析表达式。

现在，我们有了更简洁的使用这些运算符赋值的简写：

• &&= — 分配一个变量，如果变量为真

• ||= — 分配一个变量，如果变量是假的

• ??= — 分配一个变量，如果该变量为空

在下面的代码中，每组三个语句是等效的：

// 逻辑与赋值
a &&= b; 
a = a && b; 
a = a ? b： a;

// 逻辑或赋值
a ||= b; 
a = a || b;
a = a ? a : b;

// 逻辑空赋值
a ??= b; 
a = a ?? b;
a = a === null || a === undefined?b : a;

在下面的示例中，a当每个表达式运行时，变量将被重新分配一个新值。这是代码：

let a = true；
const b = false, c = null, d = 10;

a &&= b; 
console.log(a); // false
a ||= c; 
console.log(a); // null

a ??= d; 
console.log(a); // 10

这些新的赋值操作符加入数学赋值运算符+=，-=，*=，/=，**=和%=，还有位运算符。

支持

Chrome：85+ 

Firefox：79+

Safari：14+

Node：15.0.0+

数字分隔符

最后，今年广泛采用了一项功能，该功能显着提高了处理大量数字或大量小数位的人员的可读性！

现在，我们可以使用下划线来分隔数字。

const a = 100000000;
const b = 100_000_000;
console.log(a === b); // true

虽然a和b相同，b但更容易识别为 1 亿。在实践中，数字分隔符主要用作千位分隔符，尽管这种用法没有强制执行。数字分隔符可用于浮点数和 BigInt 值（于 2020 年引入）。下面是一些代码来展示这些是如何工作的：

const float = 3.141_592_653_59;
const bigInt = 9_007_199_254_740_992n;

它们也支持十六进制、八进制和二进制数，例如十六进制0xFF_FF_FF或0x_00_00_00.

请注意，_不能在数字的开头或结尾（或首字母之后0）使用。此外，它不能与小数点相邻，并且不能连续使用多个下划线。

支持

Chrome：75+

Firefox ：70+

Safari：13+

Node：12.5.0+

到此，相信大家对“JavaScript的新功能有哪些及怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！