Itérateurs et itérables JavaScript

Dans ce didacticiel, vous découvrirez les itérateurs et les itérables JavaScript à l'aide d'exemples.

Iterables et itérateurs JavaScript

JavaScript fournit un protocole pour parcourir les structures de données. Ce protocole définit comment ces structures de données sont itérées en utilisant la for… ofboucle.

Le concept du protocole peut être divisé en:

  • itérable
  • itérateur

Le protocole itérable mentionne qu'un itérable doit avoir la Symbol.iteratorclé.

Iterables JavaScript

Les structures de données qui ont la Symbol.iterator()méthode sont appelées itérables. Par exemple, tableaux, chaînes, ensembles, etc.

Itérateurs JavaScript

Un itérateur est un objet renvoyé par la Symbol.iterator()méthode.

Le protocole itérateur fournit la next()méthode pour accéder à chaque élément de l'itérable (structure de données) un à la fois.

Regardons un exemple d'itérables ayant Symbol.Iterator()

 const arr = (1, 2 ,3); // calling the Symbol.iterator() method const arrIterator = arr(Symbol.iterator)(); // gives Array Iterator console.log(arrIterator); const str = 'hello'; // calling the Symbol.iterator() method const strIterator = str(Symbol.iterator)(); // gives String Iterator console.log(strIterator);

Production

 Array Iterator () StringIterator ()

Ici, l'appel de la Symbol.iterator()méthode du tableau et de la chaîne renvoie leurs itérateurs respectifs.

Itérer à travers Iterables

Vous pouvez utiliser la for… ofboucle pour parcourir ces objets itérables. Vous pouvez parcourir la Symbol.iterator()méthode comme ceci:

 const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )

Production

 1 2 3

Ou vous pouvez simplement parcourir le tableau comme ceci:

 const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )

Ici, l'itérateur permet à la for… ofboucle de parcourir un tableau et de renvoyer chaque valeur.

JavaScript next (), méthode

L'objet itérateur a une next()méthode qui renvoie l'élément suivant dans la séquence.

La next()méthode contient deux propriétés: valueet done.

  • valeur
    La valuepropriété peut être de n'importe quel type de données et représente la valeur actuelle dans la séquence.
  • done
    La donepropriété est une valeur booléenne qui indique si l'itération est terminée ou non. Si l'itération est incomplète, la donepropriété est définie sur false, sinon elle est définie sur true.

Regardons un exemple d'itérables de tableau:

 const arr = ('h', 'e', 'l', 'l', 'o'); let arrIterator = arr(Symbol.iterator)(); console.log(arrIterator.next()); // (value: "h", done: false) console.log(arrIterator.next()); // (value: "e", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "o", done: false) console.log(arrIterator.next()); // (value: undefined, done: true)

Vous pouvez appeler à next()plusieurs reprises pour itérer sur un arrIteratorobjet.

  • La next()méthode renvoie un objet avec deux propriétés: valueet done.
  • Lorsque la next()méthode atteint la fin de la séquence, la donepropriété prend la valeur false.

Regardons comment for… ofloop exécute le programme ci-dessus. Par exemple,

 const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )

Production

 Bonjour

La for… ofboucle fait exactement la même chose que le programme ci-dessus.

La for… ofboucle continue d'appeler la next()méthode sur l'itérateur. Une fois qu'elle atteint done:true, la for… ofboucle se termine.

Itérateur défini par l'utilisateur

Vous pouvez également créer votre propre itérateur et appeler next()pour accéder à l'élément suivant. Par exemple,

 function displayElements(arr) ( // to update the iteration let n = 0; return ( // implementing the next() function next() ( if(n < arr.length) ( return ( value: arr(n++), done: false ) ) return ( value: undefined, done: true ) ) ) ) const arr = ('h', 'e', 'l', 'l', 'o'); const arrIterator = displayElements(arr); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next());

Production

 (valeur: "h", done: false) (valeur: "e", done: false) (valeur: "l", done: false) (valeur: "l", done: false) (valeur: "o" , done: false) (valeur: undefined, done: true)

Dans le programme ci-dessus, nous avons créé notre propre itérateur. La displayElements()fonction retourne valueet donepropriété.

  • Chaque fois que la next()méthode est appelée, la fonction est exécutée une fois et affiche la valeur d'un tableau.
  • Enfin, lorsque tous les éléments d'un tableau sont épuisés, la donepropriété prend la valeur true, avec valueas undefined.

Articles intéressants...