mozilla
Vos résultats de recherche

    for...of

    Cette fonction, proposition pour ECMAScript 6 (Harmony), est expérimentale
    Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
    Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

    L'instruction for...of permet de créer une boucle qui parcourt un objet itérable (ce qui inclue les objets Array, Map, Set, l'objet arguments, etc.) et qui permet d'exécuter une instruction pour la valeur de chaque propriété.

    Syntaxe

    for (variable of objet)
      instruction
    
    variable
    À chaque itération, la valeur d'une propriété différente est affectée à variable.
    objet
    L'objet dont on parcourt les propriétés énumérables.
    instruction
    Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un bloc d'instructions.

    Exemples

    Les différences entre for...of et for...in

    L'exemple qui suit illustre la différence entre une boucle for...of et une boucle for...in. for...in itère sur les noms des propriétés alors que for...of itère sur les valeurs des propriétés :

    let arr = [3, 5, 7];
    arr.toto = "coucou";
    
    for (let i in arr) {
       console.log(i); // affiche "0", "1", "2", "toto"
    }
    
    for (let i of arr) {
       console.log(i); // affiche "3", "5", "7"
    }
    

    Utiliser Array.prototype.forEach()

    Pour obtenir les mêmes valeurs qu'avec une boucle for...of, on peut utiliser la méthode Array.prototype.forEach() :

    let arr = [3, 5, 7];
    arr.toto = "coucou";
    
    arr.forEach(function (élément, index) {
        console.log(élément); // affiche "3", "5", "7"
        console.log(index);   // affiche "0", "1", "2"
    });
    
    // ou avec Object.keys()
    
    Object.keys(arr).forEach(function (élément, index) {
        console.log(arr[élément]); // affiche "3", "5", "7", "coucou"
        console.log(arr[index]);   // affiche "3", "5", "7"
    });

    Parcourir des collections DOM

    Il est possible de parcourir des collections DOM telles que NodeList. Dans cet exemple, on ajoute une classe read aux paragraphes qui sont des descendants directs d'un article :

    // Note : Cela ne fonctionnera que pour les plates-formes
    // qui implémentent NodeList.prototype[Symbol.iterator]
    let articleParagraphs = document.querySelectorAll("article > p");
    
    for (let paragraph of articleParagraphs) {
      paragraph.classList.add("read");
    }
    

    Itérer sur les générateurs

    Grâce à cette instruction, on peut également itérer sur les générateurs :

    function* fibonacci() { // une fonction génératrice
        let [prev, curr] = [0, 1];
        for (;;) {
            [prev, curr] = [curr, prev + curr];
            yield curr;
        }
    }
    
    for (let n of fibonacci()) {
        // on arrête la séquence à 1000
        if (n > 1000)
            break;
        console.log(n);
    }
    

    Spécifications

    Spécification Statut Commentaires
    ECMAScript 6 (ECMA-262)
    La définition de 'for...of statement' dans cette spécification.
    En cours de validation comme recommandation Définition initiale.

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple 29[1]
    38
    13 (13)
    17 (17) (.iterator)
    27 (27) ("@@iterator")
    36 (36) (Symbol.iterator)
    Pas de support 25 7.1
    Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple ? 29[1]
    38
    13.0 (13)
    17.0 (17) (.iterator)
    27.0 (27) ("@@iterator")
    36.0 (36) (Symbol.iterator)
    ? ? iOS 8

    [1] Cette fonctionnalité est disponible grâce à une préférence utilisateur. Sous chrome://flags/#enable-javascript-harmony, activer le paramètre « Activer la fonctionnalité expérimentale JavaScript ».

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: senshu, fscholz, SphinxKnight
    Dernière mise à jour par : SphinxKnight,
    Masquer la barre latérale