这些ES7ES12的知识点你都掌握了嘛？

　　Array。prototype。includes（）
　　includes（）方法用来判断一个数组是否包含一个指定的值，如果包含则返回true，否则返回false。语法arr。includes（valueToFind〔，fromIndex〕）
　　valueToFind，需要查找的元素值。
　　fromIndex可选从fromIndex索引处开始查找valueToFind。如果为负值（即从末尾开始往前跳fromIndex的绝对值个索引，然后往后搜寻）。默认为0。示例constarr〔es6，es7，es8〕console。log（arr。includes（es7））trueconsole。log（arr。includes（es7，1））trueconsole。log（arr。includes（es7，2））falseconsole。log（arr。includes（es7，1））；fsleconsole。log（arr。includes（es7，2））；true注意点
　　使用includes（）查找字符串是区分大小写的。constarr〔es6，es7，es8，a〕；console。log（arr。includes（A））；false
　　使用includes（）只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些是无法判断的。constarr〔es6，〔es7，es8〕，es9，｛name：jimmy｝〕console。log（arr。includes（〔es7，es8〕））；falseconsole。log（arr。includes（｛name：jimmy｝））；false
　　能识别NaN，indexOf是不能识别NaN的constarr〔es6，es7，NaN，es8〕console。log（arr。includes（NaN））trueconsole。log（arr。indexOf（NaN））1
　　最后，如果只想知道某个值是否在数组中存在，而并不关心它的索引位置，建议使用includes（），如果想获取一个值在数组中的位置，那么使用indexOf方法。幂运算符
　　比如我们想求2的10次方。自己写函数实现functionpow（x，y）｛letresult1for（leti0；iy；i）｛resultx｝returnresult｝console。log（pow（2，10））1024Math。pow（）console。log（Math。pow（2，10））；1024幂运算符console。log（210）；1024
　　基本求幂23832932。515。5884572681198961010。1NaN2NaN
　　注意
　　幂运算符的两个号之间不能出现空格，否则语法会报错。ES2017（ES8）Object。values（）
　　Object。values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。constobj｛name：jimmy，age：18，height：188，｝；console。log（Object。values（obj））；〔jimmy，18，188〕Object。entries（）
　　Object。entries（）方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组。constobj｛name：jimmy，age：18，height：188，｝；console。log（Object。entries（obj））；〔〔name，jimmy〕，〔age，18〕，〔height，188〕〕console。log（Object。entries（〔1，2，3〕））；〔〔0，1〕，〔1，2〕，〔2，3〕〕Object。getOwnPropertyDescriptors（）
　　Object。getOwnPropertyDescriptors（）方法用来获取一个对象的所有自身属性的描述符。constobj｛name：jimmy，age：18，｝；constdescObject。getOwnPropertyDescriptors（obj）；console。log（desc）；打印结果｛name：｛value：jimmy，writable：true，enumerable：true，configurable：true｝，age：｛value：18，writable：true，enumerable：true，configurable：true｝｝
　　上面打印结果中的value表示当前对象的默认值writable表示对象属性是否可以修改enumerable表示当前这个属性是否可以出现在对象的枚举属性中configurable表示当前对象的属性能否用delete删除
　　那这些对象的属性我们怎么设置和修改他们呢，我们可以使用es5的Object。defineProperty（）constobj｛｝；Object。defineProperty（obj，name，｛value：jimmy，writable：true，configurable：true，enumerable：true，｝）；Object。defineProperty（obj，age，｛value：34，writable：true，configurable：true，enumerable：true，｝）；console。log（obj）；｛name：jimmy，age：34｝
　　接下来我们演示下，一些属性设置为false的情况constobj｛｝；Object。defineProperty（obj，name，｛value：jimmy，writable：false，configurable：false，enumerable：true，｝）；console。log（obj）；｛name：jimmy｝obj。namechimmy；console。log（obj）；｛name：jimmy｝deleteobj。nameconsole。log（obj）；｛name：jimmy｝
　　我们可以看到设置writable：false和configurable：false，为false时，对象的name对象的值不能改变和不能被删除，打印出来还是原来的对象。
　　设置enumerable为false时constobj｛｝；Object。defineProperty（obj，name，｛value：jimmy，writable：true，configurable：true，enumerable：false，｝）；console。log（obj）；｛｝for（letkeyinobj）｛console。log（key）；｝
　　当设置enumerable：false时，表示对象的属性不可被枚举，这时打印对象为空，遍历对象的键也为空。String。prototype。padStart
　　把指定字符串填充到字符串头部，返回新字符串。语法
　　str。padStart（targetLength〔，padString〕）targetLength
　　当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。padString可选
　　填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为示例abc。padStart（10）；abcabc。padStart（10，foo）；foofoofabcabc。padStart（6，123465）；123abcabc。padStart（8，0）；00000abcabc。padStart（1）；abc应用场景
　　日期格式化：yyyymmdd的格式：constnownewDate（）constyearnow。getFullYear（）月份和日期如果是一位前面给它填充一个0constmonth（now。getMonth（）1）。toString（）。padStart（2，0）constday（now。getDate（））。toString（）。padStart（2，0）console。log（year，month，day）console。log（｛year｝｛month｝｛day｝）输入今天的日期20211231
　　数字替换（手机号，银行卡号等）consttel18781268679constnewTeltel。slice（4）。padStart（tel。length，）console。log（newTel）5678String。prototype。padEnd
　　把指定字符串填充到字符串尾部，返回新字符串。
　　语法同上示例abc。padEnd（10）；abcabc。padEnd（10，foo）；abcfoofoofabc。padEnd（6，123456）；abc123abc。padEnd（1）；abc应用场景
　　在JS前端我们处理时间戳的时候单位是ms毫秒，但是，后端同学返回的时间戳则不一样是毫秒，可能只有10位，以s秒为单位。所以，我们在前端处理这个时间戳的时候，保险起见，要先做一个13位的补全，保证单位是毫秒。伪代码console。log（newDate（）。getTime（））时间戳13位的timestampString（timestamp）。padEnd（13，0）尾逗号Trailingcommas
　　ES8允许函数的最后一个参数有尾逗号（Trailingcomma）。此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。functionclownsEverywhere（param1，param2）｛。。。｝clownsEverywhere（foo，bar）
　　上面代码中，如果在param2或bar后面加一个逗号，就会报错。
　　如果像上面这样，将参数写成多行（即每个参数占据一行），以后修改代码的时候，想为函数clownsEverywhere添加第三个参数，或者调整参数的次序，就势必要在原来最后一个参数后面添加一个逗号。这对于版本管理系统来说，就会显示添加逗号的那一行也发生了变动。这看上去有点冗余，因此新的语法允许定义和调用时，尾部直接可以加上一个逗号。functionclownsEverywhere（param1，param2，）｛。。。｝clownsEverywhere（foo，bar，）
　　这样的规定也使得，函数参数与数组和对象的尾逗号规则，保持一致了。asyncawait介绍
　　我们都知道使用Promise能很好地解决回调地狱的问题，但如果处理流程比较复杂的话，那么整段代码将充斥着then，语义化不明显，代码不能很好地表示执行流程，那有没有比Promise更优雅的异步方式呢？那就是asyncawait！我们一起来揭开它神秘的面撒吧！
　　前面添加了async的函数在执行后都会自动返回一个Promise对象：functionfoo（）｛returnjimmy｝console。log（foo（））jimmy
　　添加async后asyncfunctionfoo（）｛returnjimmyPromise。resolve（jimmy）｝console。log（foo（））Promisefoo（）
　　async函数中使用await，那么await这里的代码就会变成同步的了，意思就是说只有等await后面的Promise执行完成得到结果才会继续下去，await就是等待。请看下面的示例：functiontimeout（）｛returnnewPromise（resolve｛setTimeout（（）｛console。log（1）resolve（）｝，1000）｝）｝不加async和await是2、1加了是1、2asyncfunctionfoo（）｛awaittimeout（）console。log（2）｝foo（）使用场景
　　假如有这样一个使用场景：需要先请求a链接，等返回信息之后，再请求b链接的另外一个资源。下面代码展示的是使用fetch来实现这样的需求，fetch被定义在window对象中，它返回的是一个Promise对象。fetch（https：blog。csdn。net）。then（response｛console。log（response）returnfetch（https：juejin。im）｝）。then（response｛console。log（response）｝）。catch（error｛console。log（error）｝）
　　虽然上述代码可以实现这个需求，但语义化不明显，代码不能很好地表示执行流程。基于这个原因，ES8引入了asyncawait，这是JavaScript异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰。asyncfunctionfoo（）｛try｛letresponse1awaitfetch（https：blog。csdn。net）console。log（response1）letresponse2awaitfetch（https：juejin。im）console。log（response2）｝catch（err）｛console。error（err）｝｝foo（）
　　通过上面代码，你会发现整个异步处理的逻辑都是使用同步代码的方式来实现的，而且还支持trycatch来捕获异常，这感觉就在写同步代码，所以是非常符合人的线性思维的。注意点await只能在async标记的函数内部使用，单独使用会触发Syntaxerror。await后面需要跟异步操作，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。asyncawait的缺陷
　　了解Asyncawait是非常有用的，但还有一些缺点需要考虑。
　　Asyncawait让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。await关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。
　　这意味着您的代码可能会因为大量await的promises相继发生而变慢。每个await都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用asyncawait时那样）。
　　有一种模式可以缓解这个问题通过将Promise对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。如果想更加深入的了解，请参考MDN〔1〕ES2018（ES9）ObjectRestSpread
　　在ES9新增Object的RestSpread方法，直接看下示例：constinput｛a：1，b：2，c：3，｝constoutput｛。。。input，c：4｝console。log（output）｛a：1，b：2，c：4｝
　　这块代码展示了spread语法，可以把input对象的数据都拓展到output对象，这个功能很实用。需要注意的是，如果存在相同的属性名，只有最后一个会生效。注意点constobj｛x：｛y：10｝｝；constcopy1｛。。。obj｝；constcopy2｛。。。obj｝；obj。x。yjimmy；console。log（copy1，copy2）；x：｛y：jimmy｝x：｛y：jimmy｝console。log（copy1。xcopy2。x）；true
　　如果属性的值是一个对象的话，该对象的引用会被拷贝，而不是生成一个新的对象。
　　我们再来看下Objectrest的示例：constinput｛a：1，b：2，c：3｝let｛a，。。。rest｝inputconsole。log（a，rest）1｛b：2，c：3｝
　　当对象keyvalue不确定的时候，把必选的key赋值给变量，用一个变量收敛其他可选的key数据，这在之前是做不到的。注意，rest属性必须始终出现在对象的末尾，否则将抛出错误。forawaitof
　　异步迭代器（forawaitof）：循环等待每个Promise对象变为resolved状态才进入下一步。
　　我们知道for。。。of是同步运行的，看如下代码functionTimeOut（time）｛returnnewPromise（function（resolve，reject）｛setTimeout（function（）｛resolve（time）｝，time）｝）｝asyncfunctiontest（）｛letarr〔TimeOut（2000），TimeOut（1000），TimeOut（3000）〕for（letitemofarr）｛console。log（Date。now（），item。then（console。log））｝｝test（）
　　上面打印结果如下图
　　1640436987（1）。png
　　上述代码证实了forof方法不能遍历异步迭代器，得到的结果并不是我们所期待的，于是forawaitof就粉墨登场啦！
　　ES9中可以用for。。。await。。。of的语法来操作functionTimeOut（time）｛returnnewPromise（function（resolve，reject）｛setTimeout（function（）｛resolve（time）｝，time）｝）｝asyncfunctiontest（）｛letarr〔TimeOut（2000），TimeOut（1000），TimeOut（3000）〕forawait（letitemofarr）｛console。log（Date。now（），item）｝｝test（）156009234573020001560092345730100015600923463363000
　　forawaitof环等待每个Promise对象变为resolved状态才进入下一步。所有打印的结果为2000，1000，3000Promise。prototype。finally（）
　　Promise。prototype。finally（）方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then（）和catch（）后，都会执行finally指定的回调函数。这为指定执行完promise后，无论结果是fulfilled还是rejected都需要执行的代码提供了一种方式，避免同样的语句需要在then（）和catch（）中各写一次的情况。示例newPromise（（resolve，reject）｛setTimeout（（）｛resolve（success）reject（fail）｝，1000）｝）。then（res｛console。log（res）｝）。catch（err｛console。log（err）｝）。finally（（）｛console。log（finally）｝）使用场景
　　loading关闭
　　需要每次发送请求，都会有loading提示，请求发送完毕，就需要关闭loading提示框，不然界面就无法被点击。不管请求成功或是失败，这个loading都需要关闭掉，这时把关闭loading的代码写在finally里再合适不过了String扩展
　　放松对标签模板里字符串转义的限制，遇到不合法的字符串转义会返回undefined，并且从raw上可获取原字符串。
　　下面是一个es6的标签模板如果对这个语法感到陌生，请参考标签模板〔2〕constfoo（a，b，c）｛console。log（a）console。log（b）console。log（c）｝constnamejimmyconstage18foo这是｛name｝，他的年龄是｛age｝岁
　　参数打印如下：
　　ES9开始，模板字符串允许嵌套支持常见转义序列，移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。functionfoo（a，b，c）｛console。log（a，b，c）｝在标签函数中使用unicode字符u｛61｝对应的值为aunicode字符u｛62｝对应的值为bunicode是一个无效的unicode字符foou｛61｝andu｛62｝foou｛61｝andunicode
　　1640441321（1）。png注意点
　　在模板字符串中，如果输入无效的unicode字符，还是会报错。只有在便签模板中从es9开始才不会报错。letstringu｛61｝andunicode；console。log（string）；UncaughtSyntaxError：InvalidUnicodeescapesequenceES2019（ES10）Object。fromEntries（）
　　方法Object。fromEntries（）把键值对列表转换为一个对象，这个方法是和Object。entries（）相对的。Object。fromEntries（〔〔foo，1〕，〔bar，2〕〕）｛foo：1，bar：2｝案例1：Object转换操作constobj｛name：jimmy，age：18｝constentriesObject。entries（obj）console。log（entries）〔Array（2），Array（2）〕ES10constfromEntriesObject。fromEntries（entries）console。log（fromEntries）｛name：jimmy，age：18｝案例2：Map转ObjectconstmapnewMap（）map。set（name，jimmy）map。set（age，18）console。log（map）｛namejimmy，age18｝constobjObject。fromEntries（map）console。log（obj）｛name：jimmy，age：18｝案例3：过滤
　　course表示所有课程，想请求课程分数大于80的课程组成的对象：constcourse｛math：80，english：85，chinese：90｝constresObject。entries（course）。filter（（〔key，val〕）val80）console。log（res）〔〔english，85〕，〔chinese，90〕〕console。log（Object。fromEntries（res））｛english：85，chinese：90｝案例4：url的search参数转换leturlhttps：www。baidu。com？namejimmyage18height1。88queryString为window。location。searchconstqueryString？namejimmyage18height1。88；constqueryParamsnewURLSearchParams（queryString）；constparamObjObject。fromEntries（queryParams）；console。log（paramObj）；｛name：jimmy，age：18，height：1。88｝Array。prototype。flat（）语法letnewArrayarr。flat（〔depth〕）depth可选
　　指定要提取嵌套数组的结构深度，默认值为1。示例
　　flat（）方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。constarr1〔0，1，2，〔3，4〕〕；console。log（arr1。flat（））；〔0，1，2，3，4〕constarr2〔0，1，2，〔〔〔3，4〕〕〕〕；console。log（arr2。flat（2））；〔0，1，2，〔3，4〕〕使用Infinity，可展开任意深度的嵌套数组vararr4〔1，2，〔3，4，〔5，6，〔7，8，〔9，10〕〕〕〕〕；arr4。flat（Infinity）；〔1，2，3，4，5，6，7，8，9，10〕flat（）方法会移除数组中的空项：vararr5〔1，2，，4，5〕；arr5。flat（）；〔1，2，4，5〕Array。prototype。flatMap（）
　　flatMap（）方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。从方法的名字上也可以看出来它包含两部分功能一个是map，一个是flat（深度为1）。语法varnewarrayarr。flatMap（functioncallback（currentValue〔，index〔，array〕〕）｛返回新数组的元素｝〔，thisArg〕）callback
　　可以生成一个新数组中的元素的函数，可以传入三个参数：
　　currentValue
　　当前正在数组中处理的元素
　　index
　　可选数组中正在处理的当前元素的索引。
　　array
　　可选被调用的map数组thisArg可选
　　执行callback函数时使用的this值。示例constnumbers〔1，2，3〕numbers。map（x〔x2〕）〔〔2〕，〔4〕，〔6〕〕numbers。flatMap（x〔x2〕）〔2，4，6〕
　　这个示例可以简单对比下map和flatMap的区别。当然还可以看下下面的示例：letarr〔今天天气不错，，早上好〕arr。map（ss。split（））〔〔今，天，天，气，不，错〕，〔〕，〔早，上，好〕〕arr。flatMap（ss。split（））〔今，天，天，气，不，错，，早，上，好〕
　　flatMap方法与map方法和深度depth为1的flat几乎相同。String。prototype。trimStart（）
　　trimStart（）方法从字符串的开头删除空格，trimLeft（）是此方法的别名。letstrfooconsole。log（str。length）8strstr。trimStart（）或str。trimLeft（）console。log（str。length）5String。prototype。trimEnd（）
　　trimEnd（）方法从一个字符串的右端移除空白字符，trimRight是trimEnd的别名。letstrfooconsole。log（str。length）8strstr。trimEnd（）或str。trimRight（）console。log（str。length）6可选的CatchBinding
　　在ES10之前我们都是这样捕获异常的：try｛tryCode｝catch（err）｛catchCode｝
　　在这里err是必须的参数，在ES10可以省略这个参数：try｛console。log（Foobar）｝catch｛console。error（Bar）｝应用
　　验证参数是否为json格式
　　这个需求我们只需要返回true或false，并不关心catch的参数。constvalidJSONjson｛try｛JSON。parse（json）returntrue｝catch｛returnfalse｝｝Symbol。prototype。description
　　我们知道，Symbol的描述只被存储在内部的Description，没有直接对外暴露，我们只有调用Symbol的toString（）时才可以读取这个属性：constnameSymbol（es）console。log（name。toString（））Symbol（es）console。log（name）Symbol（es）console。log（nameSymbol（es））falseconsole。log（name。toString（）Symbol（es））true
　　现在可以通过description方法获取Symbol的描述：constnameSymbol（es）console。log（name。description）esname。descriptiones2只读属性并不能修改描述符console。log（name。descriptiones）true如果没有描述符输入undefinedconsts2Symbol（）console。log（s2。description）undefinedJSON。stringify（）增强能力
　　JSON。stringify在ES10修复了对于一些超出范围的Unicode展示错误的问题。因为JSON都是被编码成UTF8，所以遇到0xD8000xDFFF之内的字符会因为无法编码成UTF8进而导致显示错误。在ES10它会用转义字符的方式来处理这部分字符而非编码的方式，这样就会正常显示了。emoji多字节的一个字符console。log（JSON。stringify（））打印出笑脸如果我们只去其中的一部分这其实是个无效的字符串之前的版本，这些字符将替换为特殊字符，而现在将未配对的代理代码点表示为JSON转义序列console。log（JSON。stringify（））修订Function。prototype。toString（）
　　以前函数的toString方法来自Object。prototype。toString（），现在的Function。prototype。toString（）方法返回一个表示当前函数源代码的字符串。以前只会返回这个函数，不包含注释、空格等。functionfoo（）｛es10新特性console。log（imooc）｝console。log（foo。toString（））打印如下functionfoo（）｛es10新特性console。log（imooc）；｝
　　将返回注释、空格和语法等详细信息。ES2020（ES11）空值合并运算符（NullishcoalescingOperator）
　　空值合并操作符（？？）是一个逻辑操作符，当左侧的操作数为null或者undefined时，返回其右侧操作数，否则返回左侧操作数。constfooundefined？？fooconstbarnull？？barconsole。log（foo）fooconsole。log（bar）bar
　　与逻辑或操作符（）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，0，NaN，false）时。见下面的例子。constfoo？？defaultstring；constfoo2defaultstring；console。log（foo）；console。log（foo2）；defaultstringconstbaz0？？42；constbaz2042；console。log（baz）；0console。log（baz2）；42注意点
　　将？？直接与AND（）和OR（）操作符组合使用是不可取的。nullundefined？？foo；抛出SyntaxErrortrueundefined？？foo；抛出SyntaxError可选链Optionalchaining介绍
　　可选链操作符（？。）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。？。操作符的功能类似于。链式操作符，不同之处在于，在引用为null或者undefined的情况下不会引起错误，该表达式短路返回值是undefined。与函数调用一起使用时，如果给定的函数不存在，则返回undefined。
　　当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。constuser｛address：｛street：xx街道，getNum（）｛return80号｝｝｝
　　在之前的语法中，想获取到深层属性或方法，不得不做前置校验，否则很容易命中UncaughtTypeError：Cannotreadproperty。。。这种错误，这极有可能让你整个应用挂掉。conststreetuseruser。addressuser。address。streetconstnumuseruser。addressuser。address。getNumuser。address。getNum（）console。log（street，num）
　　用了OptionalChaining，上面代码会变成conststreet2user？。address？。streetconstnum2user？。address？。getNum？。（）console。log（street2，num2）
　　可选链中的？表示如果问号左边表达式有值，就会继续查询问号后面的字段。根据上面可以看出，用可选链可以大量简化类似繁琐的前置校验操作，而且更安全。常见用法对象中使用letobj｛name：jimmy，age：18，｝；letpropertyage；letnameobj？。name；letageobj？。age；letagesobj？。〔property〕；letsexobj？。sex；console。log（name）；jimmyconsole。log（age）；18console。log（ages）；18console。log（sex）；undefined数组中使用letarr〔1，2，2〕；letarrayItemarr？。〔42〕；undefined函数中使用letobj｛func：function（）｛console。log（Iamfunc）；｝，｝；obj？。func（）；Iamfunc与空值合并操作符一起使用letcustomer｛name：jimmy，details：｛age：18｝｝；letcustomerCitycustomer？。city？？成都；console。log（customerCity）；成都注意点
　　可选链不能用于赋值letobject｛｝；object？。property1；UncaughtSyntaxError：InvalidlefthandsideinassignmentglobalThis
　　在以前，从不同的JavaScript环境中获取全局对象需要不同的语句。在Web中，可以通过window、self取到全局对象，在Node。js中，它们都无法获取，必须使用global。
　　在松散模式下，可以在函数中返回this来获取全局对象，但是在严格模式和模块环境下，this会返回undefined。
　　以前想要获取全局对象，可通过一个全局函数constgetGlobal（）｛if（typeofself！undefined）｛returnself｝if（typeofwindow！undefined）｛returnwindow｝if（typeofglobal！undefined）｛returnglobal｝thrownewError（无法找到全局对象）｝constglobalsgetGlobal（）console。log（globals）
　　现在globalThis提供了一个标准的方式来获取不同环境下的全局this对象（也就是全局对象自身）。不像window或者self这些属性，它确保可以在有无窗口的各种环境下正常工作。所以，你可以安心的使用globalThis，不必担心它的运行环境。
　　为便于记忆，你只需要记住，全局作用域中的this就是globalThis。以后就用globalThis就行了。BigInt
　　BigInt是一种内置对象，它提供了一种方法来表示大于2的53次方1的整数。这原本是Javascript中可以用Number表示的最大数字。BigInt可以表示任意大的整数。
　　使用BigInt有两种方式：方式一：数字后面增加nconstbigInt9007199254740993nconsole。log（bigInt）console。log（typeofbigInt）bigintBigInt和〔Number〕不是严格相等的，但是宽松相等的。console。log（1n1）trueconsole。log（1n1）falseNumber和BigInt可以进行比较。1n2true2n1true方式二：使用BigInt函数constbigIntNumBigInt（9007199254740993n）console。log（bigIntNum）运算letnumberBigInt（2）；letanumber2n；4nletbnumber10n；20nletcnumber10n；8nconsole。log（a）；console。log（b）；console。log（c）；注意点
　　BigInt不能用于〔Math〕对象中的方法；不能和任何〔Number〕实例混合运算，两者必须转换成同一种类型。在两种类型来回转换时要小心，因为BigInt变量在转换成〔Number〕变量时可能会丢失精度。String。prototype。matchAll（）
　　matchAll（）方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。constregexpt（e）（st（d？））g；conststrtest1test2；constarray〔。。。str。matchAll（regexp）〕；console。log（array〔0〕）；〔test1，e，st1，1〕console。log（array〔1〕）；〔test2，e，st2，2〕Promise。allSettled（）
　　我们都知道Promise。all（）具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常（reject），所有任务都会挂掉，Promise直接进入reject状态。
　　场景：现在页面上有三个请求，分别请求不同的数据，如果一个接口服务异常，整个都是失败的，都无法渲染出数据
　　我们需要一种机制，如果并发任务中，无论一个任务正常或者异常，都会返回对应的的状态，这就是Promise。allSettled的作用constpromise1（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（promise1）；reject（errorpromise1）；｝，3000）；｝）；｝；constpromise2（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（promise2）；reject（errorpromise2）；｝，1000）；｝）；｝；constpromise3（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（promise3）；reject（errorpromise3）；｝，2000）；｝）；｝；Promise。all会走到catch里面Promise。all（〔promise1（），promise2（），promise3（）〕）。then（（res）｛console。log（res）；｝）。catch（（error）｛console。log（error，error）；errorpromise3｝）；Promise。allSettled不管有没有错误，三个的状态都会返回Promise。allSettled（〔promise1（），promise2（），promise3（）〕）。then（（res）｛console。log（res）；打印结果〔｛status：fulfilled，value：promise1｝，｛status：fulfilled，value：promise2｝，｛status：rejected，reason：errorpromise3｝〕｝）。catch（（error）｛console。log（error，error）；｝）；DynamicImport（按需import）
　　import（）可以在需要的时候，再加载某个模块。button。addEventListener（click，event｛import（。dialogBox。js）。then（dialogBox｛dialogBox。open（）；｝）。catch（error｛Errorhandling｝）｝）；
　　上面代码中，import（）方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。ES2021（ES12）逻辑运算符和赋值表达式（，，？？）
　　逻辑与赋值xy等效于：x（xy）；
　　上面的意思是，当x为真时，xy。具体请看下面的示例：leta1；letb0；a2；console。log（a）；2b2；console。log（b）；0
　　逻辑或赋值（xy）运算仅在x为false时赋值。
　　xy等同于：x（xy）；consta｛duration：50，title：｝；a。duration10；console。log（a。duration）；50a。titletitleisempty。；console。log（a。title）；titleisempty？？
　　逻辑空赋值运算符（x？？y）仅在x是nullish〔3〕（null或undefined）时对其赋值。
　　x？？y等价于：x？？（xy）；
　　示例一consta｛duration：50｝；a。duration？？10；console。log（a。duration）；50a。speed？？25；console。log（a。speed）；25
　　示例二functionconfig（options）｛options。duration？？100；options。speed？？25；returnoptions；｝config（｛duration：125｝）；｛duration：125，speed：25｝config（｛｝）；｛duration：100，speed：25｝String。prototype。replaceAll（）介绍
　　replaceAll（）方法返回一个新字符串，新字符串中所有满足pattern的部分都会被replacement替换。pattern可以是一个字符串或一个RegExp，replacement可以是一个字符串或一个在每次匹配被调用的函数。
　　原始字符串保持不变。示例aabbcc。replaceAll（b，。）；aa。。cc
　　使用正则表达式搜索值时，它必须是全局的。aabbcc。replaceAll（b，。）；TypeError：replaceAllmustbecalledwithaglobalRegExp
　　这将可以正常运行：aabbcc。replaceAll（bg，。）；aa。。cc数字分隔符
　　欧美语言中，较长的数值允许每三位添加一个分隔符（通常是一个逗号），增加数值的可读性。比如，1000可以写作1，000。
　　ES2021中允许JavaScript的数值使用下划线（）作为分隔符。letbudget1000000000000；budget1012true
　　这个数值分隔符没有指定间隔的位数，也就是说，可以每三位添加一个分隔符，也可以每一位、每两位、每四位添加一个。1230012300true12345001234500true12345001234500true
　　小数和科学计数法也可以使用数值分隔符。小数0。000001科学计数法1e10000
　　数值分隔符有几个使用注意点。不能放在数值的最前面（leading）或最后面（trailing）。不能两个或两个以上的分隔符连在一起。小数点的前后不能有分隔符。科学计数法里面，表示指数的e或E前后不能有分隔符。
　　下面的写法都会报错。全部报错3。1413。1411e121e1212345614643011464301Promise。any
　　方法接受一组Promise实例作为参数，包装成一个新的Promise实例返回。constpromise1（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（promise1）；reject（errorpromise1）；｝，3000）；｝）；｝；constpromise2（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（promise2）；reject（errorpromise2）；｝，1000）；｝）；｝；constpromise3（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（promise3）；reject（errorpromise3）；｝，2000）；｝）；｝；Promise。any（〔promise1（），promise2（），promise3（）〕）。then（（first）｛只要有一个请求成功就会返回第一个请求成功的console。log（first）；会返回promise2｝）。catch（（error）｛所有三个全部请求失败才会来到这里console。log（error，error）；｝）；
　　只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。
　　Promise。any（）跟Promise。race（）方法很像，只有一点不同，就是Promise。any（）不会因为某个Promise变成rejected状态而结束，必须等到所有参数Promise变成rejected状态才会结束。