Asynchrone Schleifen in JavaScript: for...of vs forEach

Die asynchronen Funktionen von JavaScript sind ziemlich cool? Aber die Wahl der richtigen Schleife zur Bewältigung dieser asynchronen Aufgaben kann einen großen Unterschied machen. Lassen Sie uns den Unterschied zwischen for...of und forEach mit einer Prise Spaß aufschlüsseln ?

1. for...of-Schleife mit Async-Funktionen
Stellen Sie sich die for...of-Schleife als Ihren äußerst fleißigen Freund vor, der geduldig darauf wartet, dass Sie eine Aufgabe erledigen, bevor er mit der nächsten beginnt. Es ist, als würde man darauf warten, dass der Kaffee fertig ist, bevor man mit der nächsten Aufgabe beginnt.

for (const item of items) {
  await doSomethingAsync(item);
}

Angenommen, Sie haben eine Reihe von Aufgaben, die jeweils mit einer Verzögerung ein gelöstes Versprechen zurückgeben:

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 wartet auf den Abschluss jedes doSomethingAsync-Aufrufs, bevor mit dem nächsten Element fortgefahren wird.

Warum Sie es lieben werden:

?️ Geduld: Es wartet, bis jede asynchrone Aufgabe abgeschlossen ist, bevor es fortfährt. Es geht um dieses geordnete Leben.

? Fehlerbehandlung: Sie können Fehler innerhalb der Schleife leicht erkennen und behandeln.

? Perfekt für: Wenn Sie Dinge in Ordnung bringen müssen – zum Beispiel beim Kochen einer Mahlzeit, bei der Sie den Kuchen nicht backen können, bevor Sie den Teig gemischt haben. XD.

---

2. forEach mit Async-Funktionen
Auf der anderen Seite ist forEach wie ein Haufen Freunde, die alle gleichzeitig mit ihren Aufgaben beginnen. Sie sind aufgeregt und wollen so schnell wie möglich fertig werden. Es ist ihnen egal, ob eine Person vor den anderen fertig wird; Sie machen es einfach!

items.forEach(async (item) => {
  await doSomethingAsync(item);
});

Lassen Sie uns dieselbe doSomethingAsync-Funktion verwenden, aber mit 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 startet alle doSomethingAsync-Aufrufe gleichzeitig, sodass alle Aufgaben parallel ausgeführt werden.

Warum es Spaß macht:

?‍♂️?‍♀️ Parallele Ausführung: Alle Aufgaben beginnen auf einmal, was superschnell, aber etwas chaotisch sein kann.

✂️ Einfachere Syntax: Oft kürzer und prägnanter als für...of.

? Perfekt für: Wenn Aufgaben nicht voneinander abhängig sind und unabhängig voneinander ausgeführt werden können, z. B. das Abrufen von Daten von mehreren APIs.

Denken Sie daran:
denn...of ist dein ordentlicher Freund, der darauf wartet, bis er an die Reihe kommt.
Bei forEach geht es darum, gleichzeitig einzuspringen und Dinge schnell zu erledigen.

for...of ermöglicht es Ihnen, Fehler einzeln zu erkennen, was sauber und ordentlich ist.
Mit forEach können Sie Fehler im Handumdrehen beheben, wie zum Beispiel das Jonglieren mit mehreren Bällen.

for...of ist vielleicht etwas langsamer, aber es ist sauber und ordentlich.
forEach kann schneller sein, wenn Sie mit dem Chaos klarkommen und sich die Aufgaben nicht überschneiden.

Wählen Sie die Schleife, die Ihren Bedürfnissen entspricht, je nachdem, ob Sie Ordnung und Geduld oder Geschwindigkeit und Spannung benötigen! ??

Das obige ist der detaillierte Inhalt vonAsynchrone Schleifen in JavaScript: for...of vs forEach. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!