这几年，Ecma TC39一年一次更新 ecmascript 规范标准，截止目前，以下特性已进入 finished 状态。现在带大家体验种草 ES2020 新特性。
一：Promise.allSettled
Promise.all 缺陷
都知道 Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise直接进入 reject 状态。
想象这个场景：你的页面有三个区域，分别对应三个独立的接口数据，使用 Promise.all 来并发三个接口，如果其中任意一个接口服务异常，状态是reject,这会导致页面中该三个区域数据全都无法渲染出来，因为任何 reject 都会进入catch回调, 很明显，这是无法接受的，如下：
Promise.all([ Promise.reject({code: 500, msg: '服务异常'}), Promise.resolve({ code: 200, list: []}), Promise.resolve({code: 200, list: []}) ]) .then((ret) => { // 如果其中一个任务是 reject，则不会执行到这个回调。 RenderContent(ret); }) .catch((error) => { // 本例中会执行到这个回调 // error: {code: 500, msg: "服务异常"} })
我们需要一种机制，如果并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务value 或者 拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性，而 Promise.allSettled 就是解决这问题的。
Promise.allSettled([ Promise.reject({code: 500, msg: '服务异常'}), Promise.resolve({ code: 200, list: []}), Promise.resolve({code: 200, list: []}) ]) .then((ret) => { /* 0: {status: "rejected", reason: {…}} 1: {status: "fulfilled", value: {…}} 2: {status: "fulfilled", value: {…}} */ // 过滤掉 rejected 状态，尽可能多的保证页面区域数据渲染 RenderContent(ret.filter((el) => { return el.status !== 'rejected'; })); });
二：可选链（Optional chaining）
可选链 可让我们在查询具有多层级的对象时，不再需要进行冗余的各种前置校验。
日常开发中，我们经常会遇到这种查询
var name = user && user.info && user.info.name;
又或是这种
var age = user && user.info && user.info.getAge && user.info.getAge();
这是一种丑陋但又不得不做的前置校验，否则很容易命中 Uncaught TypeError: Cannot read property... 这种错误，这极有可能让你整个应用挂掉。
用了 Optional Chaining ，上面代码会变成
var name = user?.info?.name;
var age = user?.info?.getAge?.();
可选链中的 ? 表示如果问号左边表达式有值, 就会继续查询问号后面的字段。根据上面可以看出，用可选链可以大量简化类似繁琐的前置校验操作，而且更安全。
三：空值合并运算符（Nullish coalescing Operator）
当我们查询某个属性时，经常会遇到，如果没有该属性就会设置一个默认的值。比如下面代码中查询玩家等级。
var level = (user.data && user.data.level) || '暂无等级';
在JS中，空字符串、0 等，当进行逻辑操作符判时，会自动转化为 false。在上面的代码里，如果玩家等级本身就是 0 级, 变量 level 就会被赋值 暂无等级 字符串，这是逻辑错误。
var level; if (typeof user.level === 'number') { level = user.level; } else if (!user.level) { level = '暂无等级'; } else { level = user.level; }
来看看用空值合并运算符如何处理
// { // "level": 0 // } var level = `${user.level}级` ?? '暂无等级'; // level -> '0级'
用空值合并运算在逻辑正确的前提下，代码更加简洁。
空值合并运算符 与 可选链 相结合，可以很轻松处理多级查询并赋予默认值问题。
var level = user.data?.level ?? '暂无等级';
四：dynamic-import
按需 import 提案几年前就已提出，如今终于能进入ES正式规范。这里个人理解成“按需”更为贴切。现代前端打包资源越来越大，打包成几M的JS资源已成常态，而往往前端应用初始化时根本不需要全量加载逻辑资源，为了首屏渲染速度更快，很多时候都是按需加载，比如懒加载图片等。而这些按需执行逻辑资源都体现在某一个事件回调中去加载。
el.onclick = () => { import(`/path/current-logic.js`) .then((module) => { module.doSomthing(); }) .catch((err) => { // load error; }) }
当然，webpack目前已很好的支持了该特性。
五：globalThis