Boucle for…of en JavaScript expliquée : syntaxe, exemples et bonnes pratiques

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

Lorsque vous travaillez avec des données en JavaScript, la répétition est essentielle. Pour traiter des données telles que les tableaux et les chaînes dans l’ordre, JavaScript propose plusieurs syntaxes de boucles. Parmi elles, l’instruction for…of se distingue comme une option simple mais puissante.

Dans cet article, nous expliquerons en détail l’instruction for…of de JavaScript — des bases aux cas d’utilisation plus avancés. Nous commencerons par des exemples adaptés aux débutants, puis aborderons des modèles pratiques utilisés dans le développement intermédiaire et réel. Après avoir lu ceci, vous pourrez utiliser l’instruction for…of en toute confiance sans être bloqué lors de l’écriture de boucles.

2. Qu’est‑ce que l’instruction for…of de JavaScript ? Utilisation de base

2.1 Vue d’ensemble de l’instruction for…of

L’instruction for…of de JavaScript est une syntaxe qui vous permet de parcourir des objets itérables de manière claire et simple. Elle est conçue pour gérer efficacement des structures de données telles que les tableaux, les chaînes, les Map et les Set.

2.2 Syntaxe de base de l’instruction for…of

Utilisez la syntaxe suivante pour traiter chaque élément d’un objet itérable dans l’ordre.

for (const element of arrayOrObject) {
  // 반복 처리
}

Cette syntaxe est utile lorsque vous souhaitez récupérer facilement chaque élément d’un tableau ou d’une chaîne.

2.3 Exemples de code pratiques

Exemple 1 : Afficher les éléments d’un tableau dans l’ordre

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

Sortie :

Apple  
Banana  
Orange

Exemple 2 : Afficher chaque caractère d’une chaîne

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

Sortie :

J  
a  
v  
a  
S  
c  
r  
i  
p  
t

2.4 Types de données pris en charge

L’instruction for…of peut être utilisée avec les objets itérables suivants :

1. Tableaux (Array)
2. Chaînes (String)
3. Objets Map
4. Objets Set
5. L’objet arguments (un objet passé en tant qu’arguments de fonction)
6. Objets NodeList (une collection d’éléments HTML)

Remarque : Vous ne pouvez pas l’appliquer directement aux littéraux d’objet (nous expliquerons la solution de contournement plus tard).

3. Différences et comparaisons avec d’autres syntaxes de boucles

3.1 Différences entre for…of et for…in

Exemple : Utilisation de for…in

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // a, b, c
}

Note importante :
Comme for…in peut énumérer les propriétés de la chaîne de prototypes également, vous devez être prudent—surtout lors du parcours d’objets.

3.2 Différences entre for…of et forEach

Exemple : Utilisation de forEach

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

Note importante :
Puisque forEach ne peut pas interrompre la boucle prématurément, l’instruction for…of est recommandée lorsque le contrôle du flux est important.

4. Exemples pratiques et techniques avancées

4.1 Filtrer un tableau

L’exemple suivant n’affiche que les nombres pairs.

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

Sortie :

2  
4

4.2 Récupérer les clés et valeurs d’une Map

Cet exemple montre comment récupérer les clés et les valeurs à l’aide d’un objet Map.

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Sortie :

name: Taro  
age: 25

4.3 Combinaison avec le traitement asynchrone

Ci-dessous un exemple de gestion d’opérations asynchrones avec l’instruction for…of.

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Dans cet exemple, chaque requête API est exécutée dans l’ordre, vous pouvez donc récupérer des données tout en préservant la séquence d’exécution.

answer.## 5. Notes et dépannage

5.1 Lorsque vous obtenez une erreur avec des objets

L’instruction for…of ne peut pas être utilisée avec des littéraux d’objet. Utilisez plutôt Object.entries().

Exemple : Traitement avec Object.entries()

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Sortie :

a 1  
b 2

Avec cette approche, vous pouvez parcourir efficacement les clés et les valeurs d’un objet.

5.2 Considérations de performance

L’instruction for…of offre généralement des performances suffisantes pour les cas d’utilisation courants, mais vous devez être prudent avec les grands ensembles de données. Si nécessaire, envisagez d’utiliser une boucle for basée sur un indice ou une boucle while.

Exemple : Boucle for basée sur l’indice

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 Ajout de la gestion des erreurs

Lorsque vous combinez un traitement asynchrone avec l’instruction for…of, assurez‑vous d’inclure une gestion appropriée des erreurs.

Exemple : Gestion des erreurs avec try…catch

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. Section FAQ

Q1 : Le for…of fonctionne-t-il dans tous les navigateurs ?

R1 :
L’instruction for…of a été introduite dans ES6 (ECMAScript 2015). Elle est prise en charge par les navigateurs modernes, mais ne fonctionne pas dans Internet Explorer.

Navigateurs pris en charge :

• Google Chrome 38 ou version ultérieure
• Firefox 36 ou version ultérieure
• Safari 7.1 ou version ultérieure
• Edge 12 ou version ultérieure

Si vous devez prendre en charge d’anciens navigateurs, utilisez Babel pour transpiler votre code ou choisissez une autre syntaxe de boucle.

Q2 : Comment obtenir l’indice lors de l’utilisation de for…of ?

R2 :
Avec for…of, vous ne pouvez pas accéder directement aux indices, mais vous pouvez utiliser la méthode entries() pour récupérer à la fois l’indice et la valeur en même temps.

Exemple :

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

Sortie :

0 Apple  
1 Banana  
2 Orange

Q3 : Puis‑je utiliser for…of avec des littéraux d’objet ?

R3 :
Non. L’instruction for…of ne fonctionne qu’avec des objets itérables. Les littéraux d’objet ne sont pas itérables, mais vous pouvez parcourir leurs clés et valeurs en utilisant Object.entries().

Exemple :

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Sortie :

a 1  
b 2

Q4 : Puis‑je utiliser for…of avec des opérations asynchrones ?

R4 :
Oui. Vous pouvez l’utiliser conjointement avec async/await.

Exemple :

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Q5 : Quelle est la différence entre for…of et forEach ?

R5 :
Le tableau ci‑dessous résume les différences.

7. Résumé

Dans cet article, nous avons couvert les points clés suivants concernant l’instruction for…of de JavaScript.

• Comment comprendre la syntaxe de base et les exemples d’utilisation et l’appliquer pour itérer sur des tableaux et des chaînes
• Les différences et meilleurs cas d’utilisation par rapport à d’autres syntaxes de boucle telles que for…in et forEach
• Exemples avancés incluant les objets Map et Set, ainsi que la combinaison avec le traitement asynchrone
• Une section FAQ pratique pour répondre aux questions courantes

7.1 Avantages de l’instruction for…of

• Simple et très lisible
• Prise en charge flexible des objets itérables
• Contrôle de boucle facile car il prend en charge break et continue

8. Que apprendre ensuite

Une fois que vous maîtrisez l’instruction for…of, il est une bonne idée d’apprendre les fonctionnalités suivantes comme prochaine étape.

1. Spread Syntax (…)

• Une fonctionnalité utile pour étendre et fusionner des tableaux et des objets.

1. Destructuring Assignment

• Une technique pour extraire facilement des valeurs des tableaux et des objets.

1. Promises and async/await in more detail

• Apprenez des moyens efficaces d’écrire du code asynchrone.

En combinant ces fonctionnalités, vous pourrez créer des programmes JavaScript plus avancés.

Pensées finales

Cet article a fourni un guide complet sur l’instruction for…of de JavaScript, couvrant tout, des bases aux cas d’utilisation pratiques pour le développement réel.

Actions d’exemple pour votre prochaine étape :

• Implémentez l’instruction for…of dans votre propre code et expérimentez avec elle.
• Essayez de traiter des tableaux, Map et Set pour approfondir votre compréhension.
• Défiez-vous avec des fonctionnalités ES6 plus avancées pour améliorer vos compétences.