20个JavaScript技术善于利用，可提升自己的开发效率

　　1、Array。prototype。includes（）
　　includes（）方法用来判断一个数组中是否包含某个指定的值，包含则返回true，否则返回false。
　　语法
　　arr。includes（findVal〔，index〕）
　　index可选，表示从index索引处开始往后查找。如果为负值，表示从末尾开始往前跳index个索引，然后往后查找。默认值为0。
　　letarr〔leo，lion，ggj〕
　　console。log（arr。includes（leo））true
　　console。log（arr。includes（gao））false
　　console。log（arr。includes（ggj，1））true
　　console。log（arr。includes（Leo））false
　　注意：使用includes（）查找字符串是区分大小写的。
　　2、幂运算符
　　求某个数的幂，之前一般使用Math。pow（）
　　console。log（Math。pow（2，10））；1024
　　使用幂运算符
　　console。log（210）；1024
　　注意：幂运算符的两个号之间不能出现空格，否则语法会报错。
　　3、Object。values（）
　　Object。values（）返回一个新数组，里面的成员是传入的参数对象自身的（不含继承的）所有可遍历属性对应的值
　　letobj｛
　　name：leo，
　　age：18，
　　like：music
　　｝；
　　console。log（Object。values（obj））；〔leo，18，music〕
　　4、Object。entries（）
　　Object。entries（）方法返回一个新数组，里面的成员是传入的参数对象自身的（不含继承的）所有可遍历属性的键值对数组
　　letobj｛
　　name：leo，
　　age：18，
　　like：music
　　｝；
　　console。log（Object。entries（obj））；〔〔name，leo〕，〔age，18〕，〔like，music〕
　　扩展：Object。keys（）方法返回一个新数组，里面的成员是传入的参数对象自身的（不含继承的）所有可遍历的属性
　　letobj｛
　　name：leo，
　　age：18，
　　like：music
　　｝；
　　console。log（Object。keys（obj））；〔name，age，like〕
　　注意：如果传入的参数是数组，则返回的是所有可遍历的索引。
　　5、Object。getOwnPropertyDescriptors（）
　　Object。getOwnPropertyDescriptors（）方法用来获取传入对象的所有自身属性的描述符
　　letobj｛
　　name：leo，
　　age：18，
　　like：music
　　｝；
　　letdescObject。getOwnPropertyDescriptors（obj）；
　　console。log（desc）；
　　打印结果
　　｛
　　name：｛
　　value：leo，value表示当前对象的默认值
　　writable：true，writable表示对象属性是否可以修改
　　enumerable：true，enumerable表示当前这个属性是否可以出现在对象的枚举属性中
　　configurable：true表示当前对象的属性能否用delete删除
　　｝，
　　age：｛
　　value：18，
　　writable：true，
　　enumerable：true，
　　configurable：true
　　｝，
　　like：｛
　　value：music，
　　writable：true，
　　enumerable：true，
　　configurable：true
　　｝
　　｝
　　我们可以使用Object。defineProperty（）修改属性
　　letobj｛｝；
　　Object。defineProperty（obj，name，｛
　　value：leo，
　　writable：false，设置为false，该属性无法修改
　　configurable：false，设置为false，该属性不支持delete删除
　　enumerable：false，设置为false，该属性不可被枚举
　　｝）；
　　验证
　　console。log（obj）；｛name：leo｝
　　obj。
　　console。log（obj）；｛name：leo｝
　　deleteobj。name
　　console。log（obj）；｛name：leo｝
　　for（letkeyinobj）｛
　　console。log（key）；
　　｝
　　6、String。prototype。padStart
　　把指定字符串填充到字符串头部，返回新字符串。
　　语法
　　str。padStart（targetLength〔，padString〕）
　　targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
　　padString：可选，如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。默认值为。
　　abc。padStart（10）；abc，填充默认值
　　abc。padStart（10，）；abc
　　abc。padStart（6，123465）；123abc
　　abc。padStart（1）；abc
　　举例
　　日期格式化：yyyymmdd的格式
　　letdatenewDate（）；
　　letyeardate。getFullYear（）；
　　月日如果是一位前面给它填充一个0
　　letmonth（date。getMonth（）1）。toString（）。padStart（2，0）；
　　letday（date。getDate（））。toString（）。padStart（2，0）；
　　console。log（｛year｝｛month｝｛day｝）；20220109
　　数字替换（手机号，银行卡号等）
　　lettel18937640746
　　letnewTeltel。slice（4）。padStart（tel。length，）
　　console。log（newTel）0746
　　7、String。prototype。padEnd
　　把指定字符串填充到字符串尾部，返回新字符串。
　　语法与padStart相同
　　abc。padEnd（10）；abc，填充默认值
　　abc。padEnd（10，）；abc
　　abc。padEnd（6，123456）；abc123
　　abc。padEnd（1）；abc
　　7、asyncawait
　　前面添加了async的函数在执行后都会自动返回一个Promise对象
　　functionfn（）｛
　　
　　｝
　　console。log（fn（））；leo
　　添加async后
　　asyncfunctionfn（）｛
　　Promise。resolve（leo）
　　｝
　　console。log（fn（））；Promise对象
　　async函数中使用await，那么await处的代码就会变成同步的，即只有等await后面的Promise执行完成得到结果才会继续往下执行，await意为等待
　　functiontimeout（）｛
　　returnnewPromise（resolve｛
　　setTimeout（（）｛
　　console。log（1）；
　　resolve（）；
　　｝，1000）；
　　｝）
　　｝
　　asyncfunctionfn（）｛
　　awaittimeout（）；执行完成才继续往下执行
　　console。log（2）；
　　｝
　　fn（）；不加async和await是2、1，加了是1、2
　　注意：
　　1、await只能在async标记的函数内部使用，单独使用会触发S
　　2、await后面需要跟异步操作，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。
　　更多详情请参考（具体场景）
　　Js异步请求按顺序调用解决方案（真实工作场景，axios、Promise、asyncawait）前端不释卷leo的博客CSDN博客
　　需求背景：现在需要调用多个异步请求，要求某个请求调用成功之后，接着调另外的请求，有时候需要用上一个请求得到的结果，作为下一个请求的参数或者条件，继续调用另一个请求。演示准备：安装axiosnpminstallaxiossave全局使用main。jsimportaxiosfromaxiosVue。prototype。axiosaxios实现一：PromisePromise是一个ECMAScript6提供的类，目的是更加优雅地书写复。
　　https：blog。csdn。netqq41809113articledetails121086178？spm1001。2014。3001。5502
　　8、RestSpread
　　spread例子
　　lettext｛
　　a：1，
　　b：2，
　　c：3，
　　｝
　　letnewText｛
　　。。。text，
　　c：4
　　｝
　　console。log（newText）；｛a：1，b：2，c：4｝
　　这块代码展示了spread语法，可以把text对象的数据都拓展到newText对象，这个功能很实用。需要注意的是，如果存在相同的属性名，后面的会把前面的覆盖。
　　如果属性的值是一个对象的话，该对象的引用会被拷贝，而不是生成一个新的对象
　　letobj｛x：｛y：10｝｝；
　　letcopy1｛。。。obj｝；
　　letcopy2｛。。。obj｝；
　　obj。x。
　　console。log（copy1，copy2）；｛x：｛y：leo｝｝｛x：｛y：leo｝｝
　　console。log（copy1。xcopy2。x）；true，x为同一个引用
　　rest例子
　　lettext｛
　　a：1，
　　b：2，
　　c：3
　　｝
　　let｛a，。。。rest｝text
　　console。log（a，rest）；1｛b：2，c：3｝
　　当对象keyvalue不确定的时候，把必选的key赋值给变量，用一个变量接收其他可选的key数据，这在之前是做不到的。注意，rest属性必须始终出现在对象的末尾，否则将抛出错误。
　　9、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（item。then（console。log））；
　　｝
　　｝
　　test（）；
　　1000
　　2000
　　3000
　　forof方法不能遍历异步迭代器，得到的结果并不是我们所期待的，此时可以使用forawaitof
　　functionTimeOut（time）｛
　　returnnewPromise（function（resolve，reject）｛
　　setTimeout（function（）｛
　　resolve（time）；
　　｝，time）；
　　｝）
　　｝
　　asyncfunctiontest（）｛
　　letarr〔TimeOut（2000），TimeOut（1000），TimeOut（3000）〕；
　　forawait（letitemofarr）｛按arr中顺序执行且返回
　　console。log（item）；
　　｝
　　｝
　　test（）；
　　2000
　　1000
　　3000
　　使用forawaitof，则等待每个Promise对象变为resolved状态才进入下一步，因此打印的结果为2000，1000，3000。
　　10、Promise。prototype。finally（）
　　Promise执行时，无论结果是fulfilled或者是rejected，在执行then（）或catch（）后，都会执行finally（）指定的回调函数，可以避免同样的语句需要在then（）和catch（）中各写一次的情况
　　newPromise（（resolve，reject）｛
　　setTimeout（（）｛
　　resolve（success）；
　　｝，1000）；
　　｝）。then（res｛
　　console。log（res）；
　　｝）。catch（err｛
　　console。log（err）；
　　｝）。finally（（）｛无论Promise结果是then（），即还是catch（），即reject，最后都会执行finally（）
　　console。log（finally）；
　　｝）
　　如每次请求发送完毕，就需要关闭loading提示框，不管请求成功或是失败，这个loading都需要关闭掉，这时把关闭loading的代码写在finally里再合适不过了。
　　11、Object。fromEntries（）
　　Object。fromEntries（）把键值对列表转换为一个对象，此方法和Object。entries（）相对的（逆操作）
　　letarr〔〔a，1〕，〔b，2〕〕；
　　letobjObject。fromEntries（arr）；
　　console。log（obj）；｛a：1，b：2｝
　　Map转Object
　　letmapObjnewMap（）；
　　mapObj。set（name，leo）；
　　mapObj。set（age，18）；
　　console。log（map）；｛nameleo，age18｝
　　letnewObjObject。fromEntries（mapObj）；
　　console。log（newObj）；｛name：leo，age：18｝
　　12、Array。prototype。flat（）
　　语法
　　letnewArrarr。flat（〔depth〕）；depth可选，指提取嵌套数组的结构深度，默认值为1。
　　flat（）会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回（数组扁平化）
　　letarr1〔0，1，2，〔3，4〕〕；
　　console。log（arr1。flat（））；〔0，1，2，3，4〕
　　letarr2〔0，1，2，〔〔〔3，4〕〕〕〕；
　　console。log（arr2。flat（2））；〔0，1，2，〔3，4〕〕
　　console。log（arr2。flat（3））；〔0，1，2，3，4〕
　　使用Infinity，可展开任意深度的嵌套数组
　　letarr3〔1，2，〔3，4，〔5，6，〔7，8，〔9，10〕〕〕〕〕；
　　arr3。flat（Infinity）；〔1，2，3，4，5，6，7，8，9，10〕
　　flat（）方法会移除数组中的空项
　　letarr5〔1，2，，，4，5〕；
　　arr5。flat（）；〔1，2，4，5〕
　　13、Array。prototype。flatMap（）
　　flatMap（）首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。顾名思义，它包含两部分功能一个是map，一个是flat（深度为1）
　　语法
　　letnewArrarr。flatMap（functioncallback（currentValue〔，index〔，array〕〕）｛
　　返回新数组的元素
　　｝〔，thisArg〕）；
　　currentValue，当前正在数组中处理的元素
　　index可选，数组中正在处理的当前元素的索引
　　array可选，被调用的map数组
　　thisArg，执行callback函数时使用的this值
　　举例
　　letnumbers〔1，2，3〕；
　　numbers。map（x〔x2〕）；〔〔2〕，〔4〕，〔6〕〕
　　numbers。flatMap（x〔x2〕）；〔2，4，6〕
　　flatMap（）与map（）和深度depth为1的flat（）几乎相同
　　letarr〔leo，，早上好〕
　　arr。map（ss。split（））；〔〔l，e，o〕，〔〕，〔早，上，好〕〕
　　arr。flatMap（ss。split（））；〔l，e，o，，早，上，好〕
　　14、String。prototype。trimStart（）
　　trimStart（）从字符串的开头删除空格，trimLeft（）是它的别名
　　
　　console。log（str。length）；6
　　strstr。trimStart（）；或str。trimLeft（）
　　console。log（str。length）；3
　　15、String。prototype。trimEnd（）
　　trimEnd（）从一个字符串的末尾删除空格，trimRight（）是它的别名
　　
　　console。log（str。length）；6
　　strstr。trimEnd（）；或str。trimRight（）
　　console。log（str。length）；3
　　16、空值合并运算符？？
　　空值合并操作符（？？）是一个逻辑操作符，当左侧的操作数为null或者undefined时，返回其右侧操作数，否则返回左侧操作数
　　letnameundefined？？leo
　　letagenull？？18
　　console。log（name）；leo
　　console。log（age）；18
　　与逻辑或操作符（）不同，会在左侧操作数为假值（例如、0、NaN、false、undefined、null）时返回右侧操作数
　　letname1？？
　　letname2
　　console。log（name1）；
　　console。log（name2）；lion
　　letage10？？18；
　　letage2018；
　　console。log（age1）；0
　　console。log（age2）；18
　　17、可选链？。
　　可选链操作符（？。）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。？。操作符的功能类似于。链式操作符，不同之处在于，在引用为null或者undefined的情况下不会引起错误，该表达式短路返回值是undefined。与函数调用一起使用时，如果给定的函数不存在，则返回undefined。
　　当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明
　　举例
　　letobj｛
　　message：｛
　　name：leo，
　　sayHi（）｛
　　
　　｝
　　｝
　　｝
　　在之前的语法中，想获取到深层属性或方法，不得不做前置校验，否则很容易命中UncaughtTypeError：Cannotreadproperty。。。这种错误，影响整个程序的运行
　　letnameobjobj。messageobj。message。
　　console。log（name）；leo
　　使用可选链操作符（？。）
　　letnameobj？。message？。
　　console。log（name）；leo
　　可选链中的？表示如果问号左边表达式有值，就会继续查询问号后面的字段。
　　注意：可选链不能用于赋值
　　letobj｛｝；
　　obj？。message？。报错
　　18、String。prototype。matchAll（）
　　matchAll（）返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器
　　letregexpt（e）（st（d？））g；
　　letstrtest1test2；
　　letarr〔。。。str。matchAll（regexp）〕；返回所有匹配上的
　　console。log（array〔0〕）；〔test1，e，st1，1〕
　　console。log（array〔1〕）；〔test2，e，st2，2〕
　　19、Promise。allSettled（）
　　已知Promise。all（）具有并发执行异步任务的能力。但它的最大问题就是如果其中某个任务出现异常（reject），所有任务都会挂掉，且直接进入reject状态。
　　如页面上有三个请求，分别请求不同的数据，如果使用Promise。all（），一个接口服务异常，整个都是失败的，都无法渲染出数据。
　　我们想要在并发任务中，无论一个任务正常或者异常，都会返回对应的的状态，则可以使用Promise。allSettled（）。
　　letpromise1（）｛
　　returnnewPromise（（resolve，reject）｛
　　setTimeout（（）｛
　　resolve（promise1）；
　　｝，3000）；
　　｝）；
　　｝；
　　letpromise2（）｛
　　returnnewPromise（（resolve，reject）｛
　　setTimeout（（）｛
　　resolve（promise2）；
　　｝，1000）；
　　｝）；
　　｝；
　　letpromise3（）｛
　　returnnewPromise（（resolve，reject）｛
　　setTimeout（（）｛
　　reject（errorpromise3）；
　　｝，2000）；
　　｝）；
　　｝；
　　使用Promise。all，则会走到catch里面，因为promise3是reject
　　Promise。all（〔promise1（），promise2（），promise3（）〕）
　　。then（（res）｛
　　console。log（res）；
　　｝）
　　。catch（（error）｛
　　console。log（error，error）；errorpromise3
　　｝）；
　　使用Promise。allSettled，不管有没有错误，三个状态都会返回，不会走到catch
　　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）；
　　｝）；
　　20、String。prototype。replaceAll（）
　　replaceAll（）返回一个新字符串，新字符串中所有满足pattern的部分都会被替换。pattern可以是一个字符串或一个正则表达式
　　letstraabbcc。replaceAll（b，）；
　　console。log（str）；aacc
　　使用正则表达式搜索值时，它必须是全局的
　　aabbcc。replaceAll（b，）；报错
　　修改如下
　　aabbcc。replaceAll（bg，）；aacc