JS循环中的中断、异步for...in、forEach、 map

最新推荐文章于 2025-03-31 16:34:16 发布

weixin_34133829

最新推荐文章于 2025-03-31 16:34:16 发布

阅读量3.8k

点赞数 2

原文链接：https://juejin.im/post/5cd80f6c51882568666df7d9

版权

本文探讨了JavaScript中不同类型的循环（forEach、map、for、for...of、for...in）与异步操作的关系。在forEach和map中，await不起作用，且不能使用break或continue，它们总是返回undefined。对于for循环、for...in和for...of，await在循环内有效，支持break和continue。总结指出，在具体场景下，开发者应选择合适的方法执行异步函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Array.prototype.forEach

forEach方法对数组的每个元素执行一次提供的函数。语法: arr.forEach(callback[, thisArg]); 参数:

callback(currentValue, index?, array?) 问好表示可选
thisArg可选参数。当执行回调函数时用作 this 的值(参考对象)。

关于异步

forEach是并行的对每个元素执行函数。所以await不会阻碍循环和代码的执行

  const arr = [1, 2, 3]
  async function wait (time) {
    const now = Date.now()
    return new Promise((res, rej) => {
      setTimeout(() => {
        console.log('我是异步执行的函数')
        res()
      }, time)
    })
  }

  arr.forEach(async (item) => {
    await wait(1000)
    console.log(item)
    return item * 2
  })
  console.log(arr) 

复制代码

打印结果为：

原因：forEach中的异步函数不生效，所以会直接执行 console.log(arr),大约1秒后会执行完异步函数，然后执行对应的console.log(item).这里的执行顺序和浏览器的event loop机制相关。如果想要确保异步代码执行完成后再继续执行，可以使用Promise.all。上面的代码可以改写成：

  const arr = [1, 2, 3]

  async function wait (time) {
    const now = Date.now()
    return new Promise((res, rej) => {
      se

最低0.47元/天解锁文章