当前位置: 首页 > 科技观察

你可能错过的现代JavaScript特性

时间:2023-03-19 21:25:04 科技观察

尽管过去7年我几乎每天都在编写JavaScript代码,但我不得不承认,我实际上并没有太多关注ES语言的发布公告。async/await和Proxies等主要功能是一回事,但每年都会有源源不断的小的、渐进的改进,因为总有东西要学。因此在这篇文章中,我收集了一些现代JavaScript特性,这些特性在首次发布时并没有引起太多关注。其中一些只是提高了编码质量,而另一些则非常好用,可以减少很多代码量。这里有一些你可能错过的信息:ES2015Binary和OctalBinary操作在JavaScript中并不常见,但有时会遇到,否则不会真正解决你的问题。您可能正在为低功耗设备编写高性能代码,将位压缩到本地存储,在浏览器中进行像素RGB操作,或者必须处理紧密打包的二进制数据格式。这可能意味着要用二进制数做很多工作,我一直认为这可以用十进制来完成。好吧,ES6为此添加了二进制数字格式:0bconstbinaryZero=0b0;constbinaryOne=0b1;constbinary255=0b11111111;constbinaryLong=0b111101011101101;这使得处理二进制符号变得非常容易://Pizzatoppingsconstolives=0b0001;constham=0b0010=0b0101101;;constartechoke=0b1000;constpizza_ham_pineapple=菠萝|火腿;constpizza_four_seasons=橄榄|火腿|artchoke;八进制数也一样。这些领域在JS世界中有点小众,但在网络和某些文件格式中很常见。现在您可以使用语法0o处理八进制。Number.isNaN()不要与window.isNaN()混淆,后者是一种具有更直观行为的新方法。你会注意到经典的isNaN有一些有趣的怪癖:isNaN(NaN)===trueiisNaN(null)===falseisNaN(undefined)===trueiisNaN({})===trueiisNaN('0/0')===trueisNaN('hello')===true这是什么原因造成的?首先,没有一个参数实际上是NaN。一如既往,问题是每个人“最喜欢的”JavaScript特性:类型强制转换。通过Number函数将window.isNaN的参数强制转换为一个数字。好吧,新的Number.isNaN()静态方法解决了所有问题。它将一劳永逸地返回您提供的参数与NaN的相等性。这是绝对明确的:Number.isNaN(NaN)===trueNumber.isNaN(null)===falseNumber.isNaN(undefined)===falseNumber.isNaN({})===falseNumber.isNaN('0/0')===falseNumber.isNaN('hello')===false函数签名:Number.isNaN:(value:any)=>booleanES2016exponentiation(power)operator很高兴有一个用于求幂的文字语法:2**2===43**2===93**3===27(这很奇怪,因为我确定JavaScript已经有了这个——我可能一直在考虑Python)Array.prototype.includes()这个特点值得关注。如果您在过去几年中一直在编写类似array.indexOf(x)!==-1的代码,那么您现在可以使用新的includes方法:[1,2,3].includes(2)===true[1,2,3].includes(true)===false包括使用相同值零算法的检查(几乎与严格相等===相同),但它可以处理NaN值。与相等检查一样,它将通过引用而不是内容比较对象:constobject1={};constobject2={};constarray=[object1,78,NaN];array.includes(object1)===truearray.includes(object2)===falsearray.includes(NaN)===trueincludes可以让你通过第二个参数fromIndex提供一个偏移量://positions01234constarray=[1,1,1,2,2];array.includes(1,2)===truearray.includes(1,3)===false太平滑了。函数签名:Array.prototype.includes:(match:any,offset?:Int)=>booleanES2017Sharedarraybuffersandatomicoperations如果你要用webworkers做很多工作,这是一对很棒的特性,那么这些功能将证明是无价的。它们允许您在进程之间直接共享内存,并通过设置锁来避免资源争用。这些是相当复杂的API功能,因此我不会在这里对它们进行概述,但您可以在Sitepen文章中阅读有关它们的更多信息。目前有一些浏览器还不支持它,但希望这会在未来几年内得到改善。ES2018强大的正则表达式ES2018引入了一整套正则表达式特性:Lookbehindmatchingitems(forwardmatching)在支持它的运行时,你现在可以使用正则表达式进行正向匹配。例如查找所有以美元开头的数字:constregex=/(?<=\$)\d+/;consttext='Thiscost$400';text.match(regex)===['400']keyisnewlookbehindLookahead和lookaheadLookahead是一个邪恶的双胞胎:Lookahead:(?=abc)Lookbehind:(?<=abc)Lookaheadnegative:(?!abc)Lookbehindnegative:(?\w+)\s(?\w+)/g;constname="WeylandSmithers";constsubMatches=getNameParts.exec(name);const{first,last}=subMatches.groupsfirst==='Weyland'last==='Smithers'不幸的是,目前只有Chrome和节点支持。现在可以使用点来匹配换行符您只需要提供/s标志,例如/someRegex./s,`/anotherRegex./sg.ES2019Array.prototype.flat()&flatMap()我很高兴在MDN上看到这些。简单地说,flat()将多维数组展平到指定的最大深度:constmultiDimensional=[[1,2,3],[4,5,6],[7,[8,9]]];multiDimensional。flat(2)===[1,2,3,4,5,6,7,8,9]flatMap本质上是一个地图和一个深度为1的平面。这在从映射函数返回数组时很方便,但您不希望结果是嵌套数据结构:consttexts=["Hello,","todayI","will","useFlatMap"];//withaplainmapconstmapped=texts.map(text=>text.split(''));mapped===['Hello',['today','I'],'will',['use','FlatMap']];//withflatmapconstflatMapped=texts.flatMap(text=>text.split(''));flatMapped===['Hello','today','I','will','use','FlatMap'];Unboundcatch现在你可以编写try/catch语句而不绑定抛出的错误:有时称为Pokémon异常处理。“因为你抓住了他们所有人”!字符串修剪方法很小但效果很好:constpadded='Helloworld';padded.trimStart()==='Helloworld';padded.trimEnd()==='Helloworld';