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

news2024/11/16 19:01:53

先看效果
在这里插入图片描述
forEach循环：
1、forEach是数组的原生方法，用于遍历数组。
2、它无法直接处理异步任务，因为它不会等待每个任务的完成，而是立即执行下一个任务。
3、这意味着如果在forEach循环中执行异步任务，它们将会同时进行，可能导致结果的顺序混乱或出现其他问题。
示例：

    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循环会按照顺序依次处理每个异步任务，等待上一个任务完成后再执行下一个任务。
示例：

    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]