Collecter et itérer selon la méthode ES6

La spécification ECMAScript 6, bien qu'elle soit encore sous forme de brouillon, apporte la promesse de nombreux nouveaux outils intéressants à ajouter à la ceinture du programmeur JavaScript. Les nouvelles classes, telles que Set et Map, offrent des solutions natives pour travailler avec des types de collections spécifiques. L'instruction for...of offre une alternative élégante aux méthodes traditionnelles d'itération sur les données.

Les Set permettent de suivre une collection d'éléments dans lesquels chaque élément peut apparaître une seule fois. Les Map offrent davantage de fonctionnalités qu'auparavant en utilisant des Object pour associer des clés à des valeurs. Avec un Map, vos clés ne doivent pas nécessairement être des chaînes, et vous n'avez pas à choisir accidentellement un nom de clé qui entre en conflit avec les noms de méthodes d'une Object. Les opérations de recherche sur les Map et Set natives sont effectuées en temps constant, ce qui offre des gains d'efficacité par rapport à ce qui est possible avec des implémentations simulées.

L'exemple suivant illustre la construction d'une Set et l'utilisation de for...of pour itérer ses éléments:

<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>

Voici un exemple correspondant qui illustre l'utilisation et l'itération d'un Map:

<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>

Certains navigateurs, tels que Chrome, Internet Explorer et Firefox, sont déjà compatibles avec les Set et Map. La compatibilité native, complétée par les bibliothèques de polyfills comme es6-collections ou es6-shim, permet aux développeurs JavaScript de commencer à créer des collections dès aujourd'hui. Aucun polyfill n'est disponible pour l'instruction for...of (bien qu'il soit possible de transpiler la prise en charge via Traceur), mais la compatibilité native est actuellement disponible dans Chrome et Firefox.

Mise à jour de septembre 2014: lien vers une option de polyfill supplémentaire, es6-shim.