devstory

Comprendre JavaScript Iterable et Iterator

  1. Iteration
  2. Le concept de Iterator
  3. Concept de Iterable

1. Iteration

ECMAScript 6 vous offre un nouveau moyen d’interagir avec la structure de données, appelée Iteration (Itération). Maintenant, nous allons clarifier cela.
Vous devez distinguer deux concepts :
  • Iterator
  • Iterable
Les concepts de Iterator, Iterable appliquent aux classes Array, Set, Map.

2. Le concept de Iterator

Iterator (Itérateur): un objet est appelé Iterator s'il contient un pointeur (pointer) au élément prochain Iteration.
Techniquement, un objet en ECMAScript est appelé un Iterator s'il y a une méthode nommée next(), et cette méthode renvoie un objet sous forme {value:SomeValue,done:booleanValue}. true est la valeur de done si Iteration a été complet, si non sa valeur sera false.
iterator-object-example.js
// An Iterator Object:
let myIterator = { 
  someProp: "Some Prop",
  //
  next : function()  {
      return  {
         value: "Tom",
         done: false
      }
  }
}
// ----------- TEST -------------------
let entry = myIterator.next();
console.log(entry); // { value: 'Tom', done: false }
console.log(entry.value); // Tom

3. Concept de Iterable

Iterable (Itérable) - En termes de langage, un objet est appelé Iterable s'il contient une collection de données et il fournit un moyen de publier ses données. Par exemple, un tableau (Array) peut être appelé Iterable car il contient une collection de données et vous pouvez accéder à ses éléments.
Techniquement, en ECMAScript un objet est appelé Iterable (Itérable) lors qu'il a une méthode avec la clé (key) Symbol.iterator, et cette méthode renvoie un objet Iterator.
Symbol.iterator est une valeur du type de données Symbol, comme 100 est une valeur du type entier (Integer). Vous pouvez voir également sur Symbol dans l'article ci-dessous :
Ci-dessous un exemple simple : un objet avec des properties :
  • myProp1
  • myProp2
  • 100
  • myProp3
  • Symbol.iterator
object-with-properties.js
// An Object:
let myObject = {
   // A property
   myProp1 : "Some Value 1",
    // A property
   'myProp2' : "Some Value 2",
   // A property
   100 : "One hundred",
   // A property (Method)
   myProp3 :  function()  {
       console.log("I'm a method");
   },
   // A property (Method)
   [Symbol.iterator] : function() {
      console.log("I'm a [Symbol.iterator] method");
   }
} 
// ----------- TEST --------------
console.log( myObject["myProp1"] ); // Some Value 1
console.log( myObject["myProp2"] ); // Some Value 2
console.log( myObject[100] ); // One hundred
myObject["myProp3"](); // I'm a method
myObject[Symbol.iterator]();// I'm a [Symbol.iterator] method
Output:
Some Value 1
Some Value 2
One hundred
I'm a method
I'm a [Symbol.iterator] method
Iterable?
Pour résumer, un objet est appelé Iterable s'il a une méthode avec une clé Symbol.iterable, et sa méthode renvoie un objet Iterator.
iterable-object-example.js
// An Iterator Object
let myIterator = {
   next : function()  {
      return  {value: Math.random(), done: false};
   }
}
// A Iterable object:
let myIterable = {
   myProp : "Some value",
   // A Method returns an Iterator object.
   [Symbol.iterator] :  function() {
       return myIterator;
   }
}
// ------ TEST -----------
// An iterator object.
let it = myIterable[Symbol.iterator]();

let entry = it.next();
console.log(entry);

entry = it.next();
console.log(entry);
Output:
{ value: 0.6026736348993575, done: false }
{ value: 0.1790056262472559, done: false }
Une classe est appelée Iterable si elle a une méthode nommée [Symbol.iterator]. Les objets qui sont créés dans cette classe sera des objets Iterable.
class-iterable-example.js
// An Iterable class.
class MyClass {
    constructor() { 
    }
    someMethod() {
        console.log("Some method");
    }
    [Symbol.iterator]() {
        // An Iterator object.
        var myIterator = {
            next: function() {
                return {value: Math.random(),done: false};
            }
        };
        return myIterator;
    }
}
// ----------- TEST -----------------
let myObject = new MyClass();
myObject.someMethod();
// An Iterator Object.
let it = myObject[Symbol.iterator]();
let entry;
let i = 0;
while ( (entry = it.next()).done == false )  {
    console.log( entry);
    i++;
    if(i > 5)  {
      break;
    }
}
Remarque : En ECMAScript, les classes Array, Set, Map sont Iterable.

Tutoriels de programmation ECMAScript, Javascript

Show More

Tutoriels de programmation ECMAScript, Javascript

Show More

Articles les plus récents

Show More