JavaScript 中的非同步循環：for...of 與 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中文網其他相關文章！