ECMAScript 2021 是 JavaScript 的最新版本，它包含了一些非常有用的新功能和改进。本文将介绍其中一些最重要的新功能，并提供详细的示例代码和指导意义，以帮助前端开发人员更好地理解和使用这些新功能。
1. String.prototype.replaceAll()
在以前的 JavaScript 版本中，如果要将一个字符串中的所有匹配项替换为另一个字符串，我们需要使用正则表达式和 replace() 方法。但是，这种方法不够直观，而且容易出错。在 ECMAScript 2021 中，新增了一个更直观的方法：replaceAll()。
replaceAll() 方法接受两个参数：要替换的字符串和替换成的字符串。它会在原始字符串中查找所有匹配项，并将它们替换为指定的字符串。下面是一个示例：
const str = 'hello world hello';
const newStr = str.replaceAll('hello', 'hi');
console.log(newStr); // 输出：'hi world hi'在上面的示例中，我们使用 replaceAll() 方法将字符串中所有的 "hello" 替换为 "hi"。
这个新的方法非常方便，因为它让我们能够更容易地替换字符串中的所有匹配项，而不需要使用复杂的正则表达式。
2. Promise.any()
在以前的 JavaScript 版本中，Promise.all() 方法可以让我们同时执行多个 Promise，并在所有 Promise 都成功时返回一个成功的结果。但是，如果其中一个 Promise 失败了，那么整个 Promise.all() 就会失败。在 ECMAScript 2021 中，新增了一个新的方法：Promise.any()。
Promise.any() 方法接受一个 Promise 数组作为参数，并返回其中第一个成功的 Promise 的结果。如果所有的 Promise 都失败了，那么将返回一个 AggregateError，其中包含所有 Promise 的错误信息。下面是一个示例：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------- - ---------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - ------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - ------------
-- ------
---
---------------------- --------- ----------
------------ -- -
--------------------
--
------------ -- -
-------------------
---在上面的示例中，我们创建了三个 Promise。第一个 Promise 在 1 秒后失败，第二个 Promise 在 2 秒后成功，第三个 Promise 在 3 秒后成功。我们将这三个 Promise 传递给 Promise.any() 方法，并在控制台中输出第一个成功的 Promise 的结果。由于第二个 Promise 在 2 秒后成功，因此输出为 "Promise 2 succeeded"。
这个新的方法非常有用，因为它允许我们同时执行多个 Promise，并在其中任何一个成功时返回结果。这对于需要同时处理多个异步操作的情况非常有用。
3. Logical Assignment Operators
在 ECMAScript 2021 中，新增了三个逻辑赋值运算符：||=、&&= 和 ??=。这些运算符可以让我们更方便地对变量进行赋值，并且可以减少一些重复的代码。
3.1 ||=
||= 运算符可以让我们更方便地将变量赋值为一个默认值。如果变量的值为 falsy（如 undefined、null、false、0、NaN 或空字符串），那么||= 运算符就会将变量赋值为指定的默认值。下面是一个示例：
let x; x ||= 10; // 等价于 x = x || 10; console.log(x); // 输出：10 let y = 20; y ||= 10; console.log(y); // 输出：20
在上面的示例中，我们使用 ||= 运算符将变量 x 的值赋为了 10。由于 x 的初始值为 undefined，因此||= 运算符将 x 的值赋为了 10。而对于变量 y，它的初始值为 20，因此||= 运算符没有对它进行任何修改。
3.2 &&=
&&= 运算符可以让我们更方便地对变量进行条件赋值。如果变量的值为 truthy（即不是 undefined、null、false、0、NaN 或空字符串），那么&&= 运算符就会将变量赋值为指定的值。下面是一个示例：
let x = 10; x &&= 20; // 等价于 x = x && 20; console.log(x); // 输出：20 let y = 0; y &&= 30; console.log(y); // 输出：0
在上面的示例中，我们使用 &&= 运算符将变量 x 的值赋为了 20。由于 x 的初始值为 10，因此 x &&= 20 这个表达式的结果为 20。而对于变量 y，它的初始值为 0，因此 y &&= 30 这个表达式的结果为 0。
3.3 ??=
??= 运算符可以让我们更方便地将变量赋值为一个默认值，但是它只会在变量的值为 null 或 undefined 时才会生效。下面是一个示例：
let x = null; x ??= 10; // 等价于 x = x ?? 10; console.log(x); // 输出：10 let y = 20; y ??= 30; console.log(y); // 输出：20
在上面的示例中，我们使用 ??= 运算符将变量 x 的值赋为了 10。由于 x 的初始值为 null，因此??= 运算符将 x 的值赋为了 10。而对于变量 y，它的初始值为 20，因此??= 运算符没有对它进行任何修改。
这些逻辑赋值运算符非常有用，因为它们可以让我们更方便地对变量进行赋值，并且可以减少一些重复的代码。
总结
ECMAScript 2021 中新增的这些功能和改进都非常实用，它们可以让我们更方便地编写 JavaScript 代码，并且可以提高我们的开发效率。无论是新手还是经验丰富的开发人员，都应该学习和掌握这些新功能，以便更好地应对日常的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66057f34d10417a22234faec