Tout sur les boucles JavaScript

Chaque langage de programmation utilise des boucles pour exécuter à plusieurs reprises un bloc de code. Les boucles sont essentielles pour le traitement des tableaux, des listes ou des actions de répétition jusqu'à ce qu'une condition spécifique soit remplie.

JavaScript propose une variété de types de boucle. Cet aperçu explore chaque type, mettant en évidence leurs applications et leurs avantages comparatifs.

while et do...while boucles

La boucle while, la boucle la plus fondamentale, exécute un bloc de code tant qu'une condition spécifiée reste vraie. C'est simple, lisible et souvent efficace. Cependant, il est également sujet aux boucles infinies si la condition n'est pas soigneusement gérée. La boucle do...while est similaire, mais la condition est vérifiée après chaque itération, garantissant au moins une exécution.

// Process an array until it's empty
let queue1 = ["a", "b", "c"];

while (queue1.length) {
  let item = queue1.shift();
  console.log(item);
}

// Similar, but handles empty array gracefully
let queue2 = [];

do {
  let item = queue2.shift() ?? "empty";
  console.log(item);
} while (queue2.length);

la boucle for

La boucle for est idéale pour itération d'un nombre spécifique de fois. Il est puissant et efficace pour les tâches répétitives. Bien que initialement intimidant pour les débutants, la compréhension de sa structure simplifie son utilisation.

// Log numbers 1 to 5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

for...of et for await...of boucles

La boucle for...of fournit un moyen concis pour itérer sur des objets itérables comme les tableaux, les cartes, les ensembles et les chaînes. Il simplifie la traversée du tableau par rapport aux boucles traditionnelles for.

let myList = ["a", "b", "c"];

for (let item of myList) {
  console.log(item);
}

for...of n'est pas limité aux iterables intégrés; Les iterables personnalisés peuvent être créés en implémentant le protocole itérable (ajoutant une méthode [Symbol.iterator]). for await...of est le homologue asynchrone, idéal pour travailler avec des itérables et des générateurs asynchrones.

async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function* aNumberAMinute() {
  let i = 0;
  while (true) {
    yield i++;
    await delay(60000);
  }
}

for await (let i of aNumberAMinute()) {
  console.log(i);
  if (i >= 59) break;
}

Remarque: for await...of Fonctionne avec des itérables non-asyncs, mais l'inverse n'est pas vrai.

forEach et map Méthodes

forEach et map ne sont pas des boucles strictement, mais ils facilitent l'itération du tableau. forEach Exécute une fonction fournie une fois pour chaque élément de tableau. Bien que des boucles historiquement plus lentes que for, les moteurs JavaScript modernes ont minimisé cette différence de performance. map crée un nouveau tableau en appliquant une fonction à chaque élément du tableau d'origine. Les deux méthodes offrent des avantages de lisibilité dans certains contextes, en particulier lorsque vous travaillez avec des paradigmes de programmation fonctionnelle.

["a", "b", "c"].forEach((item, index) => console.log(`${index}: ${item}`));

let doubled = [1, 2, 3].map(x => x * 2); // doubled = [2, 4, 6]

for...in boucle

La boucle for...in itère sur les propriétés énumérées d'un objet. Il comprend également des propriétés héréditaires, qui peuvent être une source de comportement inattendu. Il est mieux adapté pour itérer les littéraux d'objets où les propriétés héritées ne sont pas une préoccupation. L'ordre clé est désormais cohérent entre les navigateurs.

// Process an array until it's empty
let queue1 = ["a", "b", "c"];

while (queue1.length) {
  let item = queue1.shift();
  console.log(item);
}

// Similar, but handles empty array gracefully
let queue2 = [];

do {
  let item = queue2.shift() ?? "empty";
  console.log(item);
} while (queue2.length);

Conclusion

JavaScript fournit un ensemble riche de mécanismes de boucle. Le choix de la boucle appropriée dépend de la tâche spécifique, des exigences de performance et des préférences de style de codage. Comprendre les nuances de chaque type permet aux développeurs d'écrire un code efficace et maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!