forEach 和 for of/ for 循环在使用await上的区别

代码:

// 延迟 num 秒后 打印 num 
const say = async (num) => {
  console.log(num, 'begin:')
  await new Promise(resolve => {
    setTimeout(() => {
      console.log(num)
      resolve()
    }, num * 1000)
  })
}

const nums = [2, 1]

// 遍历 nums 打印
async function for_Result() {
  for (let n of nums) {
    await say(n)
  }
}

// 遍历 nums 打印
function forEach_Result() {
  nums.forEach(async n => {
    await say(n)
  })
}

// 思考分别调用下面两个方法的结果:
// for_Result()
// forEach_Result()

结果:

// for_Result()
// 2 begin:
// 1 begin:
// 1
// 2
// forEach_Result()
// 2 begin:
// 1 begin:
// 1
// 2

解析:

两个遍历方法分别使用了 for offorEach 循环数组,并使用 await等待异步方法的执行。

期望的都是实现同步执行,但是forEach并没有按照预期的去等待 say() 方法执行完毕。

难道forEach中的 await没有生效?

其实两种遍历并执行 say() 的方式是有区别的:

for of会在遍历到每个元素后,执行say()方法。

forEach在遍历每个元素后,执行的是该方法接收的回调函数方法,然后在回调中,执行say()方法。

forEach方法内部调用 回调函数 时,并没有使用await修饰,所以回调方法并不会等待上一个回调执行完毕。

内部的 await 也就失去了意义。

同理for()循环和for of原理一样,所以也能达到期望的效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值