【面试题】在JS循环中使用await会怎么样?

简介: 【面试题】在JS循环中使用await会怎么样?

前言

这个问题是这样产生的?某天,在学习异步的知识遇到这样一道题:使用Promise的方式,每隔一秒输出数组中一个值

const arr = [1, 2, 3]
arr.reduce((pre, cur) => {
  return pre.then(() => {
    returnnewPromise((resolve, reject) => {
      setTimeout(() => {
        resolve(console.log(cur))
      }, 1000);
    })
  })
}, Promise.resolve())
复制代码

那这段代码还是挺好了解的,相当于

Promise.resolve().then(() => {
  returnnewPromise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(1))
    }, 1000);
  })
}).then(() => {
  returnnewPromise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(2))
    }, 1000);
  })
}).then(() => {
  returnnewPromise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(3))
    }, 1000);
  })
})
复制代码

看完之后,我就在想,如果我在循环中,每次输出值之后停止一秒,也可以解决,于是乎就有了以下代码

const arr = [1, 2, 3]
constsleep = (ms) => {
  returnnewPromise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  awaitsleep(1000)
}
复制代码

打印结果也是符合预期的,在这里我就产生了第一个疑问:await不是要搭配async使用的么?这里怎么能单独使用?(不信你把代码放到浏览器控制台试试)

接着我把for改成了forEach,发现根本达不到效果,第二个疑问产生:forEach中await为什么失效了呢?

arr.forEach(async item => {
  console.log(item);
  await sleep(1000)
})
复制代码

带着这两个疑问,那就开始学习起来,寻找答案。

在for循环中的await

记得在学习async/await的时候有这样一句话,await只能和async搭配一起使用,其实这句话是没有错的。那为什么前面可以直接写await呢,因为我是直接写在浏览器控制台的,咱们在编辑器写代码的时候一定要套一个async使用的

<script>  
   const arr = [1, 2, 3]
   constsleep = (ms) => {
     returnnewPromise((resolve, reject) => {
       setTimeout(() => {
         resolve()
       }, ms)
     })
   }
   constlogByOneSecond = async () => {
     for (let i = 0; i < arr.length; i++) {
       console.log(arr[i]);
       awaitsleep(1000)
     }
   }   
   logByOneSecond()
 </script>   
复制代码

所以这就算闹了个笑话,哈哈,不过当我遇到不理解的时候,又多了一个思考方向。

好的,如上所述,await确实发挥了他的作用,让JS直到等到了promise返回的处理结果,再继续往下执行;那for...of,while是不是也可以呢

const logByForof = async () => {
  for (const item of arr) {
    console.log(item);
    await sleep(1000)
  }    
}
logByForof()
复制代码
constlogByWhile = async () => {
  let i = 0
  while (i !== arr.length) {
    awaitsleep(1000)
    console.log(arr[i]);
    i++
  }
}
logByWhile()
复制代码

结果也是符合预期,可以在循环中使用await并实现效果

在forEach循环中的await

如一开始,在forEach中并没有的到预期的效果;首先得到一个结果:forEach中async 和await是无效的。

那我看到的解释有以下几种

  1. JavaScript 中的 forEach不支持 promise 感知,也不支持 async 和await,所以不能在 forEach 使用 await 。
  2. map/forEach内部使用了while结合callback方式来执行函数,await不会等待callback的执行
  3. forEach 只支持同步代码

第二种说法,简化以后的伪代码,如下

while(index < arr.length){
  callback(item, index)
}
复制代码

map/forEach是简单的执行下回调函数,并不会处理异步的情况。即:map/forEach 会同时创建出多个回调函数,多个回调函数被加上了各自的 async、await,如下

async ()=>{
  await sleep(1000); 
} 
async ()=>{ 
  await sleep(1000);
} 
async ()=>{ 
  await sleep(1000);
}
复制代码

各个函数之间是独立的,彼此的回调也是独立的;请求是异步的,彼此之间又没有关联,顺序也就自然无法保证

总结

回顾了 async/await 在循环语句里的使用方法,对于普通的 for-loop,所有的 await 都是串行调用的,可以放心使用,包括 while、for-in、for-of 等等;但是在有 callback 的 array 方法,如 forEach、map、filter、reduce 等等,有许多副作用,最好就别使用 await 了。

大厂面试题分享 面试题库

前端后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

相关文章
|
2月前
|
前端开发 JavaScript
JavaScript中的Async/Await:简化异步编程
JavaScript中的Async/Await:简化异步编程
307 109
|
2月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
402 204
|
3月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await
JavaScript异步编程:从回调地狱到Async/Await
|
3月前
|
前端开发 JavaScript
JavaScript异步编程:从回调地狱到Async/Await优雅进化
JavaScript异步编程:从回调地狱到Async/Await优雅进化
|
3月前
|
前端开发 JavaScript
JavaScript异步编程:从Callback到Async/Await的进化
JavaScript异步编程:从Callback到Async/Await的进化
|
8月前
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时,我能答出来的都在这里了。
闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
359 16
当面试官再问我JS闭包时,我能答出来的都在这里了。
|
7月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
用好PDCA循环法,轻松slay面试
如何在面试中完美发挥?可以借鉴PDCA循环法。P(Plan):规划面试策略和简历;D(Do):准备面试技巧、刷题等;C(Check):通过模拟面试提升表达能力;A(Act):复盘面试问题,查漏补缺,避免重复错误。这一科学方法有助于系统性地提升面试表现。