【面试题】在JS循环中使用await会怎么样?
创始人
2024-05-28 08:46:38
0

前言

这个问题是这样产生的?某天,在学习异步的知识遇到这样一道题:使用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使用的

   
复制代码

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

好的,如上所述,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 = 0while (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 。

  1. map/forEach内部使用了while结合callback方式来执行函数,await不会等待callback的执行

  1. 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 了。

大厂面试题分享 面试题库

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

地址:前端面试题库

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...