概览(循环形式 - 罕用)

for
map
forEach
filter

申明遍历的数组和异步办法

申明一个数组：⬇️

const skills = ['js', 'vue', 'node', 'react']
复制代码

再申明一个promise的异步代码: ⬇️

function getSkillPromise (value) {
return new Promise((resolve, reject) => {

setTimeout(() => {  resolve(value)}, 1000)

})
}
复制代码
for 循环中应用

因为for循环并非函数，而async、await须要在函数中应用，因而须要在for循环外套一层function

async function test () {
for (let i = 0; i < skills.length; i++) {

const skill = skills[i]const res = await getSkillPromise(skill)console.log(res)

}
}

test() // 调用
复制代码

当应用await时，心愿JavaScript暂停执行，直到期待 promise 返回处理结果。上述后果意味着for循环中有异步代码，是能够等到for循环中异步代码齐全跑完之后再执行for循环前面的代码。
然而他不能解决回调的循环，如forEach、map、filter等，上面具体分析。

map 中应用

在map中应用await, map 的返回值始是promise数组，这是因为异步函数总是返回promise。

async function test () {
console.log('start')
const res = skills.map(async item => {

return await getSkillPromise(item)

})
console.log(res)
console.log('end')
}

test()
复制代码

后果：始终为promise数组

start
[
Promise { <pending> },
Promise { <pending> },
Promise { <pending> },
Promise { <pending> }
]
end
复制代码

若果你想要等到promise的返回后果，能够应用promise.all()解决一下

async function test () {
console.log('start')
const res = skills.map(async item => {

return await getSkillPromise(item)

})
const resPromise = await Promise.all(res)
console.log(resPromise)
console.log('end')
}

test()

// 后果
start
[ 'js', 'vue', 'node', 'react' ]
end

复制代码
forEach 中应用

先上代码和后果

async function test () {
console.log('start')
skills.forEach(async item => {

const res = await getSkillPromise(item)console.log(res)

})
console.log('end')
}

test()
复制代码

预期后果

'Start'
'js'
'vue'
'node'
'react'
'End'
复制代码

理论后果 在forEach循环期待异步后果返回之前就执行了console.log('end')

'Start'
'End'
'js'
'vue'
'node'
'react'
复制代码

JavaScript 中的 forEach不反对 promise 感知，也反对 async 和await，所以不能在 forEach 应用 await 。

filter 中应用

应用filter过滤item为vue或者react的选项

失常应用 filter：

async function test () {
console.log('start')
const res = skills.filter(item => {

return ['vue', 'react'].includes(item)

})
console.log(res)
console.log('end')
}

test() // 调用

// 后果
start
[ 'vue', 'react' ]
end
复制代码

应用 await后：

async function test () {
console.log('start')
const res = skills.filter(async item => {

const skill = await getSkillPromise(item)return ['vue', 'react'].includes(item)

})
console.log(res)
console.log('end')
}

test()
复制代码

预期后果：

start
[ 'vue', 'react' ]
end
复制代码

理论后果:

[ 'js', 'vue', 'node', 'react' ]
end
复制代码

论断：因为异步函数getSkillPromise返回后果返回的promise总是真的，所以所有选项都通过了过滤作者：毕了业就退休