您现在的位置: 谷精草 > 谷精草性状鉴别 > 正文 > 正文

盘点ES的新功能

  • 来源:本站原创
  • 时间:2021/3/14 22:07:56
北京治疗白癜风总共要多少钱 http://m.39.net/pf/bdfyy/

//每日前端夜话第篇//正文共:字//预计阅读时间:6分钟

EcmaInternational负责对JavaScript的标准化。是他们制定了ECMAScript规范。当提到ECMAScript时,基本上可以把它看作是JavaScript的同义词。从年开始,开始用年份标记版本,即ECMAScript缩写为ES。但是也会使用版本号的计数,所以ES6与ES相同。尚未发布的功能被称为ESNext。

ECMAScript/ES/ES11于6月发布,并且已经在现代浏览器中实现。让我们看看这会带来什么好处。

太长不看版

如果你不想看细节,那么只看这张图就够了。

空值合并

如果你在赋值时想要一个默认值(如果它为null或undefined),则可以使用??。

constname=person.fullName??anonymous;

如果对象person没有fullName值,则name将被赋值为“anonymous”。如果person的fullName有值,则把该值赋值给变量name。

你可能认为用

就能做到。但这几乎是几乎相同的,如果

前面的值是虚值,那么这个表达式将不会短路,并且会使用后面的值。但是请记住,空字符串,0,NaN和false都是虚值,在这些情况下将使用默认值,如果我们要用这些进行赋值的话,就行不通了。??则只检查null和undefined。

constuser={preferredSound:0}letsound=user.preferredSound??50//valueis0letsoundWrong=user.preferredSound

50//valueis50

仅当preferredSound为undefined或者null时才使用50这个值。

可选链

如果要使用多级嵌套在对象中的属性,在以前必须要检查它们是否为null或undefined,以避免代码崩溃。现在可以在访问这些属性之前使用?.,这样就可以只有在值不为null或undefined时使用?.后面的代码。

例如:

consthouse={owner:{name:Jim,pet:null}};//OldJavaScriptif(househouse.ownerhouse.owner.pethouse.owner.pet.type===dog){console.log(ownerhasadog);}//ESif(house?.owner?.pet?.type===dog){console.log(ownerhasadog);}Promise.allSettled

如果要执行更多的异步请求,可以使用Promise.all来收集它们。但是如果其中任何一个请求失败的话,将会引发异常。如果我们希望每个请求都能够完成,无论其请求是否失败,那该怎么办。这时可以用Promise.allSettled,当所有请求都被解决或拒绝时,它将返回。

constpromises=[Promise.resolve(1),Promise.reject(2)];const[result1,result2]=awaitPromise.allSettled(promises);

即使其他promise被拒绝了,我们仍然可以在这里使用result1的值。

matchAll

如果要用正则表达式查找所有的匹配项,可以用match来得到所有子字符串。但是,如果你既需要子字符串又需要索引,该怎么办?这时可以用matchAll并进行重复匹配。

例如找到一个字符串中的所有数字:

constmatches=Herearesomenumbers:.matchAll(/\d+/g);for(constmatchofmatches){console.log(match);}//输出://["5",index:22,input:"Herearesomenumbers:",groups:undefined]//["12",index:24,input:"Herearesomenumbers:",groups:undefined]//["88",index:27,input:"Herearesomenumbers:",groups:undefined]BigInt

BigInt是JavaScript中新的原始数据类型,与Boolean、Number、String、Symbol和undefined的地位相同。BigInt可以安全的处理大于Number限制的整数数字。也就是说如果要处理大于的数字时应该用BigInt。BigInt在数字末尾用n表示。

9_____+2;//BigInt(9_____)+BigInt(2)//n动态导入

以前只能在文件开头静态导入模块。现在有了动态导入,可以按需在代码中的任何位置进行这种操作。import()会与模块一起返回一个Promise。

constmodule=awaitimport(module);模块命名空间导出

在大多数情况下,我们能够通过导入导出JavaScript模块来重命名模块的名称,就像这样:

import*asvaluesfrommodule;import{valueasv}frommodule;export{vasvalue};

但是没有办法直接从名称被更改的另一个模块中重新导出某些内容。现在有了ES,则可以这样做:

export*assomeUtilsfromutils;globalThis

如果你的代码需要在多个环境(例如浏览器和Node服务器)下运行,那么它们所使用全局对象名称并不一致。在浏览器中用的是window,Node则用的是global,而webworker用的是self。现在,无论代码在哪种环境中运行,globalThis都能够为你提供正确的全局对象。

下面是一个例子,我们需要检查是否可以向用户提示alert。如果代码在浏览器中运行,则globalThis将会引用window,并且alert也可以使用。

if(typeofglobalThis.alert===function){globalThis.alert(hi);}精彩文章回顾,点击直达

点分享

点收藏

点点赞

点在看

预览时标签不可点收录于话题#个上一篇下一篇


本文编辑:佚名
转载请注明出地址  http://www.gujingcaoa.com/xzjb/6478.html

  • 上一篇文章:
  • 下一篇文章: 没有了
  • 热点文章

    • 没有任何图片文章
    • 没有热点文章
    推荐文章

    • 没有任何图片文章
    • 没有推荐文章

    Copyright © 2012-2020 谷精草版权所有



    现在时间: