ES2020 快速上手，掌握新特性

ES2020 是 JavaScript 的第十个版本，带来了很多新的特性和语言功能。本文将重点介绍 ES2020 中最有意义的几个特性，帮助前端工程师快速上手，并且提供一些实用的示例代码以便深入学习。

可选链 Optional Chaining

在旧版 JavaScript 中，我们通常为了安全性需要使用多个层级的繁琐判断语句，如判断对象是否为空或方法是否存在等。ES2020 可选链操作符 ?. 的出现，避免了很多不必要的麻烦。例如我们想获取 house 对象中的 bedroom中的 wardrobeColor，以前的代码可能是这样的：

let wardrobeColor = 'unknown';

if (house && house.bedroom && house.bedroom.wardrobe) {
  wardrobeColor = house.bedroom.wardrobe.color;
}

现在可以使用可选链简化代码：

let wardrobeColor = house?.bedroom?.wardrobe?.color ?? 'unknown';

如果访问对象的某个属性不存在，则返回undefined，否则返回属性值。?. 在多层级链式调用时非常方便，避免了前面类型检查的麻烦。

空值合并运算符 Nullish Coalescing Operator

在以前的 JavaScript 版本中，|| 运算符用来进行默认值的操作，如果左侧的对象不存在或者为假，则会返回右侧的值。

let x = null;
const y = x || 'Default Value';

console.log(y); // 返回 'Default Value'

总的来说那个 || 运算符对于判断值为空还是未被定义的区别不是很明显，如：

let x = "";

console.log(x || "default");    // 返回 "default"

let y;

console.log(y || "default");    // 返回 "default"

这里就是一个坑，因为当 x 值为空字符串时，x 并没有被定义为空，就会返回默认值，这并不是我们想要的行为。

在 ES2020 版本中，新的空值合并运算符 ?? 应运而生，它用于检查一个值是否为 null 或 undefined 时，可以更加明确：

let x = null;
const y = x ?? 'Default Value';

console.log(y); // 返回 null

对于默认值的操作时，?? 运算符支持空值的处理：

let x;

console.log(x ?? "default");    // 返回 "default"

Promise.allSettled

Promise.all 可以接受多个 Promise 对象，并在所有 Promise 对象都成功时返回 Promise 对象结果，如果其中一个 Promise 出现错误则 Promise 对象就会立即抛出错误。

而新增的 Promise.allSettled 更加强大，它返回的 Promise 对象结果，不论 Promise 对象是 resolve 还是 reject，都会返回 Promise 对象。它返回一个promise，该 promise 值为数组，该数组中包含每个 Promise 对象，它们的状态可以是 fulfilled 或 rejected，正如 ES6 新增的 Promise.race 类似。

-- -------------------- ---- -------
----- -------- - -
  -----------------------------------
  -----------------------------------
  ------------------------------------------ -- -
      ----- --- ------------- -------
  --
--

----------------------------
  ------------- --
    ---------------------- -- -------------------------- ---------------
  --

返回结果：

"fulfilled",response for someresponse1.com
"fulfilled",response for someresponse2.com
"rejected",Error('failed call')

动态引入 import()

除了静态导入 import 语法，ES2020 还新增了动态导入 import() 语法。它允许你在程序运行时按需加载其它脚本，而不是在编译时就加载所有脚本。

async function fetchModule() {
  const myModule = await import('./myModule.js');
  myModule.doStuff();
}

动态导入的最大好处是加快了程序的加载速度，但是它推荐的使用方式是：当其他方案无法实现的情况下，再用这种方式来提高性能。

总结

ES2020 并不是一个完美的版本，但它新增的特性大多都是我们在开发过程中实现更优雅、高效、健康的编码实践的利器。以上我只列举了 ES2020 中部分特性，它们都非常实用且易于理解，希望大家能够快速上手并运用到你们的项目中。

欢迎在评论区分享你用了什么特性之类的东西。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ea08448841e9894d01fd0