首页 > web前端 > js教程 > 正文

JavaScript 中的异步循环:for...of 与 forEach

PHPz
发布: 2024-08-29 10:33:21
原创
550 人浏览过

Async Loops in JavaScript: for...of vs forEach

JavaScript 的异步功能非常酷?但是选择正确的循环来处理这些异步任务可能会产生很大的不同。让我们来有趣地分解一下 for...of 和 forEach 之间的区别?

1。带有异步函数的 for...of 循环
将 for...of 循环想象为您超级勤奋的朋友,他耐心地等待您完成一项任务,然后再开始下一项任务。这就像在开始下一个任务之前等待咖啡冲泡一样。

for (const item of items) {
  await doSomethingAsync(item);
}
登录后复制

假设您有一系列任务,每个任务都返回一个有延迟的已解决的 Promise:

function doSomethingAsync(item) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`Processed ${item}`), 1000);
  });
}

async function processItemsSequentially(items) {
  for (const item of items) {
    try {
      const result = await doSomethingAsync(item);
      console.log(result);
    } catch (error) {
      console.error(`Oops! Error with ${item}:`, error);
    }
  }
}

const items = ['Task 1', 'Task 2', 'Task 3'];
processItemsSequentially(items);
登录后复制

processItemsSequentially 等待每个 doSomethingAsync 调用完成,然后再继续处理下一个项目。

为什么你会喜欢它:

?️ 耐心:它等待每个异步任务完成后再继续。这都是关于有序的生活。

?错误处理:您可以轻松捕获并处理循环内的错误。

?适合:当您需要按顺序完成事情时 - 例如做饭时在混合面糊之前无法烘烤蛋糕 XD。


2。 forEach 与异步函数
另一方面,forEach 就像一群同时开始任务的朋友。他们很兴奋并希望尽快完成。他们不在乎一个人是否比其他人先完成;他们不在乎。他们只是去追求它!

items.forEach(async (item) => {
  await doSomethingAsync(item);
});
登录后复制

让我们使用相同的 doSomethingAsync 函数,但使用 forEach:

async function processItemsConcurrently(items) {
  items.forEach(async (item) => {
    try {
      const result = await doSomethingAsync(item);
      console.log(result);
    } catch (error) {
      console.error(`Whoops! Issue with ${item}:`, error);
    }
  });
}

const items = ['Task A', 'Task B', 'Task C'];
processItemsConcurrently(items);
登录后复制

processItemsConcurrent 同时启动所有 doSomethingAsync 调用,因此所有任务并行运行。

为什么有趣:

?‍♂️?‍♀️ 并行执行:所有任务同时启动,速度可能超快,但有点混乱。

✂️ 更简单的语法:通常比 for...of 更短、更简洁。

?适合:当任务不相互依赖且可以独立执行时,例如从多个 API 获取数据。

记住:
for...of 是你的有序朋友,正在等待轮到他们。
forEach 就是同时介入并快速完成工作。

for...of 让你可以一一捕获错误,干净利落。
forEach 可以让你即时处理错误,比如同时处理多个球。

for...of 可能会慢一点,但是整齐有序。
如果你能适应混乱并且任务不重叠,forEach 会更快。

根据您需要秩序和耐心还是速度和刺激来选择适合您需求的循环! ??

以上是JavaScript 中的异步循环:for...of 与 forEach的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板