概述(循环方式-常用)formatapforEachfilter声明遍历数组,异步方法声明数组:??constskills=['js','vue','node','react']复制代码并声明一个promise异步代码:??functiongetSkillPromise(value){returnnewPromise((resolve,reject)=>{setTimeout(()=>{resolve(value)},1000)})}复制for循环中使用的代码由于for循环不是函数,函数中需要用到async和await,所以需要再包裹一层functionasyncfunctiontest(){for(leti=0;i{returnawaitgetSkillPromise(item)})console.log(res)console.log('end')}test()copycoderesult:alwayspromisearraystart[Promise{},Promise{},Promise{},Promise{}]end复制代码如果要等到promise的返回的结果,可以用promise.all()处理asyncfunctiontest(){console.log('start')constres=skills.map(asyncitem=>{returnawaitgetSkillPromise(item)})constresPromise=awaitPromise.all(res)console.log(resPromise)console.log('end')}test()//resultstart['js','vue','node','react']endcopycodeforEach使用上面的代码和结果先asyncfunctiontest(){console.log('start')skills.forEach(asyncitem=>{constres=awaitgetSkillPromise(item)console.log(res)})console.log('end')}test()copycodeexpectedresult'Start''js''vue''node''react''End'copycodeactualresultconsole.log('执行前oreforEach循环等待异步结果返回end')'Start''End''js''vue''node''react'JavaScript中复制代码forEach不支持promise感知,同时支持async和await,所以不能在forEach中使用awaitfilter。使用过滤器过滤要查看或做出反应的项目。正常使用过滤器:asyncfunctiontest(){console.log('start')constres=skills.filter(item=>{return['vue','react'].includes(item)})console.log(res)console.log('end')}test()//call//结果start['vue','react']end使用await后复制代码:asyncfunctiontest(){console.log('开始')constres=skills.filter(asyncitem=>{constskill=awaitgetSkillPromise(item)return['vue','react'].includes(item)})console.log(res)console.log('end')}test()复制代码预期结果:start['vue','react']end复制代码实际结果:['js','vue','node','react']end复制代码结论:因为异步函数getSkillPromise返回的promise永远为真,所以所有选项都通过Filter作者:毕业后退休