De ECMAScript 6-specificatie, hoewel nog in conceptvorm , brengt de belofte in zich van vele opwindende nieuwe tools die aan de riem van de JavaScript-programmeur kunnen worden toegevoegd. Nieuwe klassen zoals Set en Map bieden native oplossingen voor het werken met specifieke soorten verzamelingen, en de for...of instructie biedt een elegant alternatief voor traditionele manieren om gegevens te herhalen.
Set s bieden een manier om een verzameling items bij te houden waarin elk item maximaal één keer kan voorkomen. Map bieden meer functionaliteit dan voorheen mogelijk was door Object te gebruiken om sleutels aan waarden te koppelen. Met een Map hoeven uw sleutels geen tekenreeksen te zijn en hoeft u zich geen zorgen te maken dat u per ongeluk een sleutelnaam kiest die botst met de methodenamen van een Object . Opzoekbewerkingen op native Map 's en Set 's worden in constante tijd uitgevoerd, wat efficiëntiewinst oplevert ten opzichte van wat mogelijk is met gesimuleerde implementaties.
Het volgende voorbeeld demonstreert het construeren van een Set en het gebruik van for...of om de elementen ervan te herhalen:
<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 is een bijbehorend voorbeeld dat het gebruik en de iteratie van een Map illustreert:
<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>
Sommige browsers, zoals Chrome , Internet Explorer en Firefox , hebben al ondersteuning toegevoegd voor Set en Map programma's. Native ondersteuning, aangevuld met polyfill-bibliotheken zoals es6-collections of es6-shim, betekent dat JavaScript-ontwikkelaars vandaag nog kunnen beginnen met het bouwen met deze nieuwe collectietypen. Er zijn geen polyfills beschikbaar voor de for...of instructie (hoewel het mogelijk is om ondersteuning via Traceur te transpileren), maar er is tegenwoordig native ondersteuning beschikbaar in Chrome en Firefox .
Update, september 2014 : Gekoppeld aan een extra polyfill-optie, es6-shim