Offer 自驾，掘友接招！我正参加2022校园招聘打卡活动，查看更多活动规则。
大家有时候需要遍历数组元素，把它们传到到异步函数中实行，这其中的多线程书写非常容易填错，我们来看一下有什么易错题。
假定大家有一个异步方法 sleepPromise，方式如下所示：
functionsleepPromise(msg,t){
returnnewPromise((resolve)=>{
setTimeout(()=>{
resolve(`promise-${msg}${t}s`);
},t *1000);
})
}
这儿为了更好地演试，应用 setTimeout 写出了一个 promise 方式的 sleep 方式。传到的 t 为延迟执行的时间也，msg 为信息。
在具体设计中，异步方法有可能是传到客户朋友 id 搜索数据库系统，得到简单好友信息。
假定我们应该在下文代码的注解部位下边写一个多线程便捷完成。
asyncfunctionloopAsync(){
console.log('[start]');
constcurTime=Date.now();
consttasks=[
['a',3],
['b',1],
['c',2],
];
//下边写赋值 tasks 传到到异步方法的实现
console.log(`[end]duration${((Date.now()-curTime)/1000).toFixed(2)}s`);
}
不正确书写：forEach
一般前面一看到要遍历数组，便用 forEach。假如你不足小编，可能写下以下几个完成：
//不正确的 forEach 书写
tasks.forEach(asynctask=>{
const[msg,t]=task;
constm=awaitsleepPromise(msg,t);
console.log(m);
})
输出结果为；
[start]
[end] duration 0.00s
promise-b 1s
promise-c 2s
promise-a 3s
这类书写并错误，其实就是将赋值编写成同歩。
问题出在哪儿？存在于 forEach 本身并不适用多线程书写，你一直在 forEach 方式最前面加不加 await 关键词都是无效的，由于它的内部结构并没有解决多线程的思路。
forEach 是 ES5 的 API，会比 ES6 的 Promise 要快的多很多。为了能向后兼容，forEach 以后也不会适用异步处理。
因此 forEach 的落实并不能堵塞 loopAsync 以后的代码，因此也会导致堵塞不成功，先导出[end]。
串行通信书写：for 循环系统
//串行通信书写
for(consttaskoftasks){
const[msg,t]=task;
constm=awaitsleepPromise(msg,t);
console.log(m);
}
应用普通 for 循环系统书写，await 的表层函数公式就仍便是 loopAysnc 方式，就可恰当储存堵塞编码。
但是这里的问题就是，这种异步方法的落实是串行通信的。能够看见一共实施了 6 s。
[start]
promise-a 3s
promise-b 1s
promise-c 2s
[end] duration 6.01s
假如我们这种要求也是有顺序的依存关系的，这么写是没难题。
但如果我们的场景是根据用户 id 二维数组从数据库中搜索相匹配登录名，我们自己的算法复杂度便是O(n)，是不合理的。
这时我们应该改变为并行处理的多线程，同时还要确保全部多线程都实行完了才实行下一步。我们可以通过Promise.all()。
并行处理完成：Promise.all
//并行处理书写
consttaskPromises=tasks.map(task=>{
const[msg,t]=task;
returnsleepPromise(msg,t).then(m=>{
console.log(m);
});
});
awaitPromise.all(taskPromises);
最先，我们应该依据 tasks 二维数组形成相对应的 promise 对象数组，随后传到到 Promise.all 方式中实行。
那样，这种异步方法便会与此同时实行。当所有多线程都执行完毕后，编码才向下实行。
输出结果如下所示：
[start]
promise-b 1s
promise-c 2s
promise-a 3s
[end] duration 3.00s
3 秒就行了，太厉害了。
返回 forEach
前边提到 forEach 最底层并没完成多线程的处理方法，才会导致堵塞无效，那我们实际上何不完成适用多线程的简单 forEach。
并行处理完成：
asyncfunctionforEach(arr,fn){
constfns=[];
for(leti=0;i<arr.length;i ){
constitem=arr[i];
fns.push(fn(item,i,arr));
}
awaitPromise.all(fns);
}
串行通信完成：
asyncfunctionforEach(arr,fn){
for(leti=0;i<arr.length;i ){
constitem=arr[i];
awaitfn(item,i,arr);
}
}
使用方法：
awaitforEach(tasks,asynctask=>{
const[msg,t]=task;
constm=awaitsleepPromise(msg,t);
console.log(m);
})
汇总
简易总结一下。
一般来说，大家更常见 Promise.all 的并行执行多线程的办法，多见于数据库系统搜索一些 id 相对应的数据库的情景。
for 周而复始的串行通信书写适用好几个多线程有依靠的状况，例如找最后邀请人。
forEach 乃是单纯的不正确书写，除非是并不是需要使用 async/await 的现象。
我就是前面西瓜哥，致力于共享前端知识，请关注我。