JS循环：JS中使用await可能会产生的反应

本文来和大家一起聊聊JavaScript循环的相关知识，主要解析js循环中如何使用await以及结果分析，以及可能产生的反应，下面一起来看一下。

JS循环：JS中使用await可能会产生的反应

在for循环中的await

记得在学习async/await的时候有这样一句话，await只能和async搭配一起使用，其实这句话是没有错的。那为什么前面可以直接写await呢，因为我是直接写在浏览器控制台的，咱们在编辑器写代码的时候一定要套一个async使用的：

<script>  
  const arr = [1, 2, 3]
  const sleep = (ms) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, ms)
    })
  }
  const logByOneSecond = async () => {
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i]);
      await sleep(1000)
    }
  }   
  logByOneSecond()
</script>

如上所述，await确实发挥了他的作用，让JS直到等到了promise返回的处理结果，再继续往下执行；那for...of,while是不是也可以呢？

const logByForof = async () => {
  for (const item of arr) {
    console.log(item);
    await sleep(1000)
  }    
}
logByForof()

const logByWhile = async () => {
  let i = 0
  while (i !== arr.length) {
    await sleep(1000)
    console.log(arr[i]);
    i++
  }
}
logByWhile()

结果也是符合预期，可以在循环中使用await并实现效果，

在forEach循环中的await

如一开始，在forEach中并没有的到预期的效果；首先得到一个结果：forEach中async 和await是无效的。那我看到的解释有以下几种：

●  JavaScript 中的 forEach不支持 promise 感知，也不支持 async 和await，所以不能在 forEach 使用 await 。

●  map/forEach内部使用了while结合callback方式来执行函数，await不会等待callback的执行

●  forEach 只支持同步代码

第二种说法，简化以后的伪代码，如下：

while(index < arr.length){
  callback(item, index)
}

map/forEach是简单的执行下回调函数，并不会处理异步的情况。即：map/forEach 会同时创建出多个回调函数，多个回调函数被加上了各自的 async、await，如下：

async ()=>{
  await sleep(1000); 
} 
async ()=>{ 
  await sleep(1000);
} 
async ()=>{ 
  await sleep(1000);
}

各个函数之间是独立的，彼此的回调也是独立的；请求是异步的，彼此之间又没有关联，顺序也就自然无法保证。

总结

回顾了 async/await 在循环语句里的使用方法，对于普通的 for-loop，所有的 await 都是串行调用的，可以放心使用，包括 while、for-in、for-of 等等;但是在有 callback 的 array 方法，如 forEach、map、filter、reduce 等等，有许多副作用，最好就别使用 await 了。