Coleta e iteração, do jeito ES6

A especificação ECMAScript 6, ainda na forma de rascunho, traz a promessa de várias novas ferramentas interessantes que podem ser adicionadas aos programadores de JavaScript. Novas classes, como Set e Map, oferecem soluções nativas para trabalhar com tipos específicos de coleções, e a instrução for...of oferece uma alternativa elegante às formas tradicionais de iterar dados.

Sets oferecem uma maneira de acompanhar uma coleção de itens em que cada item pode aparecer no máximo uma vez. Maps oferecem mais funcionalidade do que antes era possível usando Objects para associar chaves a valores. Com um Map, suas chaves não precisam ser strings, e você não precisa se preocupar em escolher acidentalmente um nome de chave que entre em conflito com os nomes de método de um Object. As operações de pesquisa em Maps e Sets nativas são feitas em tempo constante, o que oferece ganhos de eficiência sobre o que é possível com implementações simuladas.

O exemplo a seguir demonstra a construção de um Set e o uso de for...of para iterar os elementos dele:

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

Veja um exemplo correspondente que ilustra o uso e a iteração em uma 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>

Alguns navegadores, como o Google Chrome, o Internet Explorer e o Firefox, já oferecem suporte para Sets e Maps. O suporte nativo complementado por bibliotecas de polyfill como es6-collections ou es6-shim significa que os desenvolvedores JavaScript podem começar a criar com esses novos tipos de coleções hoje mesmo. Não há polyfills disponíveis para a instrução for...of, embora seja possível transcompilar o suporte pelo Traceur, mas o suporte nativo está disponível atualmente no Chrome e no Firefox.

Atualização, setembro de 2014: vinculado a uma opção adicional de polyfill, es6-shim