【每日一题】在 map 中和 for 中调用异步函数的区别

前端印记

共 2076字,需浏览 5分钟

 ·

2021-08-28 13:02

人生苦短,总需要一点仪式感。比如学前端~

区别

map先执行同步操作执行完并返回,之后再一次一次执行异步任务;

for等待异步返回结果,之后再进入下一次循环。

测试

公共代码

const arr = [12345];
function getData({
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("data");
    }, 1000);
  });
}

map 表现

(async () => {
  const result = arr.map(async () => {
    console.log("start");
    const data = await getData();
    console.log(data);
    return data;
  });
  console.log(result);
})();

/* 先一次性打印下边这两行*/
// 5 start -> 遍历每一项,打印start
// (5)[Promise, Promise, Promise, Promise, Promise] -> 返回的结果(在未执行完之前展开,都是pending状态;执行完毕后展开,都是fulfilled状态)

/* 待结果完毕后,一次性打印await后内容*/
// 5 data -> 遍历每一项异步执行返回的结果
打印结果
promise状态观察

map 函数的原理小总结:

  1. 循环数组,把数组每一项的值传给回调函数
  2. 将回调函数处理后的结果 push 到一个新的数组
  3. 返回新的数组

map 函数都是同步执行的,循环每一项的时候,到给新数值都是同步操作

代码执行结果:

map 不会等到回调函数的异步函数返回结果,就会进入下一次循环。执行完同步操作之后返回结果,所以 map 返回的值都是 promise。

for 表现

(async () => {
  for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i);
    const data = await getData();
    console.log(data);
  }
})();

// 0
// data
// 1
// data
// 2
// data
// 3
// data
// 4
// data
打印结果

END
愿你历尽千帆,归来仍是少年。


让我们一起携手同走前端路!

关注公众号回复【加群】

● 工作中常见页面布局的n种实现方法

● 三栏响应式布局(左右固宽中间自适应)的5种方法

● 两栏自适应布局的n种实现方法汇总

● 工作中常见的两栏布局案例及分析

● 垂直居中布局的一百种实现方式

● 常用九宫格布局的几大方法汇总

● 为什么操作DOM会影响WEB应用的性能?

● 移动端滚动穿透的6种解决方案

● Vue + TypeScript 踩坑总结

浏览 70
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报