Les boucles for...of et for…in

Boucle for...of

Les boucles for...of et for...in offrent des moyens pratiques d'itérer sur les éléments des tableaux et les propriétés des objets en JavaScript. Les deux boucles sont utilisées pour parcourir, mais elles sont appliquées dans différentes situations.

Boucle for...of

La boucle for...of est destinée à l'itération sur les objets itérables (tels que les tableaux, les chaînes, les objets Set et Map). Elle permet de parcourir facilement les éléments d'une collection.

Syntaxe :

    
      for (let variable of iterable) {
        // code qui sera exécuté pour chaque élément
      }
    
  

Exemple :

    
      let array = [1, 2, 3, 4, 5];

      for (let value of array) {
        console.log(value);
      }

      // Résultat : 1 2 3 4 5
    
  

Utilisation avec les tableaux

La boucle for...of est pratique pour parcourir les éléments d'un tableau, car elle donne accès à la valeur de chaque élément :

    
      let fruits = ['apple', 'banana', 'cherry'];

      for (let fruit of fruits) {
          console.log(fruit);
      }

      // Résultat : apple banana cherry
    
  

Utilisation avec les chaînes

On peut aussi utiliser la boucle for...of pour itérer sur les caractères d'une chaîne :

    
      let str = 'Hello';

      for (let char of str) {
        console.log(char);
      }

      // Résultat : H e l l o
    
  

9.2 Boucle for...in

La boucle for...in est utilisée pour itérer sur les propriétés énumérables d'un objet. Elle fait une itération sur la clé de chaque propriété.

Syntaxe :

    
      for (let key in object {
        // code qui sera exécuté pour chaque élément
      }
    
  

Exemple :

    
      let obj = {a: 1, b: 2, c: 3};

      for (let key in obj) {
        console.log(key + ': ' + obj[key]);
      }

      // Résultat : a: 1 b: 2 c: 3
    
  

Utilisation avec les objets

La boucle for...in est pratique pour parcourir les propriétés d'un objet, car elle donne accès à la clé et à la valeur de chaque propriété :

    
      let user = {
        name: 'John',
        age: 30,
        isAdmin: true
      };

      for (let key in user) {
        console.log(key + ': ' + user[key]);
      }

      // Résultat : name: John age: 30 isAdmin: true
    
  

Utilisation avec les tableaux

La boucle for...in peut être utilisée pour itérer sur les indices d'un tableau, mais ce n'est pas recommandé car elle itère sur toutes les propriétés énumérables, y compris celles du prototype :

    
      let array = ['apple', 'banana', 'cherry'];

      for (let index in array) {
        console.log(index + ': ' + array[index]);
      }

      // Résultat : 0: apple 1: banana 2: cherry
    
  

9.3 Comparaison des boucles for...of et for...in

Comparaison des boucles for...of et for...in :

1

Mission

Frontend SELF FR, niveau 34, leçon 3

Bloqué

Parcours d'un tableau

Parcours d'un tableau

Ouvrir

1

Mission

Frontend SELF FR, niveau 34, leçon 3

Bloqué

Parcours des propriétés

Parcours des propriétés

Ouvrir