js在处理异步任务时，forEach和for...of循环之间的区别

先看效果

forEach循环：

1、forEach是数组的原生方法，用于遍历数组。

2、它无法直接处理异步任务，因为它不会等待每个任务的完成，而是立即执行下一个任务。

3、这意味着如果在forEach循环中执行异步任务，它们将会同时进行，可能导致结果的顺序混乱或出现其他问题。

示例：

javascript 复制代码

    const getVideoResolutionRatio = (val) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(val * 2);
        }, 1200)
      });
    }
    
    const getValueForEach = async () => {
      const videoFiles = [1, 2, 3];
      let tempList = [];
      videoFiles.forEach(async (item) => {
        let reslut = await getVideoResolutionRatio(item);
        tempList.push(reslut);
      })
      return tempList
    }
     // ForEach获取值：
    const testForEach = async () => {
      let test = await getValueForEach()
      console.log(test);
    }
    testForEach() //输出[]

在上述示例中，异步任务asyncTask被放在forEach循环中。由于forEach不会等待异步任务的完成。

for...of循环：

for...of循环是ES6引入的一种遍历方式，可以用于遍历可迭代对象（如数组、字符串、Set、Map等）。

它支持await关键字，可以在循环体中等待异步任务的完成。

for...of循环会按照顺序依次处理每个异步任务，等待上一个任务完成后再执行下一个任务。

示例：

javascript 复制代码

    const getVideoResolutionRatio = (val) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(val * 2);
        }, 1200)
      });
    }

    const getValueForOf = async () => {
      const videoFiles = [1, 2, 3];
      let tempList = [];
      for (const item of videoFiles) {
        let reslut = await getVideoResolutionRatio(item);
        tempList.push(reslut);
      }
      return tempList
    }


    // ForOf获取值：
    const testForOf = async () => {
      let test = await getValueForOf()
      console.log(test);
    }
    testForOf() //输入[2, 4, 6]

在上述示例中，使用了for...of循环来遍历数组，并在循环体中使用await关键字等待异步任务的完成。这样可以保证按照数组的顺序依次输出结果。

总结:，for...of循环在处理异步任务时更加可靠，可以控制任务的顺序和流程，而forEach循环无法直接处理异步任务，容易导致结果的混乱。