随着前端开发不断发展，ECMAScript（简称ES）也在不断更新，其中ES2021（也被称为ES12）是最新的版本，引入了一些新的语法和代码改进。这些新特性对于前端开发者来说具有重要的意义，可以帮助提高代码质量和开发效率。
新的语法
逻辑赋值操作符
在ES2021中，我们可以使用逻辑赋值操作符来简化代码。
例如，我们想将一个变量赋值为一个给定的值，但只有在它未被赋值或者是false的情况下才能这样做：
-- -------------------- ---- -------
--- ------
------
-- -------- -
----- - -----
-
----------
----- --- -----逻辑赋值操作符 ||= 表示：如果左边的操作数是undefined或者null或者false，那么就会执行右边的操作数，并将其赋值给左边的变量。
这个操作符可以用来简化这类代码，使得代码更加简洁易读。
可选链操作符
在ES2021中，我们还可以使用可选链操作符来避免在对象属性不存在时出现undefined错误。
例如，我们想访问一个嵌套的对象属性，但有可能这个属性不存在：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
----- -----------
------- -------- ----
-
--
------
----- ---- - ---- -- ------------ -- ------------------
----------
----- ---- - --------------------可选链操作符 ?. 表示：如果左边的操作数是null或者undefined，那么就直接返回undefined，否则继续执行右边的操作。
使用可选链操作符可以省去大量的判空代码，同时提高代码的可读性和可维护性。
代码改进
Promise.allSettled()
在ES2021中，我们可以使用 Promise.allSettled() 方法来处理多个Promise并行执行的情况。
例如，我们现在有多个Promise需要同时执行，我们可以这样写代码：
-- -------------------- ---- -------
----- -------- - -
------------------------ ----
--------------------- ----
------------------------ ----
--------------------- ----
--
----------------------------
------------- -- -
---------------------- -- -
-------------------------- --------------
---
---Promise.allSettled() 方法返回一个Promise，它会等到所有的Promise都执行完毕后才会执行回调函数，在回调函数中我们可以得到每个Promise的执行结果，包括成功和失败的情况。
String.prototype.replaceAll()
在ES2021中，我们还可以使用 String.prototype.replaceAll() 方法来替换字符串中的所有匹配项。
例如，我们想将字符串中的所有空格替换成'-'，我们可以这样写代码：
const str = 'hello world';
//传统做法
const newStr = str.split(' ').join('-');
//ES2021做法
const newStr = str.replaceAll(' ', '-');String.prototype.replaceAll() 方法接受两个参数，第一个参数是要替换的字符串或正则表达式，第二个参数是要替换成的字符串。
使用 String.prototype.replaceAll() 方法可以让我们更方便地进行字符串替换操作。
总结
ES2021引入了一些新的语法和代码改进，这些特性可以帮助我们更方便地编写高质量的代码和提高开发效率。其中逻辑赋值操作符、可选链操作符、Promise.allSettled()方法和String.prototype.replaceAll()方法都是非常实用的新特性，特别是在处理复杂的业务逻辑时更加方便和优雅。
以上就是关于ES2021的介绍和示例代码，希望对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647632ed968c7c53b0311f57