十分钟教你上手ES2020新特性 - 行业资讯 - 肥雀云

　　2020年

ES2020是ECMAScript对应的版本。这个版本不像ES6 (ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。想阅读更多优质文章,请点击我的博客

本文以简单的代码示例来介绍ES2020新特性。这样,你可以很快理解这些新功能,而不需要多么复杂的解释。

可选链可让我们在查询具有多个层级的对象时,不再需要进行冗余的各种前置校验。

日常开发中,当需要访问嵌套在对象内部好几层的属性时,可能就会得到臭名昭著的错误<代码>未捕获TypeError:无法读取属性…,这种错误,让整段程序运行中止。

于是,你就要修改你的代码来处理来处理属性链中每一个可能的定义对象,比如:

　　　　　　让nestedProp=obj,,obj。第一,,obj.first.second; 　　　　

在访问obj.first。第二之前,要先确认obj和obj。第一次的值非零(且不是未定义)。

有了可选链式调用,可以大量简化类似繁琐的前置校验操作,而且更安全:

　　　　　　让nestedProp=obj # 63;当代# 63;接着, 　　　　

如果obj或obj.first是null/未定义,表达式将会短路计算直接返回定义。

可选链操作符的支持情况:

十分钟教你上手ES2020新特性

当我们查询某个属性时,经常会给没有该属性就设置一个默认的值,比如下面两种方式:

　　　　　　让c=& # 63;a://方式1 　　让c=| | b//方式2 　　　　

这两种方式有个明显的弊端,它都会覆盖所有的假值,如(0,“假),这些值可能是在某些情况下有效的输入。

　　　　　　让x={ 　　简介:{ 　　名称:“浪里行舟”, 　　年龄:“ 　　} 　　} 　　console.log (x.profile。18岁| | 18)//之前　　　　

上例中年龄的属性为空字符串,却被等同为假值,为了解决这个问题,ES2020诞生了个新特性——空位合并操作符,用& # 63;& # 63;表示。如果表达式在& # 63;& # 63;的左侧运算符求值为未定义或null,就返回其右侧默认值。

　　　　　　让c=& # 63; & # 63;b;//等价于让c=?=未定义的,,一个!==null & # 63;a: b; 　　　　

例如有以下代码:

　　　　　　const x=零; 　　const y=x & # 63; & # 63;500; 　　console.log (y);//500 　　const n=0 　　const m=n & # 63; & # 63;9000; 　　console.log (m)//0 　　　　

空位合并操作符的支持情况:

十分钟教你上手ES2020新特性

我们知道的承诺。所有具有并发执行异步任务的能力。但它的最大问题就是如果参数中的任何一个承诺为拒绝的话,则整个承诺。所有调用会立即终止,并返回一个拒绝的新承诺的对象。

　　　　　　const承诺=[ 　　Promise.resolve (1), 　　Promise.resolve (2), 　　Promise.reject(错误的) 　　]; 　　　　　　Promise.all(承诺) 　　不要犹豫(=祝辞的反应;console.log(反应)) 　　.catch (e=比;console.log (e))//按砦蟆? 　　之前　　　　

假如有这样的场景:一个页面有三个区域,分别对应三个独立的接口数据,使用的承诺。所有来并发请求三个接口,如果其中任意一个接口出现异常,状态是拒绝,这会导致页面中该三个区域数据全都无法出来,这个状况我们是无法接受,Promise.allSettled的出现就可以解决这个痛点:

　　　　　　Promise.allSettled ([ 　　的承诺。拒绝({代码:500,味精:“服务异常'}), 　　的承诺。解决({列表,交易代码:200:[]}), 　　的承诺。解决({列表,交易代码:200:[]}) 　　])。然后(res=比;{ 　　console.log (res)/* 　　0:{状态:“拒绝”,原因是:{…}} 　　1:{状态:“满足”,价值:{…}} 　　2:{状态:“满足”,价值:{…}} 　　*///过滤掉拒绝状态,尽可能多的保证页面区域数据渲染　　RenderContent ( 　　res.filter (el=比;{ 　　返回厄尔。地位!==熬芫? 　　}) 　　) 　　}) 　　　　

Promise.allSettled跟承诺。所有类似,其参数接受一个承诺的数组,返回一个新的承诺,唯一的不同在于,它不会进行短路,也就是说当承诺全部处理完成后,我们可以拿到每个承诺的状态,而不管是否处理成功。