ES6 yönteminde toplama ve yineleme

ECMAScript 6 spesifikasyonu henüz taslak biçiminde olmakla birlikte, JavaScript programcısının kemerine eklenecek heyecan verici birçok yeni aracın vaadini sağlamaktadır. Set ve Map gibi yeni sınıflar, belirli koleksiyon türleriyle çalışmak için yerel çözümler sunar. for...of ifadesi ise verileri yinelemenin geleneksel yöntemlerine zarif bir alternatif sunar.

Set'ler, her bir öğenin en fazla bir kez görünebildiği öğe koleksiyonunu izlemek için bir yol sunar. Map'ler, anahtarları değerlerle ilişkilendirmek için Object kullanarak eskisinden daha fazla işlev sunar. Map ile, anahtarlarınızın dize olması gerekmez ve yanlışlıkla Object yönteminin yöntem adlarıyla çakışan bir anahtar adını seçme konusunda endişelenmeniz gerekmez. Yerel Map ve Set'lerde arama işlemleri sabit zamanlı olarak gerçekleştirilir. Böylece, simüle edilen uygulamalarla elde edilebilecek verimlilikten daha fazla verimlilik elde edilir.

Aşağıdaki örnekte, bir Set oluşturulması ve öğelerinin iterasyonu için for...of kullanılması gösterilmektedir:

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

Map öğesinin kullanımını ve üzerinde yinelemeyi gösteren ilgili bir örneği aşağıda bulabilirsiniz:

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

Chrome, Internet Explorer ve Firefox gibi bazı tarayıcılar, Set ve Map desteğini zaten eklemiştir. Yerel destek ve es6-collections veya es6-shim gibi çoklu dolgu kitaplıkları sayesinde JavaScript geliştiricileri hemen bu yeni koleksiyon türleriyle derlemeye başlayabilir. for...of ifadesi için kullanılabilir çoklu dolgu yoktur (ancak desteği Traceur üzerinden aktarmak mümkündür), ancak yerel destek şu anda Chrome ve Firefox'ta mevcuttur.

Güncelleme, Eylül 2014: Ek bir çoklu dolgu seçeneği olan es6-shim'e bağlandı