ES2020 是 JavaScript 的第十个版本，带来了很多新的特性和语言功能。本文将重点介绍 ES2020 中最有意义的几个特性，帮助前端工程师快速上手，并且提供一些实用的示例代码以便深入学习。
可选链 Optional Chaining
在旧版 JavaScript 中，我们通常为了安全性需要使用多个层级的繁琐判断语句，如判断对象是否为空或方法是否存在等。ES2020 可选链操作符 ?. 的出现，避免了很多不必要的麻烦。例如我们想获取 house 对象中的 bedroom中的 wardrobeColor，以前的代码可能是这样的：
--- ------------- - ---------- -- ------ -- ------------- -- ----------------------- - ------------- - ----------------------------- -
现在可以使用可选链简化代码：
--- ------------- - ------------------------------- -- ----------
如果访问对象的某个属性不存在，则返回undefined，否则返回属性值。?. 在多层级链式调用时非常方便，避免了前面类型检查的麻烦。
空值合并运算符 Nullish Coalescing Operator
在以前的 JavaScript 版本中，|| 运算符用来进行默认值的操作，如果左侧的对象不存在或者为假，则会返回右侧的值。
--- - - ----- ----- - - - -- -------- ------- --------------- -- -- -------- ------
总的来说那个 || 运算符对于判断值为空还是未被定义的区别不是很明显，如：
--- - - --- ------------- -- ----------- -- -- --------- --- -- ------------- -- ----------- -- -- ---------
这里就是一个坑，因为当 x 值为空字符串时，x 并没有被定义为空，就会返回默认值，这并不是我们想要的行为。
在 ES2020 版本中，新的空值合并运算符 ?? 应运而生，它用于检查一个值是否为 null 或 undefined 时，可以更加明确：
--- - - ----- ----- - - - -- -------- ------- --------------- -- -- ----
对于默认值的操作时，?? 运算符支持空值的处理：
--- -- ------------- -- ----------- -- -- ---------
Promise.allSettled
Promise.all 可以接受多个 Promise 对象，并在所有 Promise 对象都成功时返回 Promise 对象结果，如果其中一个 Promise 出现错误则 Promise 对象就会立即抛出错误。
而新增的 Promise.allSettled 更加强大，它返回的 Promise 对象结果，不论 Promise 对象是 resolve 还是 reject，都会返回 Promise 对象。它返回一个promise，该 promise 值为数组，该数组中包含每个 Promise 对象，它们的状态可以是 fulfilled 或 rejected，正如 ES6 新增的 Promise.race 类似。
----- -------- - -
-----------------------------------
-----------------------------------
------------------------------------------ -- -
----- --- ------------- -------
--
--
----------------------------
------------- --
---------------------- -- -------------------------- ---------------
--返回结果：
-------------------- --- ----------------- -------------------- --- ----------------- ------------------------ ------
动态引入 import()
除了静态导入 import 语法，ES2020 还新增了动态导入 import() 语法。它允许你在程序运行时按需加载其它脚本，而不是在编译时就加载所有脚本。
----- -------- ------------- - ----- -------- - ----- ------------------------ ------------------- -
动态导入的最大好处是加快了程序的加载速度，但是它推荐的使用方式是：当其他方案无法实现的情况下，再用这种方式来提高性能。
总结
ES2020 并不是一个完美的版本，但它新增的特性大多都是我们在开发过程中实现更优雅、高效、健康的编码实践的利器。以上我只列举了 ES2020 中部分特性，它们都非常实用且易于理解，希望大家能够快速上手并运用到你们的项目中。
欢迎在评论区分享你用了什么特性之类的东西。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648ea08448841e9894d01fd0