今天主要介绍ECMAScript2021(ES12)中的JS函数。逻辑赋值运算符数字分隔符(1_000)Promise.anywithAggregateErrorString.prototype.replaceAllWeakRefswithFinalizationRegistryObjects逻辑赋值运算符逻辑赋值运算符将逻辑运算符(&&、||或??)与赋值表达式组合在一起。x||=y;x||(x=y);x&&=y;x&&(x=y);x??=y;x??(x=y);逻辑赋值运算符letxwith&&=1;lety=2;x&&=y;console.log(x);//2x&&=y等价于x&&(x=y)。或者等效地if(x){x=y}因为x是真值,所以它被赋予值y,即2。逻辑赋值运算符||letx=1;lety=2;x||=y;console.log(x);//1x||=y等价于x||(x=y)。这意味着赋值操作只会在x为假值时发生。在我们的代码中,x包含1,这是一个真值,因此不会发生赋值。这就是我们的代码在控制台中打印1的原因。简单地说constupdateID=user=>{//我们可以这样做if(!user.id)user.id=1//orthisuser.id=user.id||1//orthisuser.id||=1}带有??的逻辑赋值运算符专门检查一个值在JS中是否为null或undefined。leta;letb=a??5;console.log(b);//5在第二行,让b=a??5、如果a的值为null或undefined,??评估并分配给b。现在考虑??和==。letx;lety=2;x??=y;console.log(x);//2x??=y等价于x=x??(x=y)数字分隔符,允许我们在数字之间添加下划线(_)字符,使数字更具可读性。例如constnum=100000000被0的个数混淆分隔符解决了这个问题:constnum=100_000_000分隔符既可以用于数字的整数部分,也可以用于数字的小数部分。constnum=1_000_000.123_456分隔符不仅可以用于整数和浮点数,还可以用于二进制、十六进制和八进制文字。分隔符也适用于BigInt数字。consttrillion=1000_000_000_000n;console.log(trillion.toString());//“1000000000000”分隔符只是为了便于阅读。因此,它可以放在数字中的任何位置。constamount=178_00;//00after_forcents.Promise.any和AggregateErrorPromise.any()返回第一个fulfilledpromise的值。如果作为参数(作为数组)传递给Promise.any()的所有Promise都被拒绝,则会抛出“AggregateError”异常。AggregateError`是一个新的Error子类,用于对单个错误进行分组。每个AggregateError实例都包含对异常数组的引用。考虑以下示例:下面我们有3个承诺,它们是随机的。constp1=newPromise((resolve,reject)=>{setTimeout(()=>resolve("A"),Math.floor(Math.random()*1000));});constp2=newPromise((resolve,reject)=>{setTimeout(()=>resolve("B"),Math.floor(Math.random()*1000));});constp3=newPromise((resolve,reject)=>{setTimeout(()=>resolve("C"),Math.floor(Math.random()*1000));});p1、p2、p3中,第一个完成的由Promise.any()执行。(asyncfunction(){constresult=awaitPromise.any([p1,p2,p3]);console.log(result);//打印“A”、“B”或“C”})();如果所有的承诺都失败了?在这种情况下,Promise.any()会抛出AggregateError异常。我们需要捕获它:constp=newPromise((resolve,reject)=>reject());try{(asyncfunction(){constresult=awaitPromise.any([p]);console.log(result);})();}catch(error){console.log(error.errors);出于演示目的,在Promise.any()中我们只有一个承诺。而这个承诺失败了。上面的代码在控制台中记录了以下错误。String.prototype.replaceAllString.prototype.replaceAll()方法允许我们在不使用全局正则表达式的情况下用不同的值替换字符串中子字符串的所有实例。目前,JavaScript字符串有一个replace()方法。它可用于将一个字符串替换为另一个字符串。conststr="BackbenchersitsattheBack";constnewStr=str.replace("Back","Front");console.log(newStr);//"FrontbenchersitsattheBack"如果输入模式是字符串,replace()方法只替换第一个出现的时间内容。这就是为什么在代码中,第二次出现的“Back”没有被替换。仅当模式作为正则表达式提供时才可能进行完全替换。conststr="BackbenchersitsattheBack";constnewStr=str.replace(/Back/g,"Front");console.log(newStr);//"FrontbenchersitsattheFront"再看一个例子conststrWithPlus='++'conststrWithComma=strWithPlus.replace(/+/g,',')//,,这个方法需要使用正则表达式。但是,复杂的正则表达式通常是错误的来源。(没有人喜欢RegEx😬)还有另一种方法是使用String.prototype.split()和Array.prototype.join()方法conststrWithPlus='++'conststrWithComma=strWithPlus.split('+')。join(',')//,,该方法避免了正则表达式的使用,但必须将字符串拆分成单独的部分(单词),将其转换为数组,然后将数组元素连接成一个新的字符串。string.prototype.replaceAll()解决了这些问题,提供了一种简单方便的全局替换子串的方式:conststrWithPlus='++'conststrWithComma=strWithPlus.replaceAll('+',',')//,注意:replaceand如果将全局正则表达式用作查找值,则replaceAll的行为相同。WeakRefs和FinalizationRegistry对象WeakRef表示弱引用。弱引用的主要用途是实现大对象的缓存或映射。在这种情况下,我们不想长期保留大量内存来存放这种很少使用的缓存或映射。我们可以非常快速地对内存进行垃圾回收,稍后如果我们再次需要它,我们可以生成一个新的缓存。JS会自动进行垃圾回收。如果一个变量不再可达,JS垃圾收集器将自动删除它。您可以在MDN上阅读有关JS垃圾回收的更多信息。WeaseRefs(弱引用)提供了两个新特性:使用Wea??kRef类创建对对象的弱引用使用FinalizationRegistry类在垃圾回收后运行自定义收集器简而言之,WeakRefs允许我们创建对属性值对象的弱引用另一个对象的终结器,除此之外,可以使用终结器来删除对已被垃圾收集器“清理”的对象的引用。如果传递给函数的参数的计算值存在于缓存中(假设对象用作缓存对象的属性值,并且它们随后有被删除的风险)以防止重复执行该功能。在构建内联缓存时如果没有内存泄漏的风险,请使用Map当使用其对象可以随后删除的键时,使用Wea??kMap当使用可以随后删除的值对象时,使用带有WeakRef的Map最后一个例子提议:functionmakeWeakCached(f){constcache=newMap()returnkey=>{constref=cache.get(key)if(ref){//constcached=ref.deref()if(cached!==undefined)returncached;}constfresh=f(key)//()cache.set(key,newWeakRef(fresh))returnfresh};}constgetImageCached=makeWeakCached(getImage);WeakRef构造函数接受一个参数,该参数必须是一个对象,并返回该对象弱引用Wea??kRef实例的deref方法返回两个值之一。在内置缓存的情况下,终结器旨在在垃圾收集器销毁值对象后完成清理过程,或者更简单地说,删除对此类对象的弱引用。functionmakeWeakCached(f){constcache=newMap()//-constcleanup=newFinalizationRegistry(key=>{constref=cache.get(key)if(ref&&!ref.deref())cache.delete(key)})returnkey=>{constref=cache.get(key)if(ref){constcached=ref.deref()if(cached!==undefined)returncached}constfresh=f(key)cache.set(key,newWeakRef(fresh))//()cleanup.register(fresh,key)returnfresh}}constgetImageCached=makeWeakCached(getImage);作者:KUMARHARSH作者:前端小智来源:博客译文:https://dev.to/cenacr007_harsh/es2021-features-3pa
