前言
ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样蕴含大量新个性。然而，也增加了许多乏味且有用的个性。
本文以简略的代码示例来介绍 ES2020新个性。这样，你能够很快了解这些新性能，而不须要如许简单的解释。
可选链操作符（Optional Chaining）
可选链 可让咱们在查问具备多个层级的对象时，不再须要进行冗余的各种前置校验。
日常开发中，当须要拜访嵌套在对象外部好几层的属性时，可能就会失去臭名远扬的谬误Uncaught TypeError: Cannot read property...，这种谬误，让整段程序运行停止。
于是，你就要批改你的代码来解决来解决属性链中每一个可能的undefined对象，比方：
let nestedProp = obj && obj.first && obj.first.second; 在拜访 obj.first.second 之前，要先确认 obj 和 obj.first 的值非 null(且不是 undefined)。
有了可选链式调用 ，能够大量简化相似繁琐的前置校验操作，而且更平安：
let nestedProp = obj?.first?.second; 如果obj或obj.first是null/undefined，表达式将会短路计算间接返回undefined。
可选链操作符的反对状况：
空位合并操作符（Nullish coalescing Operator）
当咱们查问某个属性时，常常会给没有该属性就设置一个默认的值，比方上面两种形式：
let c = a ? a : b // 形式1let c = a || b // 形式2 这两种形式有个显著的弊病，它都会笼罩所有的假值，如(0, '', false)，这些值可能是在某些状况下无效的输出。
let x = { profile: { name: '浪里行舟', age: '' }}console.log(x.profile.age || 18) //18 上例中age的属性为空字符串，却被等同为假值，为了解决这个问题，ES2020诞生了个新个性--空位合并操作符，用 ?? 示意。如果表达式在??的左侧运算符求值为 undefined 或 null，就返回其右侧默认值。
let c = a ?? b;// 等价于let c = a !== undefined && a !== null ? a : b; 例如有以下代码：
const x = null;const y = x ?? 500;console.log(y); // 500const n = 0const m = n ?? 9000;console.log(m) // 0 空位合并操作符的反对状况：
Promise.allSettled
咱们晓得 Promise.all 具备并发执行异步工作的能力。但它的最大问题就是如果参数中的任何一个promise为reject的话，则整个Promise.all 调用会立刻终止，并返回一个reject的新的 Promise 对象。
const promises = [ Promise.resolve(1), Promise.resolve(2), Promise.reject('error')];Promise.all(promises) .then(responses => console.log(responses)) .catch(e => console.log(e)) // "error" 如果有这样的场景：一个页面有三个区域，别离对应三个独立的接口数据，应用 Promise.all 来并发申请三个接口，如果其中任意一个接口出现异常，状态是reject,这会导致页面中该三个区域数据全都无奈进去，这个情况咱们是无奈承受，Promise.allSettled的呈现就能够解决这个痛点：
Promise.allSettled([ Promise.reject({ code: 500, msg: '服务异样' }), Promise.resolve({ code: 200, list: [] }), Promise.resolve({ code: 200, list: [] })]).then(res => { console.log(res) /* 0: {status: "rejected", reason: {…}} 1: {status: "fulfilled", value: {…}} 2: {status: "fulfilled", value: {…}} */ // 过滤掉 rejected 状态，尽可能多的保障页面区域数据渲染 RenderContent( res.filter(el => { return el.status !== 'rejected' }) )}) Promise.allSettled跟Promise.all相似, 其参数承受一个Promise的数组, 返回一个新的Promise, 惟一的不同在于, 它不会进行短路, 也就是说当Promise全副解决实现后,咱们能够拿到每个Promise的状态, 而不论是否解决胜利。
Promise.allSettled的反对状况：
String.prototype.matchAll
如果一个正则表达式在字符串外面有多个匹配，当初个别应用g修饰符或y修饰符，在循环外面逐个取出。
function collectGroup1 (regExp, str) { const matches = [] while (true) { const match = regExp.exec(str) if (match === null) break matches.push(match[1]) } return matches}console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))// [ 'foo', 'bar', 'baz' ] 值得注意的是，如果没有修饰符 /g, .exec() 只返回第一个匹配。当初通过String.prototype.matchAll办法，能够一次性取出所有匹配。
function collectGroup1 (regExp, str) { let results = [] for (const match of str.matchAll(regExp)) { results.push(match[1]) } return results}console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))// ["foo", "bar", "baz"] 下面代码中，因为string.matchAll(regex)返回的是遍历器，所以能够用for...of循环取出。
String.prototype.matchAll的反对状况：
Dynamic import
当初前端打包资源越来越大，前端利用初始化时基本不须要全副加载这些逻辑资源，为了首屏渲染速度更快，很多时候都是动静导入（按需加载）模块，比方懒加载图片等，这样能够帮忙您进步应用程序的性能。
其中按需加载这些逻辑资源都个别会在某一个事件回调中去执行：
el.onclick = () => { import('/modules/my-module.js') .then(module => { // Do something with the module. }) .catch(err => { // load error; })} import()能够用于script脚本中,import(module) 函数能够在任何中央调用。它返回一个解析为模块对象的 promise。
这种应用形式也反对 await 关键字。
let module = await import('/modules/my-module.js'); 通过动静导入代码，您能够缩小应用程序加载所需的工夫，并尽可能快地将某些内容返回给用户。
Dynamic import的反对状况：
BigInt
javascript 在 Math 上始终很蹩脚的起因之一是只能平安的示意-(2^53-1)至 2^53-1 范的值，即Number.MIN_SAFE_INTEGER 至Number.MAX_SAFE_INTEGER，超出这个范畴的整数计算或者示意会失落精度。
var num = Number.MAX_SAFE_INTEGER; // -> 9007199254740991num = num + 1; // -> 9007199254740992// 再次加 +1 后无奈失常运算num = num + 1; // -> 9007199254740992// 两个不同的值，却返回了true9007199254740992 === 9007199254740993 // -> true 于是 BigInt 应运而生，它是第7个原始类型，可平安地进行大数整型计算。
你能够在BigInt上应用与一般数字雷同的运算符，例如 +, -, /, *, %等等。
创立 BigInt 类型的值也非常简单，只须要在数字前面加上 n 即可。例如，123 变为 123n。也能够应用全局办法 BigInt(value) 转化，入参 value 为数字或数字字符串。
const aNumber = 111;const aBigInt = BigInt(aNumber);aBigInt === 111n // truetypeof aBigInt === 'bigint' // truetypeof 111 // "number"typeof 111n // "bigint" 只有在数字开端加上 n，就能够正确计算大数了：
1234567890123456789n * 123n;// -> 151851850485185185047n 不过有一个问题，在大多数操作中，不能将 BigInt与Number混合应用。比拟Number和 BigInt是能够的，然而不能把它们相加。
1n < 2 // true1n + 2// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions BigInt的反对状况：
globalThis
globalThis 是一个全新的规范办法用来获取全局 this 。之前开发者会通过如下的一些办法获取：
- 全局变量 window：是一个经典的获取全局对象的办法。然而它在 Node.js 和 Web Workers 中并不能应用
- 全局变量 self：通常只在 Web Workers 和浏览器中失效。然而它不反对 Node.js。一些人会通过判断 self 是否存在辨认代码是否运行在 Web Workers 和浏览器中
- 全局变量 global：只在 Node.js 中失效
过来获取全局对象，可通过一个全局函数：
// ES10之前的解决方案const getGlobal = function(){ if(typeof self !== 'undefined') return self if(typeof window !== 'undefined') return window if(typeof global !== 'undefined') return global throw new Error('unable to locate global object')}// ES10内置globalThis.Array(0,1,2) // [0,1,2]// 定义一个全局对象v = { value:true } ,ES10用如下形式定义globalThis.v = { value:true } 而 globalThis 目标就是提供一种标准化形式拜访全局对象，有了 globalThis 后，你能够在任意上下文，任意时刻都能获取到全局对象。
如果您在浏览器上，globalThis将为window，如果您在Node上，globalThis则将为global。因而，不再须要思考不同的环境问题。
// worker.jsglobalThis === self// node.jsglobalThis === global// browser.jsglobalThis === window 新提案也规定了，Object.prototype 必须在全局对象的原型链中。上面的代码在最新浏览器中曾经会返回 true 了：
Object.prototype.isPrototypeOf(globalThis); // true globalThis的反对状况：