共计 4880 个字符,预计需要花费 13 分钟才能阅读完成。
前言
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 // 形式 1
let 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); // 500
const n = 0
const 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; // -> 9007199254740991
num = num + 1; // -> 9007199254740992
// 再次加 +1 后无奈失常运算
num = num + 1; // -> 9007199254740992
// 两个不同的值,却返回了 true
9007199254740992 === 9007199254740993 // -> true
于是 BigInt 应运而生,它是第 7 个原始类型,可平安地进行大数整型计算 。
你能够在 BigInt 上应用与一般数字雷同的运算符,例如 +, -, /, *, % 等等。
创立 BigInt 类型的值也非常简单,只须要在数字前面加上 n 即可。例如,123 变为 123n。也能够应用全局办法 BigInt(value) 转化,入参 value 为数字或数字字符串。
const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint"
只有在数字开端加上 n,就能够正确计算大数了:
1234567890123456789n * 123n;
// -> 151851850485185185047n
不过有一个问题,在大多数操作中,不能将 BigInt 与 Number 混合应用。比拟 Number 和 BigInt 是能够的,然而不能把它们相加。
1n < 2
// true
1n + 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.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window
新提案也规定了,Object.prototype 必须在全局对象的原型链中。上面的代码在最新浏览器中曾经会返回 true 了:
Object.prototype.isPrototypeOf(globalThis); // true
globalThis 的反对状况: