ES6ES1336大新特性大盘点？

　　大家好，很高兴又见面了，我是前端进阶，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
　　前端进阶1。ES6（ES2015）1。1Class
　　JavaScript是一种使用原型链的语言。早期像面向对象这样的概念都是通过原型链来做的，比较复杂，Class终于在ES6中引入了。classAnimal｛constructor（name，color）｛this。namename；this。colorcolor；｝ThisisapropertyontheprototypechaintoString（）｛console。log（name：this。name，color：this。color）；｝｝varanimalnewAnimal（myDog，yellow）；animal。toString（）；console。log（animal。hasOwnProperty（name））；trueconsole。log（animal。hasOwnProperty（toString））；falseconsole。log（animal。proto。hasOwnProperty（toString））；trueclassCatextendsAnimal｛constructor（action）｛super（cat，white）；this。actionaction；｝toString（）｛console。log（super。toString（））；｝｝varcatnewCat（catch）；cat。toString（）；console。log（catinstanceofCat）；trueconsole。log（catinstanceofAnimal）；true1。2module
　　每个模块都有自己的命名空间，避免冲突，使用import和export来导入导出，默认将。js文件视为模块。1。3Arrowfunction箭头函数
　　（）｛｝是函数的缩写，有了箭头函数再也不用写varselfthis，varthatthis等类代码。constadd（a，b）｛returnab；｝；constresadd（1，2）；3constminus（a，b）ab；constres1minus（5，1）；41。4函数参数默认值
　　如果函数不传参数，则使用默认值，更简洁。functionexample（height5，width6）｛constnewHheight2；constnewWwidth4；returnnewHnewW；｝example（）；34（5264）1。5模板字符串
　　以前，长字符串的组合使用号连接，可读性差，使用模板字符串更容易阅读。constfirstNamewater；constlastNamefish；notusetemplateliteralconstnameHello，MynameisfirstName，lastName；usetemplateliteralconstnameWithLiteralStringHello，Mynameis｛firstName｝，｛lastName｝；1。6解构constarr〔1，2，3，4，5〕；const〔one，two，three〕arr；console。log（one）；1console。log（two）；2。。。Toskipcertainvaluesconst〔first，，，，last〕arr；console。log（first）；1console。log（last）；5Objectscanalsobedestructurizedandassignedconststudent｛name：waterfish，age：28，｝；const｛name，age，city｝student；console。log（name）；waterfishconsole。log（age）；281。7spread操作符constarr1〔A，B〕；constarr2〔0，。。。arr1，1，2〕；conslog。log（arr2）；〔0，A，B，1，2〕
　　用三个点表示，Array可以扩展，而如果是Object，则根据keyvalue进行扩展。1。8对象属性缩写
　　因为构成newCustomer对象属性的name、age的key、value相同，所以省略value。constnamewaterfish，age28；BeforeES6，wemustwritelikethisconstcustomer｛name：name，age：age，｝；｛name：waterfish，age：28｝AfterES6，wecandoitconstnewCustomer｛name，age，｝；｛name：waterfish，age：28｝1。9Promise
　　Promise是一种解决异步（非同步）写法的方案，比原来的callback写法更优雅。使用Promise可以解决hellcallback。constwaitSecondnewPromise（（resolve，reject）｛setTimeout（resolve，1000）；｝）；waitSecond。then（（）｛console。log（helloafter1second。）；outputthislineafter1secondreturnwaitSecond；｝）。then（（）｛console。log（Worldafter2sceond。）；outputthislineafter2second｝）；
　　ES8（ES2017）发布了一个更完美的async，await，直接让异步的写法看起来像同步的。1。10let，const替换varlet：通用变量，可以重写。const：一旦声明，其内容不可修改。因为数组和对象都是指针，所以可以在不改变指针的情况下增加或减少它们的内容。2。ES7（ES2016）2。1Array。prototype。includes（）
　　用于判断数组中是否包含指定值，如果包含则返回true，否则，返回false。因为返回布尔值，比indexOf的语义化更加清晰。constarr〔1，2，3，4，5〕；arr。include（3）；trueif（arr。include（3））｛。。。｝。。。EquivalenttothepreviouswritingofindexOfarr。indexOf（3）；2（returnitsarrayposition）Ifyouwanttowriteitintheif，youmustadd1，whichisnotasclearastheincludeinES7intermsofsemanticsif（arr。indexOf（3）1）｛。。。｝2。2指数运算符console。log（210）；1024equaltoconsole。log（Math。pow（2，10））；10243。ES8（ES2017）3。1async，await
　　异步函数是使用async关键字声明的函数，其中允许使用await关键字。async和await关键字使基于Promise的异步行为能够以更简洁的方式编写，避免显式配置Promise链的需要。asynctest（）｛try｛constresultawaitotherAsyncFunction（）；console。log（result）；outputresult｝catch（e）｛console。log（e）；CancatcherrorsifotherAsyncFunction（）throwsanerror｝｝3。2Object。values（）
　　返回对象自身属性的所有值，不包括继承的值。constexampleObj｛a：1，b：2，c：3，d：4｝；console。log（Object。value（exampleObj））；〔1，2，3，4〕；Todothesamethingbefore，usethefollowingnotation。muchverboseconstvaluesObject。keys（exampleObj）。map（（key）exampleObj〔key〕）；3。3Object。entries（）
　　返回一个可枚举的键，value中存储的是键的值。constObj｛a：1，b：2，c：3，d：4｝；console。log（Object。entries（Obj））；〔〔a，1〕，〔b，2〕，〔c，3〕，〔d，4〕〕；Usuallyusedwithforfor（const〔key，value〕ofObject。entries（Obj））｛console。log（key：｛key｝，value：｛value｝）；｝key：a，value：1key：b，value：2key：c，value：3key：d，value：43。4padStart（）padEnd（）
　　您可以在字符串的开头或结尾添加额外的内容，并将其填充到指定的长度。过去，这些功能通常是通过lodash等通用帮助工具包引入的。String。padStart（fillingLength，FillingContent）；Ifthecontenttobefilledistoomuchandexceedsthefilllength，itwillbefilledfromtheleftmosttotheupperlimitofthelength，andtheexcesswillbetruncated
　　最常用的情况应该是金额，填指定长度，不足补0。padStart100。padStart（5，0）；00100Ifthecontenttobepaddedexceedsthepaddinglength。Thenfillinfromthelefttotheupperlimitofthelength100。padStart（5，987）；98100padEnd100。padEnd（5，9）；10099Ifthecontenttobepaddedexceedsthepaddinglength。Thenfillinfromtherighttotheupperlimitofthelength100。padEnd（5，987）；100983。5trailingcomma
　　ECMAScript2017支持函数参数中的尾随逗号。functionf（p）｛｝functionf（p）｛｝（p）｛｝；（p）｛｝；3。6Object。getOwnPropertyDescriptors（）
　　获取您自己的描述符，一般开发业务需求通常不会使用这些描述符。constexampleObj｛a：1，b：2，c：3，d：4｝；Object。getOwnPropertyDescriptors（exampleObj）；｛a：｛｝，b：｛｝，c：｛｝，d：｛｝｝a：｛value：1，writable：true，enumerable：true，configurable：true｝b：｛value：2，writable：true，enumerable：true，configurable：true｝c：｛value：3，writable：true，enumerable：true，configurable：true｝d：｛value：4，writable：true，enumerable：true，configurable：true｝proto：Object3。7共享数组缓冲区（sharedarraybuffer）
　　SharedArrayBuffer是原始二进制数据的固定长度缓冲区，类似于ArrayBuffer。可用于在共享内存上创建数据，与ArrayBuffer不同，SharedArrayBuffer不能分离。3。8Atomicsobject
　　Atomics对象提供一组静态方法来对SharedArrayBuffer执行原子操作。如果一个多线程同时在同一个位置读写数据，原子操作保证了正在操作的数据符合预期：即在上一个子操作结束后执行下一个，操作不中断。
　　可以说是针对Node。Js中多线程Server的开发而加强的功能，在前端开发中使用的机会相当低，目前Chrome已经支持。3。ES9（ES2018）3。1awaitloop
　　在异步函数中，有时需要在同步for循环中使用异步（非同步）函数。for循环本身还是同步的，整个for循环会在循环中的异步函数执行完之前执行完，然后里面的异步函数会一个一个执行。ES9加入了异步迭代器，允许await配合使用for循环逐步执行异步操作。asyncfunctionprocess（array）｛forawait（constiofarray）｛doSomething（i）；｝｝3。2promise。finally（）
　　无论是成功（。then（））还是失败（。catch（）），都会在Promise之后执行的代码。functionprocess（）｛process1（）。then（process2）。then（process3）。catch（（err）｛console。log（err）；｝）。finally（（）｛console。log（itmustexecutnomattersuccessorfail）；｝）；｝3。3RestSpreadconstmyObject｛a：1，b：2，c：3，｝；const｛a，。。。r｝myObject；a1r｛b：2，c：3｝CanalsobeusedinfunctioninputparametersfunctionrestObjectInParam（｛a，。。。r｝）｛console。log（a）；1console。log（r）；｛b：2，c：3｝｝restObjectInParam（｛a：1，b：2，c：3，｝）；4。ES10（ES2019）4。1Array。prototype。flat（）Array。prototype。flatMap（）constarr1〔1，2，〔3，4〕〕；arr1。flat（）；〔1，2，3，4〕constarr2〔1，2，〔3，4，〔5，6〕〕〕；arr2。flat（）；〔1，2，3，4，〔5，6〕〕Passinanumberinflat，representingtheflatteningdeptharr2。flat（2）；〔1，2，3，4，5，6〕
　　下面是flatMap方法：letarr〔water，，fish〕；arr。map（（s）s。split（））；〔〔w，a，t，e，r〕，〔〕，〔f，i，s，h〕arr。flatMap（（s）s。split（））；〔w，a，t，e，r，，f，i，s，h〕4。2String。prototype。trimStart（）String。prototype。trimEnd（）
　　trimStart（）方法从字符串的开头删除空格，trimLeft（）是该方法的别名。constgreetingHelloworld！；console。log（greeting）；expectedoutput：Helloworld！；console。log（greeting。trimStart（））；expectedoutput：Helloworld！；
　　trimEnd（）方法删除字符串末尾的空格，trimRight（）是该方法的别名。constgreetingHelloworld！；console。log（greeting）；expectedoutput：Helloworld！；console。log（greeting。trimEnd（））；expectedoutput：Helloworld！；4。3Object。fromEntries（）
　　将键值对列表转换为对象。constentriesnewMap（〔〔foo，bar〕，〔baz，42〕，〕）；constobjObject。fromEntries（entries）；console。log（obj）；expectedoutput：Object｛foo：bar，baz：42｝4。4String。prototype。matchAll
　　matchAll（）方法返回一个迭代器，遍历将字符串与正则表达式匹配的所有结果，包括捕获组。constregexpt（e）（st（d？））g；conststrtest1test2；constarray〔。。。str。matchAll（regexp）〕；console。log（array〔0〕）；expectedoutput：Array〔test1，e，st1，1〕console。log（array〔1〕）；expectedoutput：Array〔test2，e，st2，2〕4。4BigIntconsttheBiggestInt9007199254740991n；constalsoHugeBigInt（9007199254740991）；9007199254740991nconsthugeStringBigInt（9007199254740991）；9007199254740991nconsthugeHexBigInt（0x1fffffffffffff）；9007199254740991nconsthugeBinBigInt（0b11111111111111111111111111111111111111111111111111111）；9007199254740991n5。ES11（ES2020）5。1Promise。allSettled（）
　　Promise。allSettled（）方法返回一个Promise，当所有给定的Promise都已完成或被拒绝时，该Promise就会完成，其中每个对象都描述每个Promise的结果。
　　当您有多个不依赖于彼此成功完成的异步任务时，或者当您总是想知道每个Promise的结果时通常会使用它。
　　相反，如果任务相互依赖、或者您希望其中任何一个Promise失败后则立即拒绝，则由Promise。all（）返回的Promise可能更合适。constpromise1Promise。resolve（3）；constpromise2newPromise（（resolve，reject）setTimeout（reject，100，foo））；constpromises〔promise1，promise2〕；Promise。allSettled（promises）。then（（results）results。forEach（（result）console。log（result。status）））；expectedoutput：fulfilledrejected5。2Optional？constusernameuser？。nameguest；5。3Nullishcoalescingoperator？？
　　在JavaScript中，0、null或undefined会自动转为false，但有时候希望将返回值设置为0。constusernameuser。level？？nolevel；output0。iflevelisnotavailable，itbecomesnolevel。5。4Dynamicimport动态引入el。onclick（）｛import（jslogger。js）。then（（module）｛module。doSomthing（）；｝）。catch（（err）｛handleError（err）；｝）；｝；5。5GlobalThis
　　全局globalThis属性包含全局this值，类似于全局对象。functioncanMakeHTTPRequest（）｛returntypeofglobalThis。XMLHttpRequestfunction；｝console。log（canMakeHTTPRequest（））；expectedoutput（inabrowser）：true6。ES12（ES2021）6。1Promise。any（）
　　Promise。any（）接受一个可迭代的Promise对象，每当可迭代对象中的任何一个Promisefullfill时它都返回一个Promise，其中包含已fullfill的Promise的值。如果所有的Promisereject则返回AggregateError对象，其是ERROR对象的一个子类，默认搜集所有Error并分组。constp1newPromise（（resolve）｛setTimeout（（）｛resolve（p1resolvedvalue）；｝，1000）；｝）；constp2newPromise（（resolve）｛setTimeout（（）｛resolve（p2resolvedvalue）；｝，500）；｝）；constp3newPromise（（resolve）｛setTimeout（（）｛resolve（p3resolvedvalue）；｝，1800）；｝）；Promise。any（〔p1，p2，p3〕）。then（（value）｛console。log（value）；｝）；p2resolvedvalue6。2逻辑赋值运算符
　　在开发过程中，可以使用在ES2020引入的逻辑运算符、和？？（Nullishcoalescingoperator）来解决一些问题。而ES2021会提出，，？？，概念类似于：letb2；b1；equaltobb1letanull；asomerandomtext；abecometosomerandomtextequalaasomerandomtextletcsomerandomtexts；cnull；cbecometonullequaltoccnullletdnull；d？？false；dbecometofalseequaltodd？？false6。3弱引用（WeakRef）
　　WeakRef对象持有对对象的弱引用，称为其目标或引用对象。对对象的弱引用是不会阻止对象被垃圾收集器回收的引用。
　　普通（或强）引用将对象保存在内存中，当一个对象不再具有任何强引用时，JavaScript引擎的垃圾收集器可能会销毁该对象并回收其内存，如果发生这种情况，您将无法再从弱引用中获取对象。7。ES13（ES2022）
　　期待不一样的东西参考资料原文链接：https：medium。com
　　waterfishfromes6toes13f72d4840986a
　　文字封面图片：https：app。daily。devposts5k4Dlnc3E