Erfassung und Iteration nach ES6-Methode

Jeff Posnick

Die ECMAScript 6-Spezifikation befindet sich zwar noch in Entwurfsform, verspricht aber viele spannende neue Tools, die JavaScript-Programmierern zur Verfügung stehen werden. Neue Klassen wie Set und Map bieten native Lösungen für die Arbeit mit bestimmten Sammlungstypen. Die Anweisung for...of ist eine elegante Alternative zu herkömmlichen Methoden der Iteration über Daten.

Sets bieten eine Möglichkeit, eine Sammlung von Elementen im Blick zu behalten, in der jedes Element höchstens einmal vorkommen kann. Maps bieten mehr Funktionen als zuvor mit Objects, um Schlüssel mit Werten zu verknüpfen. Bei einem Map müssen Ihre Schlüssel keine Strings sein und Sie müssen sich keine Sorgen machen, dass Sie versehentlich einen Schlüsselnamen auswählen, der mit den Methodennamen einer Object kollidiert. Suchvorgänge für native Map- und Set-Objekte werden in konstanter Zeit ausgeführt, was im Vergleich zu simulierten Implementierungen zu Effizienzsteigerungen führt.

Im folgenden Beispiel wird gezeigt, wie eine Set erstellt und mit for...of über ihre Elemente iteriert wird:

<pre id="log"></pre>

<script>
    function log() {
    document.querySelector('#log').textContent += Array.prototype.join.call(arguments, '') + '\n';
    }

    log('Creating, using, and iterating over a Set:');
    var randomIntegers = new Set();
    // Generate a random integer in the range [1..10] five times,
    // and use a Set to keep track of the distinct integers that were generated.
    for (var i = 0; i < 5; i++) {
    randomIntegers.add(Math.floor(Math.random() * 10) + 1);
    }
    log(randomIntegers.size, ' distinct integers were generated.');
    log('The number 10 was ', randomIntegers.has(10) ? '' : 'not ', 'one of them.');
    log('Here\'s all of them:');
    // Use for...of to iterate over the items in the Set.
    // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-iteration-statements
    // The Set iterator yields a single value corresponding to each entry in the Set.
    for (var item of randomIntegers) {
    log(item);
    }
</script>

Hier ist ein entsprechendes Beispiel, das die Verwendung und Iteration über eine Map veranschaulicht:

<script>
    log('\nCreating and iterating over a Map:');
    // Maps can be initialized by passing in an iterable value (https://people.mozilla.org/~jorendorff/es6-draft.html#sec-map-iterable)
    // Here, we use an Array of Arrays to initialize. The first value in each sub-Array is the new
    // Map entry's key, and the second is the item's value.
    var typesOfKeys = new Map([
    ['one', 'My key is a string.'],
    ['1', 'My key is also a string'],
    [1, 'My key is a number'],
    [document.querySelector('#log'), 'My key is an object']
    ]);
    // You can also call set() to add new keys/values to an existing Map.
    typesOfKeys.set('!!!!', 'My key is excited!');

    // Use for...of to iterate over the items in the Map.
    // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-iteration-statements
    // There are several types of Map iterators available.
    // typesOfKeys.keys() can be used to iterate over just the keys:
    log('Just the keys:');
    for (var key of typesOfKeys.keys()) {
    log('  key: ', key);
    }

    // typesOfKeys.values() can be used to iterate over just the values:
    log('Just the values:');
    for (var value of typesOfKeys.values()) {
    log('  value: ', value);
    }

    // The default Map iterator yields an Array with two items; the first is the Map entry's key and the
    // second is the Map entry's value. This default iterator is equivalent to typesOfKeys.entries().
    log('Keys and values:');
    // Alternative, ES6-idiomatic syntax currently supported in Safari & Firefox:
    // for (var [key, value] of typesOfKeys) { … }
    for (var item of typesOfKeys) {
    log('  ', item[0], ' -> ', item[1]);
    }
</script>

Einige Browser wie Chrome, Internet Explorer und Firefox unterstützen bereits Sets und Maps. Dank nativer Unterstützung, ergänzt durch Polyfill-Bibliotheken wie es6-collections oder es6-shim, können JavaScript-Entwickler bereits heute mit diesen neuen Sammlungstypen arbeiten. Für die for...of-Anweisung sind keine Polyfills verfügbar (es ist jedoch möglich, die Unterstützung über Traceur zu transpilieren). Native Unterstützung ist jedoch in Chrome und Firefox verfügbar.

Aktualisierung, September 2014: Verknüpfung mit einer zusätzlichen Polyfill-Option, es6-shim