Spesifikasi ECMAScript 6, saat masih dalam bentuk draf, menghadirkan potensi akan banyak alat baru yang menarik untuk ditambahkan ke peran programmer JavaScript. Class baru seperti Set dan Map menawarkan solusi native untuk menangani jenis koleksi tertentu, dan pernyataan for...of memberikan alternatif yang elegan untuk cara tradisional iterasi melalui data.
Set menawarkan cara untuk melacak koleksi item tempat setiap item dapat muncul paling banyak satu kali. Map menawarkan lebih banyak fungsi daripada sebelumnya dengan menggunakan Object untuk mengaitkan kunci dengan nilai—dengan Map, kunci Anda tidak harus berupa string, dan Anda tidak perlu khawatir memilih nama kunci secara tidak sengaja yang bertentangan dengan nama metode Object. Operasi pencarian pada Map dan Set native dilakukan dalam waktu konstan, yang menawarkan peningkatan efisiensi dibandingkan yang mungkin dilakukan dengan implementasi simulasi.
Contoh berikut menunjukkan pembuatan Set dan penggunaan for...of untuk melakukan iterasi pada elemennya:
<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>
Berikut adalah contoh yang sesuai yang mengilustrasikan penggunaan dan iterasi melalui 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>
Beberapa browser, seperti Chrome, Internet Explorer, dan Firefox telah menambahkan dukungan untuk Set dan Map. Dukungan native yang dilengkapi dengan library polyfill seperti es6-collections atau es6-shim berarti developer JavaScript dapat mulai membangun dengan jenis koleksi baru ini sekarang. Tidak ada polyfill yang tersedia untuk pernyataan for...of (meskipun dukungan dapat ditranspilasi melalui Traceur), tetapi dukungan native saat ini tersedia di Chrome dan Firefox.
Pembaruan, September 2014: Terhubung ke opsi polyfill tambahan, es6-shim