欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES2020新增功能

程序员文章站 2022-07-14 18:45:13
...

globalThis 对象

JavaScript运行环境中,存在一个顶层对象,即是全局运行环境(全局作用域),在browser环境下,顶层对象指向window,在node环境下,顶层对象指向global,在Web Worker中,顶层对象又指向self。而这个顶层对象我们常常又使其与this挂钩,一般默认使用this变量即可获得该顶层变量。但由于thisJavaScript中又是一个很复杂的变量。因为this在不同的执行上下文中指向不一,使其在获取顶层对象具有局限性。如在模块中,this指向该模块;严格模式运行的函数thisundefined。因此,出现很多垫片函数获取全局的对象,我们最熟悉的是如下获取顶层对象的方法。

function getGloablThis() {
	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');
}

ES2020中,提供了globalThis对象作为标准化的方式获取顶层对象。但目前由于浏览器支持情况的差异在使用时,可能需要垫片函数(如global-this)。

// chrome 中打印 glbalThis 对象
console.dir(globalThis)

输出结果如下:
ES2020新增功能

新数据类型 bigint

在面试中我们经常会遇到0.1 + 0.2 !== 0.3,这是为什么,又如何使其相等。当然了我们并不是为了解决这个问题才引入新的数据类型。我们知道JavaScript中数字都是采用64位进行存储的,因此其是有精度有范围的。这也是为什么0.1 + 0.2 !== 0.3,而且范围仅在Number.MIN_SAFE_INTEGER(9007199254740991)``Number.MAX_SAFE_INTEGER(-9007199254740991)之间可使用,因此,在一定的使用场景中是十分首先。为此,ES2020引入了一种新的数据类型bigint

const big = 123456789n;
typeof big; // bigint

bigint使用也比较简单就是在数据后面加上n表示其是bigint类型的数据。与Number类似,ES2020也提供了原生的BigInt构造函数,用于将其他类型数据转换成bigint数据。

const big = BigInt(Number.MAX_SAFE_INTEGER) // 9007199254740991n

Promise.allSettled

Promise.all在执行并发异步任务是,只有所有的Promise都是fulfilled状态时,其才是fulfilled状态,只要有一个并发的Promiserejected,其状态就是rejected的。而这常常无法满足我们的业务场景,比如,我们使用Promise.all并发的请求三个没有关联的API接口获取数据,不能因为其中一个接口报错,而无法返回其他接口的数据,这是不合理的。因此,ES2020引入Promise.allSettledPromise.allSettled方法接受一组Promise实例作为参数,包装成一个新的Promise实例。在进行并发处理时,不管其中入参Promise实例状态如何,只要所有的Promise实例都是完结状态,其就返回所有的实例结果数据无论其是fulfilledrejected

const promises = [
	fetch('index.html'),
	fetch('index.js'),
	fetch('index.css')
]
const promiseallSettled = Promise.allSettled(promises);
promiseallSettled.then(res => {
	const successRes = res.filter(item => item.status === 'fulfilled');
	const errorRes = res.filter(item => item.status === 'rejected');
	return {successRes, errorRes};
})

String.prototype.matchAll

ES2020增加了String.prototype.matchAll方法,一次性取出所有匹配,返回一个遍历器(Iterator)。

const source = 'this is test1 test2 test3!';
const reg = /test(\d)/g;

for (const match of source.matchAll(reg)) {
	console.log(match);
}

输出结果如下:

ES2020新增功能

可选链

在实际开发中,我们常常会读取对象内部的某个属性,但我们需要做前置检查,判断该对象是否存在,如果需要查询具有多层级的对象时,这种检查就更复杂。

const userName = user && user.detail && user.detail.name;

或者使用三元运算符

const userName = user ? (user.detail ? user.detail.name : '') : '';

这种层层判断非常的麻烦, ES2020引入了“链判断运算符”(optional chaining operator)?.,简化上面的操作,不再需要进行冗余的各种前置校验。

const userName = user?.detail?.name;

使用了?.运算符时,当左侧的对象为null或undefined就不再往下运算,而是返回undefined

空值合并

在实际开发场景中,我们经常遇到为变量指定一个默认值的情况。有时我们的意愿常常是当某个属性的值是nullundefined时,默认值才生效。但实际情况是经常是当值为falsy(faly值 (虚值) 是在Boolean上下文中认定为false的值)值时默认值就生效,而不仅仅只有nullundefined时生效。

const userName = name || 'testName';
// 当name为faly时,默认值就生效了

ES2020引入??运算符。只有运算符左侧的值为nullundefined时,才会返回右侧的值。

const userName = name ?? 'testName';

??运算符与?.运算符配合使用,可以为nullundefined的值设置默认值。

const userName = user?.detail?.name ?? 'testName';