JavaScript の非同期ループ: for...of と forEach

JavaScript の非同期機能は非常に優れていますが、これらの非同期タスクを処理する適切なループを選択すると、大きな違いが生まれます。 for...of と forEach の違いを楽しく解説してみましょう?

1. for...of 非同期関数を使用したループ
for...of ループは、あなたが 1 つのタスクを完了するのを辛抱強く待ってから、次のタスクを開始する非常に勤勉な友人のようなものだと想像してください。次の作業を開始する前にコーヒーが淹れるのを待つようなものです。

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);

processItemsConcurrently は、すべての doSomethingAsync 呼び出しを同時に開始するため、すべてのタスクが並行して実行されます。

楽しい理由:

?‍♂️?‍♀️ 並列実行: すべてのタスクが一度に開始されるため、非常に高速ですが、少し混乱する可能性があります。

✂️ より単純な構文: 多くの場合、for...of よりも短くて簡潔です。

?最適な用途: 複数の API からデータを取得するなど、タスクが相互に依存せず、独立して実行できる場合。

覚えておいてください:
for...of は順番を待つ秩序ある友人です。
forEach では、同時に取り組み、物事を迅速に完了することが重要です。

for...of を使用すると、エラーを 1 つずつ見つけることができ、すっきりしています。
forEach を使用すると、複数のボールをジャグリングするなど、その場でエラーを処理できます。

for...of は少し遅いかもしれませんが、きちんとしていて整然としています。
混乱を避け、タスクが重複しない場合は、forEach の方が高速になります。

秩序と忍耐が必要か、それともスピードと興奮が必要かに基づいて、ニーズに合ったループを選択してください。 ??

以上がJavaScript の非同期ループ: for...of と forEachの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。