ES6 heeft een aantal ingebouwde Iterables, nl. String, Array, TypedArray, Map en Set. Een Iterable is een object dat het iterable protocol heeft geimplementeerd.

Iterable protocol

Een object is itereerbaar als het een @@iterator methode heeft geimplenteerd. Dit betekent dat het ergens op de prototype chain een property Symbol.iterator heeft. Dit is een methode die geen argumenten accepteert en een object returnt dat voldoet aan het Iterator protocol

Iterator protocol

Een object is een iterator wanneer het een next() functie heeft geimplementeerd dat een object teruggeeft met de volgende properties:

• done - dit is een boolean die aangeeft of het einde van de lijst is bereikt
• value - de waarde van het volgende item uit de lijst

Voorbeelden

Itereren over een string

var someString = 'hi';
var iterator = someString[Symbol.iterator]();
 
console.log(iterator.next()); // { value: "h", done: false }
console.log(iterator.next()); // { value: "i", done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Map

Een Map is een collectie van key/value paren.

let myMap = new Map();

// losse elementen
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap.get('key1')); // 'value1'
console.log(myMap.has('key2')); // true

// itereren
var iterator = myMap.entries(); // is hetzelfde als myMap[Symbol.iterator]()

console.log(iterator.next()); // {value: ['key1, 'value1'], done: false}
console.log(iterator.next()); // {value: ['key2, 'value2'], done: false}
console.log(iterator.next()); // {value: undefined, done: true}

var iterator = myMap.keys(); // geeft een iterator terug
console.log(iterator.next()); // {value: 'key1', done: false}
console.log(iterator.next()); // {value: 'key2', done: false}
console.log(iterator.next()); // {value: undefined, done: true}

var iterator = myMap.values(); // geeft een iterator terug
console.log(iterator.next()); // {value: 'value1', done: false}
console.log(iterator.next()); // {value: 'value2', done: false}
console.log(iterator.next()); // {value: undefined, done: true}

myMap.forEach(
    (value,key,collection) => { // let op: we gebruiken een arrow function
      console.log(value);
      console.log(key);
      console.log(collection); // collection ===  myMap
});

// alle elementen
console.log(myMap.size); // 2
myMap.clear();
console.log(myMap.size); // 0

Set

Een Set is een collectie values

let mySet = new Set();

// losse elementen
mySet.add('value1').add('value2'); // .add is te chainen
console.log(mySet.has('value1')); // true
console.log(mySet.has('value10')); // false

// itereren
var iterator = mySet.entries(); // geeft een iterator terug die een [value,value] 
                                // array teruggeeft als value.
                                // identiek aan Map, maar dan zijn key en value 
                                // identiek.
console.log(iterator.next()); // {value: ['value1', 'value1], done: false}
console.log(iterator.next()); // {value: ['value2', 'value2], done: false}
console.log(iterator.next()); // {value: undefined, done: true}

var iterator = mySet.values(); // geeft een iterator terug
console.log(iterator.next()); // {value: 'value1', done: false}
console.log(iterator.next()); // {value: 'value2', done: false}
console.log(iterator.next()); // {value: undefined, done: true}

var iterator = mySet.keys(); // is hetzelfde als mySet.values()
console.log(iterator.next()); // {value: 'value1', done: false}
console.log(iterator.next()); // {value: 'value2', done: false}
console.log(iterator.next()); // {value: undefined, done: true}

mySet.forEach((value,key,collection) => { // let op: arrow function
    console.log(value);       // value
    console.log(key);         // key === value
    console.log(collection);
    console.log(mySet === collection); // true
});

// alle elementen
console.log(mySet.size); // 2
mySet.clear();
console.log(mySet.size); // 0

for-of

In tegenstelling tot for-in, dat over alle properties itereert in een onvoorspelbare volgorde, kan for-of over de data in het object itereren.

syntax:

for (variable of object) {
  statement
}

Voorbeeld:

var myMap = new Map();

myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

for (let mapItem of myMap) {
    console.log(mapItem); // [key, value]
}

Opdracht

Zie \04a.Itereren\itereren-iterators.html voor de opdracht