Comprendre ECMAScript Iterable et Iterator (ES6)

View more Tutorials:

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
 

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);
 
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.

View more Tutorials: