遍历await方法的区别：以for和forEach为例

最新推荐文章于 2023-06-25 17:59:33 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2023-06-25 17:59:33 发布

阅读量472

点赞数

分类专栏： js 文章标签：遍历await js

本文链接：https://blog.csdn.net/tuzi007a/article/details/126098378

版权

js 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

场景举例

先简单了解一下遍历await的应用场景，有助于增进对遍历方法区别的了解。

比如我有一组学生名单

const studentNames = ['dilireba', 'zhangsan', 'xiaoming']

现在需要根据学生姓名到获取到数据库中对应的学生信息，

数据库查询是异步的，

此时就需要用到遍历await来查询

方法介绍

遍历方法目前有四个比较常见的：

for
for ... of ...
forEach
重写forEach

百度可自行查询详细介绍。

区别

在此处以for和 forEach为例。

先从两者的遍历结构说起：

for:

const getStudentDetails = async () {
  for(let i = 0; i < studentNames.length; i++) {
	let s = await mongodb.find(...)
  }
}

forEach:

const getStudentDetails = async () => {
  studentNames.forEach(async item => {
	let s = await mongodb.find(...)
  })
}

可以看到，for属于同步操作，而forEach中的遍历过程是在回调函数中的，

也就是异步的。

很显然， for在遍历后，可以直接得出想要的结果，而forEach是不行的。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function test() {
      return new Promise((resolve, reject) => {
        resolve(111)
      })
    }

    const arr = [1, 2, 3]
    const arr1 = []
    const arr2 = []

    async function fn1() {
      for(let i = 0; i < arr.length; i++) {
        let r = await test()
        arr1.push(r)
      }
	  // --> 这里打印的结果，就是想要得到的结果
      console.log('fn1-arr1: ', arr1)
    }

    fn1()

    async function fn2() {
      arr.forEach(async item => {
        let r = await test()
        arr2.push(r)

        console.log('arr2: ', arr2)
      })
	  // --> 这里打印的arr2是[]
      console.log('fn2-arr2: ', arr2)
    }

    fn2()

  </script>
</body>
</html>