当前位置：网站首页>遍历await方法的区别：以for和forEach为例

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

2022-08-04 21:47:00 【新生代农民工官方认证码农小拽】

场景举例

先简单了解一下遍历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>