JS输出


题目

输出是什么

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

const arr1 = arr.map(async (item) => {
  await wait(1000)
  console.log(item)
  return item * 2
})
console.log("arr1=>", arr1)
setTimeout(() => {
  console.log(arr1)
}, 4000)

考察点:

这段代码考察了JavaScript中异步编程的概念,同时涉及到了异步函数和Promise对象的使用。

分析

在代码中,首先定义了一个常量arr,表示一个整数数组;定义了一个异步函数wait,该函数接受一个参数time,表示等待时间,然后返回一个Promise对象,在等待时间结束后resolve该Promise对象。

接下来,定义了一个常量arr1,使用Array.map方法对arr进行了遍历,对每一个元素都调用了异步函数wait。在异步函数中,使用await等待wait函数返回的Promise对象,然后打印当前元素并返回其乘以2的结果。

最后,使用console.dir方法打印arr1

由于wait函数是异步执行的,因此打印arr1时,arr1中的每一个元素都是一个Promise对象。这些Promise对象的状态可能是pending,也可能是fulfilled。如果当前运行环境(例如浏览器或Node.js环境)支持异步函数和Promise对象,那么在等待一段时间后,会分别打印每一个元素的值,以及一条消息”我是异步执行的函数”。

核心:

  • await 后面的同步代码会立即执行
  • forEach和map的源码中实际上核心功能是依赖的一个while循环,没有对异步做处理

输出结果:

[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> }
]

然后,一秒钟后,依次输出如下内容:

我是异步执行的函数
1
我是异步执行的函数
2
我是异步执行的函数
3

四秒后

 
[
  Promise {<fulfilled>: 2},

	Promise {<fulfilled>: 4},

	Promise {<fulfilled>: 6}
]

文章作者: 高红翔
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 高红翔 !
  目录