后端开发教程 - Java、Spring Boot 实战 - msg200.com
ECMAScript 2021 中的新功能（附代码示例）
介绍
ECMA 2021
祝您编码愉快！
在本教程中，我们将通过一些编码示例了解最新版本的 ECMAScript 2021 中可以使用的新功能
介绍
此 Ecma 标准定义了 ECMAScript 2022 语言。它是 ECMAScript 语言规范的第十二版。自 1997 年发布第一版以来，ECMAScript 已发展成为世界上使用最广泛的通用编程语言之一。它最出名的是嵌入在 Web 浏览器中的语言，但也被广泛用于服务器和嵌入式应用程序。简介
此 Ecma 标准定义了 ECMAScript 2022 语言。它是 ECMAScript 语言规范的第十二版。自 1997 年发布第一版以来，ECMAScript 已发展成为世界上使用最广泛的通用编程语言之一。它最出名的是嵌入在 Web 浏览器中的语言，但也被广泛用于服务器和嵌入式应用程序。
ECMA 2021
ECMAScript 2021 第 12 版引入了以下replaceAll功能：字符串的方法；Promise.any当输入值满足时短路的 Promise 组合器；AggregateError新的 Error 类型，可同时表示多个错误；逻辑赋值运算符（??=、&&=、||=）；WeakRef用于引用目标对象而不将其从垃圾收集中保留下来，以及FinalizationRegistry用于管理在目标对象被垃圾收集时执行的清理操作的注册和注销；数字文字的分隔符（1_000）；并且Array.prototype.sort已稳定。
全部替换
假设我们有一个名为字符串的常量
const string = "Javascript is the best web scripting language. Javascript can be used for both front end and backend";
我们想Javascript用Typescript
我们通常会使用的replace方法替换这个词
const string = "Javascript is the best web scripting language. Javascript can be used for both front end and backend";
console.log(string.replace("Javascript", "Typescript"));
Javascript如果我们想用替换所有实例，Typescript
该怎么办呢？这时 replaceAll 方法就派上用场了。
const string = "Javascript is the best web scripting language. Javascript can be used for both front end and backend";
console.log(string.replaceAll("Javascript", "Typescript"));
私有方法
让我们创建一个名为的类People，我们将有一些方法
class People {
showName() {
console.log("My name is Faithful")
}
showAge() {
console.log("Faithful is 20")
}
}
要访问类中的方法，我们首先需要实例化该类
class People {
showName() {
console.log("My name is Faithful")
}
showAge() {
console.log("Faithful is 20")
}
}
const people = new People()
people.showName()
people.showAge()
我们可以看到它My name is Faithful并Faithful is 20登录到控制台。
如果我们想将 showAge() 设为 People 类内部的私有方法，使其在类范围之外无法访问，我们只需在方法前面
添加符号即可，如下所示#showAge#showAge
class People {
showName() {
console.log("My name is Faithful")
}
#showAge() {
console.log("Faithful is 20")
}
}
const people = new People()
people.showName()
people.showAge()
我们可以在控制台上看到结果。错误提示“people.showAge这不是一个函数”。这是因为“它”#showAge()现在是 People 类内部的一个私有方法，只能通过 People 类内部的公共方法访问。
现在让我们尝试访问私有方法#showAge()
首先，我们在 People 类内部创建一个新的公共方法，showAll()我们可以从这个公共方法中访问私有方法。#showAge()由于我们的新方法是公共的，所以我们能够在控制台上打印年龄。请看下面的代码。
class People {
showName() {
console.log("My name is Faithful");
}
#showAge() {
console.log("Faithful is 20");
}
showAll() {
this.showName()
this.#showAge();
}
}
const people = new People();
people.showAll();
我们可以看到错误已经消失，现在我们可以通过公共方法访问我们的私有方法showAll()
私有访问器
私有访问器的工作方式与私有方法非常相似，让我们创建一个名为的类People，我们将有一些方法
class People {
get Name() {
return "Faithful"
}
get Age() {
return 20
}
}
let people = new People();
console.log(people.Age);
我们可以20在控制台上看到已登录。
如果我们想让 Age 在 People 类内部成为私有访问器，那么在类范围之外它是不可访问的，
我们只需在方法#前面添加符号，Age如下所示#Age
class People {
get Name() {
return "Faithful"
}
get #Age() {
return 20
}
}
let people = new People();
console.log(people.Age)
我们可以在控制台上看到结果为 undefined。
现在让我们尝试访问私有方法#Age()
首先，我们在 People 类内部创建一个新的公共方法，publicAge()我们可以从这个公共方法中访问私有方法。#Age()由于我们的新方法是公共的，所以我们能够在控制台上打印年龄。请看下面的代码。
class People {
get Name() {
return "Faithful"
}
get #Age() {
return 20
}
get publicAge() {
return this.#Age
}
}
let people = new People();
console.log(people.publicAge)
我们可以看到错误已经消失，现在我们可以通过公共访问器访问我们的私有访问器publicAge()
Promise.any()
Promise.any()与 正好相反Promise.all()。Promise.any() 会在任意一个提供的 promise 解析成功后解析，而不像promise.all()那样会等待所有 promise 解析成功后再解析。
来看下面的例子。
基本上，我们有 3 个 promise，它们会在随机时间解析。我们使用了setTimeout()函数来设置每个 promise 解析所需的时间，并使用 Math.floor(Math.random) 为 setTimeout 函数提供一个随机时间，因此我们实际上并不知道哪个 promise 会先解析。这正是现实世界中会发生的情况。
const prom1 = new Promise((resolve, reject) => {
setTimeout(
() => resolve("this is the first promise"),
Math.floor(Math.random() * 100)
);
});
const prom2 = new Promise((resolve, reject) => {
setTimeout(
() => resolve("this is the second promise"),
Math.floor(Math.random() * 100)
);
});
const prom3 = new Promise((resolve, reject) => {
setTimeout(
() => resolve("this is the third promise"),
Math.floor(Math.random() * 100)
);
});
(async function() {
const result = await Promise.any([prom1, prom2, prom3]);
console.log(result); // Prints "A", "B" or "C"
})();
从控制台的结果中，我们可以看到我们的第二个承诺首先得到解决。
等等！如果所有 Promise 都没有 resolve 怎么办？Promise.any() 会抛出 AggregateError 异常。我们会在 try catch 块中处理它。
请看下面的例子
const rejected = new Promise((resolve, reject) => {
setTimeout(
() => reject("this is the first promise"),
Math.floor(Math.random() * 100)
);
});
try {
(async function() {
const result = await Promise.any([rejected]);
console.log(result);
})();
} catch(error) {
console.log(error.errors);
}
数字分隔符
此功能使开发者能够通过在数字组之间创建视觉分隔，使其数字字面量更具可读性。大型数字字面量对于人眼来说难以快速解析，尤其是在包含较长重复数字的情况下。
1000000000 // Is this a billion? a hundred millions? Ten millions?
101475938.38 // what scale is this? what power of 10?
示例
常规数字文字
let budget = 1_000_000_000_000;
// What is the value of `budget`? It's 1 trillion!
//
// Let's confirm:
console.log(budget === 10 ** 12); // true
二进制文字
let nibbles = 0b1010_0001_1000_0101;
// Is bit 7 on? It sure is!
// 0b1010_0001_1000_0101
//
// We can double check:
console.log(!!(nibbles & (1 << 7))); // true
十六进制文字
// Messages are sent as 24 bit values, but should be
// treated as 3 distinct bytes:
let message = 0xA0_B0_C0;
// What's the value of the upper most byte? It's A0, or 160.
// We can confirm that:
let a = (message >> 16) & 0xFF;
console.log(a.toString(16), a); // a0, 160
// What's the value of the middle byte? It's B0, or 176.
// Let's just make sure...
let b = (message >> 8) & 0xFF;
console.log(b.toString(16), b); // b0, 176
// What's the value of the lower most byte? It's C0, or 192.
// Again, let's prove that:
let c = message & 0xFF;
console.log(c.toString(16), b); // c0, 192
让我们在控制台中查看结果
逻辑赋值运算符
逻辑赋值运算符&&
逻辑赋值运算符将逻辑运算（&&、|| 或 ??）与赋值结合起来。
var x = 1;
var y = 2;
x &&= y;
console.log(x); // 2
从技术上讲，实际情况如下
if(x) {
x = y
}
由于x是真值，因此它被赋予的值y，即2。
就像我们对 所做的那样&&，我们也可以使用||和??。
x &&= y;
x ||= y;
x ??= y;
逻辑赋值运算符||
var x = 1;
var y = 2;
x ||= y;
console.log(x);
x这意味着，只有当为假值时，赋值操作才会发生。在我们的代码中， xcontains1为真值，因此赋值不会发生。这就是为什么我们的代码会1在控制台中打印出来。
逻辑赋值运算符??
??是 JavaScript 中的空值合并运算符。它专门检查一个值是否为null或undefined。
var a;
var b = a ?? 5;
console.log(b);
a在第 2 行中，如果的值为null或undefined，则对 的右侧??进行求值并将其赋值给b。
现在让我们??一起考虑=。
var x;
var y = 2;
x ??= y;
console.log(x); //
x这里的值为undefined。因此对右侧表达式进行求值并将其设置x为2。